Xamarin.Forms Shell Quick Tip – Modal Navigation

Avatar

James

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.

2 comments

Leave a comment