In the Shell quick tip series we explored navigation features of Shell including passing data and going back easily. Today, I want to talk about a common feature of navigation where a new page pops up over the current page. This is different than traditional navigation where a page is pushed onto the stack. A modal page requires the user to perform an action to close the page such as tapping a close button or completing registration. With Xamarin.Forms Shell we can easily navigate using modal pages with a specific property 🙂
Presentation mode
Xamarin.Forms Shell handles all navigation styles through a property called PresentationMode
. You can use it to perform modal navigation with or without animations. Additionally, you can use it with non-modal navigation to control how pages are pushed onto the stack. The mode I prefer to use is ModalAnimated
to get that nice slide up from the bottom effect.
Shell.PresentationMode="ModalAnimated"
This property goes directly into the Content
page top element of your page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App11.Views.ModalPage"
Shell.PresentationMode="ModalAnimated">
You are also able to set it directly in the code behind if you are using C# markup for your user interface.
Shell.SetPresentationMode(this, PresentationMode.ModalAnimated);
Closing the Modal
As I discussed previously we can use the new back navigation with ..
to pop the current page. That works the same with modal pages.
Shell.Current.GoToAsync("..");
Android Back Buttons
Android devices all have a dedicated back button that controls any page that has been navigated to. This includes modal pages, but Xamarin.Forms has us covered as we can control this functionality by overriding OnBackButtonPressed
on our page.
protected override bool OnBackButtonPressed() => false;
Now, when our modal page is displayed the user is forced to click the close button.
More Shell
There are a bunch of great features in Xamarin.Forms Shell that you can explore with our awesome documentation.
Please add tab Badge Support in shell Tab Bar.
Hi, is it possible to have a short workflow here? Like register for an account where there would be a couple screens to go through were you don’t want the nav bars displaying during the workflow?