Hack: Hijack Tabs for Custom Actions in Xamarin.Forms

David Ortinau - Dec 30 '20 - - Dev Community

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.

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 AppShell.xaml.

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .