September 4th, 2020

Xamarin.Forms Shell Quick Tip – Modal Navigation

James Montemagno
Principal Manager, Tech PM

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 🙂

Animation of a new page showing modally when a button is pressed animating up from the bottom of the page

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.

Author

James Montemagno
Principal Manager, Tech PM

James Montemagno is a Principal Lead Program Manager for Developer Community at Microsoft. He has been a .NET developer since 2005, working in a wide range of industries including game development, printer software, and web services. Prior to becoming a Principal Program Manager, James was a professional mobile developer and has now been crafting apps since 2011 with Xamarin. In his spare time, he is most likely cycling around Seattle or guzzling gallons of coffee at a local coffee shop. He ...

More about author

2 comments

Discussion is closed. Login to edit/delete existing comments.

  • Muhammad Aamir Khan

    Please add tab Badge Support in shell Tab Bar.

  • Bart Sipes

    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?