I was asked yesterday how to customize tabs to execute actions rather than routing to a page. This is not something we can do by design, but since when has that ever stopped us before! Challenge accepted.
So I took a few minutes to whip of this variation of an existing sample that shows how you can have your first page be a login screen without tabs, and then a main screen with tabs.
David Ortinauwas asked today how to do Login (no tabs) + Tabs and have some tabs be actions rather than destination pages. Interesting challenge, so I whipped up this alteration made possible with deferred navigation: github.com/davidortinau/S…
Not a UX I recommend btw.21:26 PM - 29 Dec 2020
Kick things off by creating a tab without any real content.
Noticed the content there is aptly named because the page is blank.
Now we need to register to handle the
Navigating event on the
And now we are ready for the interception! Making sure that we aren't handling the boot route when
e.Current is null, we first grab the deferral token so Shell knows to not immediately complete the routing request.
Next, we use the
Route to identify which tab was tapped, and then we can execute our custom intentions. In this case we are going to trigger a "back" action which will work if there is actually a page to be popped off the stack. As you can see we have another tab here that will log out of the app.
Finally, we need to complete the deferred navigation request so Shell knows we are finished.
That's it! Check out the video from Twitter, and the complete code is on GitHub.