Xamarin.Forms Shell Quick Tip – Modal Navigation
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 🙂
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.
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.
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.
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.
There are a bunch of great features in Xamarin.Forms Shell that you can explore with our awesome documentation.