{"id":47256,"date":"2020-05-13T10:03:17","date_gmt":"2020-05-13T17:03:17","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=47256"},"modified":"2020-09-03T08:01:14","modified_gmt":"2020-09-03T15:01:14","slug":"xamarin-forms-shell-query-parameters","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-forms-shell-query-parameters\/","title":{"rendered":"Xamarin.Forms Shell Quick Tip &#8211; Passing Data When Navigating"},"content":{"rendered":"<p>Every mobile application needs navigation. <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/app-fundamentals\/shell?WT.mc_id=shelldata-blog-jamont\" target=\"_blank\" rel=\"noopener noreferrer\">Xamarin.Forms Shell<\/a> offers built-in <em>route<\/em> based navigation to enable easy navigation to and from pages in your application. Additionally, since it is based on a <em>route<\/em> schema, you can navigate using absolute or relative routes that will even inflate a full back stack. In most cases, relative route navigation is best as you are pushing a unique page onto the stack. Let\u2019s say you are on a monkeys page and wanted to navigate to the details. You would use a simple relative route to navigate: await Shell.Current.GoToAsync(&#8220;monkeydetails&#8221;);<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-47281\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/05\/Screenshot_1589307793.png\" alt=\"2 screens from an app showing navigation from the root to details page\" width=\"540\" height=\"400\" srcset=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/05\/Screenshot_1589307793.png 540w, https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/05\/Screenshot_1589307793-300x222.png 300w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/> Now, to build up a navigation stack for deep linking you can use absolute routes. This will take you to the monkeys route and then push the details page. await Shell.Current.GoToAsync(&#8220;\/\/monkeys\/details&#8221;); This is helpful. However, in both cases it would be great is if you could pass in data to the details page to tell it to display specific monkeys details. Read on for a full walkthrough of how to pass data from one page to another.<\/p>\n<h2>Passing dData What happens when you want to pass data from one page to another? Well that is where Shell&#8217;s built in<\/h2>\n<p><em>Query Parameters<\/em> come in. It enables you to seamlessly pass data around your application. Let&#8217;s walk through a simple app that increase the count on the page and passes that data to the next page when the app navigates: <img decoding=\"async\" class=\"aligncenter size-full wp-image-47264\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/05\/Pass-Data-with-Shell-Query-Parameter-1.gif\" alt=\"Image Pass Data with Shell Query Parameter\" width=\"292\" height=\"612\" \/> Look at the code to setup the first page. It is a relatively simple user interface with a few buttons and label to display the count: <stacklayout VerticalOptions=\"Center\"> <label x:Name=\"LabelCount\" Text=\"{Binding Count, StringFormat='You clicked {0}'}\"><\/label> <button Text=\"Click Me\" x:Name=\"ButtonClick\" Clicked=\"ButtonClick_Clicked\"><\/button> <button Text=\"Navigate\" x:Name=\"ButtonNavigate\" Clicked=\"ButtonNavigate_Clicked\"><\/button> <\/stacklayout> In the code behind for the page when we click the button, it increase the count and notifies the user interface.<\/p>\n<pre><code>public int Count { get; set; }\n\nvoid ButtonClick_Clicked(object sender, EventArgs e)\n{\n    Count++;\n    OnPropertyChanged(nameof(Count));\n}\n<\/code><\/pre>\n<h2>Navigating To Page2 Now, let&#8217;s say that we want to navigate to the second page, in this case<\/h2>\n<p><code>Page2<\/code>. We would first register our route in our Shell: Routing.RegisterRoute(nameof(Page2), typeof(Page2)); Then we can navigate to it using<\/p>\n<p><code>GoToAsync<\/code> on the current Shell. await Shell.Current.GoToAsync(nameof(Page2)); We want to pass the current count, so we will use a query parameter on our path. This follows standard Uri routes such as<\/p>\n<p><code>path?param1=hello&amp;param2=world<\/code>. So, to pass the count we will navigate passing a parameter named <em>count<\/em>. Any data that is passed is automatically encoded for you. async void ButtonNavigate_Clicked(object sender, EventArgs e) { await Shell.Current.GoToAsync($&#8221;{nameof(Page2)}?Count={Count}&#8221;); }<\/p>\n<h2>Parsing Parameters Now that we have passed the count using the parameter, we must receive it on the second page. You can do this either in the code behind of the page that you are navigating to, or to the<\/h2>\n<p><code>BindingContext<\/code> of the page such as a view model. The first thing to do is to add a public property that <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/app-fundamentals\/shell\/navigation?WT.mc_id=shelldata-blog-jamont\" target=\"_blank\" rel=\"noopener noreferrer\">Xamarin.Forms Shell<\/a> will call the <code>set<\/code> on. Here, we will create another <em>Count<\/em> property that is a <code>string<\/code> and when we set the value we will call <code>UnescapeDataString<\/code> as a best practice. string count = &#8220;&#8221;; public string Count { get => count; set { count = Uri.UnescapeDataString(value ?? string.Empty); OnPropertyChanged(); } } Lastly, add a<\/p>\n<p><code>QueryProperty<\/code> that tells Xamarin.Forms Shell the property to set the parameter name to parse. Here, we will set the <code>Count<\/code> property for the <em>count<\/em> parameter that we passed. [QueryProperty(nameof(Count), nameof(Count))] public partial class Page2 : ContentPage { \/\/&#8230; } In this example, we only passed one parameter. However, you can add as many<\/p>\n<p><code>QueryProperty<\/code> attributes to the top of your class as you would like.<\/p>\n<h2>Deep Linking Combining route based navigation with query properties can be extremely powerful when creating apps that deep link from the web or custom data schemes. For example in the application<\/h2>\n<p><a href=\"https:\/\/github.com\/jamesmontemagno\/app-ac-islandtracker?WT.mc_id=shelldata-blog-jamont\">Island Tracker<\/a>, a custom data scheme is used to create a link that the app can use to send friend requests. Here is an example of the deep link that a user would click: acislandtracker:\/\/friends\/invite?id=a3be899c-41df-4ce6-8ca7-26b0642efcde&amp;name=James When it is clicked, Xamarin.Forms will activate the app using the<\/p>\n<p><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/app-fundamentals\/deep-linking\" target=\"_blank\" rel=\"noopener noreferrer\">AppLink API<\/a>. protected override async void OnAppLinkRequestReceived(Uri uri) { await Shell.Current.GoToAsync($&#8221;\/\/{uri.Host}\/{uri.PathAndQuery}&#8221;); } From there, Shell will ensure the<\/p>\n<p><em>friend<\/em> page is navigated to and then it will navigate to the <em>invite<\/em> page. If navigation to the <em>friend<\/em> page first was not the intent, simply pass in the full <code>uri<\/code> to Shell. It takes care of the rest to open the <em>invite<\/em> page. <img decoding=\"async\" class=\"aligncenter size-full wp-image-47265\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/05\/Deep-Link-into-iOS-Application-with-Query-Property.gif\" alt=\"Image Deep Link into iOS Application with Query Property\" width=\"292\" height=\"612\" \/><\/p>\n<h2>Learn More To learn more about navigation with Xamarin.Forms Shell and more information about using<\/h2>\n<p><code>QueryProperty<\/code> attributes, browse through our <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/app-fundamentals\/shell\/navigation?WT.mc_id=shelldata-blog-jamont\" target=\"_blank\" rel=\"noopener noreferrer\">full documentation<\/a> on Shell navigation. You can also grab the source code for this sample on <a href=\"https:\/\/github.com\/jamesmontemagno\/app-xf-shell-navigation?WT.mc_id=shelldata-blog-jamont\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a>. Want more Xamarin.Forms? Checkout our <a href=\"https:\/\/channel9.msdn.com\/Tags\/xamarin.forms-101?WT.mc_id=shelldata-blog-jamont\" target=\"_blank\" rel=\"noopener noreferrer\">Xamarin.Forms 101 series on Channel 9<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Xamarin.Forms Shell offers built in route based navigation enabling easy navigation to and from pages in your application. Continue reading for a full walkthrough of how to pass data from one page to another.<\/p>\n","protected":false},"author":544,"featured_media":47264,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,1,367],"tags":[5427,8632,8633,23,8631,9159],"class_list":["post-47256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-xamarin","category-xamarin-forms","tag-navigation","tag-query-property","tag-queryproperty","tag-shell","tag-xamarin-forms-shell","tag-xamarin-forms-shell-quick-tip"],"acf":[],"blog_post_summary":"<p>Xamarin.Forms Shell offers built in route based navigation enabling easy navigation to and from pages in your application. Continue reading for a full walkthrough of how to pass data from one page to another.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/47256","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=47256"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/47256\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/47264"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=47256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=47256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=47256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}