{"id":47890,"date":"2020-09-04T10:20:36","date_gmt":"2020-09-04T17:20:36","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=47890"},"modified":"2020-09-03T16:35:18","modified_gmt":"2020-09-03T23:35:18","slug":"xamarin-forms-shell-quick-tip-modal-navigation","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-forms-shell-quick-tip-modal-navigation\/","title":{"rendered":"Xamarin.Forms Shell Quick Tip &#8211; Modal Navigation"},"content":{"rendered":"<p>In the <a href=\"https:\/\/devblogs.microsoft.com\/xamarin\/tag\/xamarin-forms-shell-quick-tip?WT.mc_id=shellmodal-blog-jamont\" rel=\"noopener noreferrer\" target=\"_blank\">Shell quick tip series<\/a> 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 \ud83d\ude42<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/09\/Untitled-Project.gif\" alt=\"Animation of a new page showing modally when a button is pressed animating up from the bottom of the page\" width=\"300\" height=\"540\" class=\"aligncenter size-full wp-image-47894\" \/><\/p>\n<h2>Presentation mode<\/h2>\n<p>Xamarin.Forms Shell handles all navigation styles through a property called <code>PresentationMode<\/code>. 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 <code>ModalAnimated<\/code> to get that nice slide up from the bottom effect.<\/p>\n<pre><code class=\"xml\">Shell.PresentationMode=\"ModalAnimated\"\n<\/code><\/pre>\n<p>This property goes directly into the <code>Content<\/code> page top element of your page:<\/p>\n<pre><code class=\"xml\">&lt;ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n             x:Class=\"App11.Views.ModalPage\"\n             Shell.PresentationMode=\"ModalAnimated\"&gt;\n<\/code><\/pre>\n<p>You are also able to set it directly in the code behind if you are using C# markup for your user interface.<\/p>\n<pre><code class=\"csharp\">Shell.SetPresentationMode(this, PresentationMode.ModalAnimated);\n<\/code><\/pre>\n<h2>Closing the Modal<\/h2>\n<p>As I discussed <a href=\"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-forms-shell-back-navigation?WT.mc_id=shellmodal-blog-jamont\">previously<\/a> we can use the new back navigation with <code>..<\/code> to pop the current page. That works the same with modal pages.<\/p>\n<pre><code class=\"csharp\">Shell.Current.GoToAsync(\"..\");\n<\/code><\/pre>\n<h2>Android Back Buttons<\/h2>\n<p>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 <code>OnBackButtonPressed<\/code> on our page.<\/p>\n<pre><code class=\"csharp\">protected override bool OnBackButtonPressed() =&gt; false;\n<\/code><\/pre>\n<p>Now, when our modal page is displayed the user is forced to click the close button.<\/p>\n<h2>More Shell<\/h2>\n<p>There are a bunch of great features in Xamarin.Forms Shell that you can explore with our awesome <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/app-fundamentals\/shell?WT.mc_id=shellmodal-blog-jamont\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Control exactly how your pages are displayed when navigating leveraging the PresentationMode built into Xamarin.Forms Shell to display modal dialogs animated or not!<\/p>\n","protected":false},"author":544,"featured_media":47894,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,367],"tags":[5427,23,16,8631,9159],"class_list":["post-47890","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-xamarin-forms","tag-navigation","tag-shell","tag-xamarin-forms","tag-xamarin-forms-shell","tag-xamarin-forms-shell-quick-tip"],"acf":[],"blog_post_summary":"<p>Control exactly how your pages are displayed when navigating leveraging the PresentationMode built into Xamarin.Forms Shell to display modal dialogs animated or not!<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/47890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=47890"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/47890\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/47894"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=47890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=47890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=47890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}