Xamarin.Forms Shell Navigation 101

today we're going to be talking about xamarin forms shell navigation including url-based navigation and passing parameters from page to page so tune in [Music] hey everyone i'm james montemagno and i'm back with another xamarin 101 video i've been putting out a bunch of videos right here on my youtube channel every single week so hope that you're subscribed and ding that notification bell so you're up to date with all the new videos and today we're talking about another requested video from you the viewers which is navigation specifically with xamarin forms shell i'm excited about shell itself and when we walk through building a brand new application for the first time which i'll put a video up over there about we talked about that we chose shell as sort of like the future proofing of meyer xamarin forms applications i like xamarin forms shell specifically when it is more than one or two pages of your app and when you also um are doing a lot of navigation because uh when you structure your application with xamarin form shell you can add tabs top bottom fly out easily but you can navigate around with a url based navigation and url-based navigation is just like the internet it is you know having slashes and being able to go to specific string that you put into a navigation bar in this case it is telling shell to navigate to a specific url and you register pages to go to there so if you're familiar with you know mvc or routing and asp.net this should really feel right at home and if you've done any like previous like windows development or phone development in the past this should also feel very very familiar to you the really cool part about xamarin forms shell navigation with urls is that you can also pass parameters and you can have them automatically be bound to properties on your code behind or in your view model so i figure let's just get into it and start adding some pages into our existing coffee application all right so our application today the one i'm going to focus on is mark coffee application and this is the application we've been building out here on the youtube channel and this page here has a list of coffees here they're in a nice grid stack layout and they're being stored locally in a sqlite database i have all of the past videos on how we built this out previously on my youtube so take a look at those so what we want to do here is a few things this page is a list view and it specifically is the my coffee view model so there's two things we want to do first when we add a new coffee so right here we have this add command we want to navigate to a new page and then we want to navigate back after we save the item today we're just popping up a dialog also i would like to be able to click on an item and then navigate to it and see the details so over here in um our views i have this my coffee sections these are the local ones we have add my coffee and then my coffee details and then my stored coffee so this is the list details we want to push to and then my coffee page right so those are the ones that we have so we've got three pages that we want to go to i also have a view model here for my coffee view model and then another view model for add my coffee view model and previously we just shoved all of the data and all the logic into this area here into my my coffee view model so if we take a look as we scroll down we have an ad and also a selected that doesn't do anything today so we have right here an ad a roaster add coffee and then refresh so what we want to do is not you know add it manually here we want to navigate to a new page well so we want to navigate to that specific page in our application so what we first need to do is register the page with xamarin forms shell so if we go over into our shell the first thing that we'll note is that inside of our shell here we actually have this thing called a route and the route enables us to navigate to that page with a string i like to name my routes the same as the page name because then i can do a name of so anything inside of the app shell you can just add the elements here with the route but these other pages aren't in the shell right i'm going to navigate to them so i'm going to come into the code behind over here all right here we go and what we can do is we can say routing dot and then here we have things like get route get or create content and set route and register route so that's what we're going to do is call register route and it specifically is going to take in two parameters a string which is our route and then the type so i'm going to say name of and then i'm going to say my um add my coffee page so that's the first one we're going to add a new coffee and then we'll say type of and then this one will be add my coffee page so quite simple just kind of that's all you got to do and while we're here let's also register our other page which is my my coffee details over here see it there so let's go ahead and do that so my coffee details page perfect so now we have two different routes that we can navigate to so we can just start building up this hierarchy of pages we want to navigate to now at this point we're ready to navigate so let's go back over to our view model specifically the my coffee view model and now when we do add what we're going to do is we're going to say let's do var route equals and for now we'll just give it a blank string we'll say await shell dot current dot go to async and this takes in specifically a shell navigation state and that shell navigation state is actually a string so we can just pass it a route it's a little bit confusing that there's like shell navigation states but really it is just a string that we're going to go to now this route to get there is going to be a chain of events you can actually multi you know populate and navigate multiple pages deep so for example if you're on this coffee page you want to have another page and then another page you can use it so you could say page one slash page two slash page three and this would navigate to page three just like a url but it would also create the back stack for you which is really cool now we don't need to do that what we need to do is go to name of add coffee page all right there we go so now our route is ready to go all right now let's go ahead and take a look at the add my coffee page real quick because now we're navigating to it but we probably also want to navigate out of it so i'm going to go into the add my coffee view model let's take a look at that and here we have some simple properties we have a name a roaster a save command the save command is going to simply say add coffee into our database we're doing this previously like we just saw so to navigate back after we're done saving what i'm able to do is just say await shell.current and this is really cool this is one of my favorite features of dot go to async is that you can use shell and command type um commands if you will so for example to pop back instead of just like go to async or pop back async i'm just going to say dot dot that's it kind of like you do cd dot dot inside of a command prompt or terminal you could also go multiple layers deep here too so i'm just going to say dot dot and that is going to pop it back which is really really cool all right let's go ahead and navigate back out here that's literally all we have it's all we need to do and now when i run this application this will take it whenever i tap on the ad it will go to the add my coffee page and then navigate back out of it okay and that's really important is it's just a string so if we take a look here at our route we'll go ahead and see that up here so it's going to load up the application i'm going to go into my coffee now i did add a few coffees in here earlier so we should be able to see that right here but i'm going to hit add and we see our route is add my coffee page right there i'm going to go ahead and continue on and it goes to the coffee page which is really really neat now what i can do is i can say coffee coffee 2 and i'll say roaster 2 and then i'll hit save and now it's saved it to the database and it popped me back which is super awesome now when we took a look at this right when i hit this add which pop me forward and i pop backwards here i still have this ability to go backwards now you may not want that you may actually want it to be modal from the bottom that's an option that you can have and that is actually going to be on the page itself so when i go to the add my coffee page what i can do in the content page root is i can say shell dot and down here there's all sorts of different properties so fly out behaviors item foregrounds tab bars and the one that we want is presentation mode all right there's animated modal animated modal ant modal animated not animated we want just modal which is also animated by the way and with that simple line change on every page you can determine what you want it to be and this is really nice because previously you'd have to make these decisions on a parent page and make sure it's consistent through your app well now no matter what this will always be presented modally let's go into our my coffee again there we go my coffee i'm gonna pull the refresh here we get all of our coffees back now if i hit add see how it came up from the bottom now you can also override the back button now of course on ios there is no back button but you can override that functionality to not allow the navigation to go back but now we get it smooth coming up from the bottom i'll say roaster three i don't know i'm coming up with names off the top of my head here for roaster three and i'll hit save again all right so now we actually get it in here can pull the refresh and just like that i'm going to now have three coffees that are inside of my list all by setting that presentation mode which is pretty cool all right well what about when i tap on one of these items i want to actually navigate to it let's take a look at that code okay so when we go into the my coffee view model there's a selected all right and the my coffee here we would think that i could just do something like this and say my coffee details page go to the route the problem is how does that page know about the coffee that i selected well you need to pass it some information if you think about how mvc routing works you usually pass it an id so it could be something like you know coffee slash one coffee slash two we can do the same thing here and pass in properties to it so i'm in my my coffee page here and what i've done is i've set up a string so in all the properties that you pass the query properties are called are strings and i just create a simple one that's a get in a set you can also you know parse different properties and get really complex if you pass a json you could deserialize it and a bunch of stuff but here i just have a coffee id and what i do is on appearing i parse that coffee information so i say hey that's going to be an integer that i'm passing in go to my coffee service and query for a coffee so we can see here it goes in queries my coffee database and it gets the id and hopefully it's not no or else it will be here so that's pretty cool and there's also going to be a button on this page that'll say done so these are very very simple view models and pages nothing really crazy going on here so like we'll do earlier we're going to go ahead and say wait of course shell.current.go2async dot dot just make sure we can close properly but how do we pass it this you know id how do we get in there well it's actually quite simple on our class we're going to say query property all right if we zoom in here we have query string name and query id so the name is a mapping to the property name and then the query id is going to be what do you want to make it in the query that will be parsed out so the long url so here what i like to do is do name ofs because it's consistent and i can say name of coffee id name of coffee id and i know that this will be the coffee id passed in and it will map to this coffee id this is this is kind of amazing so i'll show you this okay so we have this we have this we're going to go so if i go back into my my coffee view model now all we need to do is come in to the selected and say question mark okay we added a question mark here and say coffee id equals and then coffee dot id and that'll to string it now you can additionally use something after this like an and that would be additional property so you could say coffee id name you could pass a bunch of different elements in there this instance i like to just pass it the id query my database which is super fast and then return it so cache it there so i want to pass an entire you know object around do a bunch of deserialization but this is how i pass it in automatically all right and then we can pass this back so let's go ahead and spin this up now so we're going to the my coffee details page giving in the id and then we'll go ahead and return this to us and that is all because of this really awesome query property right up top all right let's give this a go over here so we're loading up we got hot reload starting up let's go into the coffee page now again we're going to load our coffees from our database so we have everything right here i'm going to tap on one and what we'll see is that we have our coffee id which is set to one right here which is kind of spectacular okay and then now when i come up and i simply step over into our page there we go we actually went already into it too fast because i stepped over there we go we have our coffee page right here and then i can hit done goes back click on the next one we can see here we have our result which is two which is our id that we passed in now we get fancy coffee coming into our application so we're able to pass parameters easily and of course i can make this modal as well so i just have a done button then it goes away and dot dots back and forth so you get decide if you want to come in have the back button in it or go forward there too so now we have this entire page navigation coming in into our application easily right now you might be saying well james you know this is fascinating because you're you're deserializing that object setting it as a binding context but how would you pass this to the view model right because you might be creating your view model inside of your ui or in your constructor it's a great question so let's take a look over here let's say that you are creating your viewmodel here how would you pass a property or a query property to this view model what's really cool is that you can assign a query property to the page or to the binding context xamarin form shell is smart enough to try to detect first is there something on the page that can be set and if not then take a look at the binding content and set the property there so let's say we wanted to populate the name by default okay let's go into the add my coffee view model and let's just go ahead and do that on to my view model i'm going to say query property name of and here i'll just say name and again name of name there we go and i'll stop debugging here so we actually add that in there so that's our property now back on my coffee view model if i was to example to say name equals moths and pass that in we're going to see that at this point in time it will then go ahead and automatically set that property trigger two xamarin forms that the ui has a change because the property changed and update it on our page when we hit add so let's go ahead and get this page up here we go then we can also now go on my coffee i'm going to hit add and just like that there's moths being passed in all the way up to my view model on the page which is pretty awesome all right well there you have it that is how you get started using xamarin forms shell navigation popping and pushing and doing all sorts of navigation with url query property navigation which is super fun and deep linking and popping i really like this i think it's kind of the future of how i architect my applications with shell and what i really like about it on top of all this and i'll put details to blog posts below some of the deeper dives that i've done is that you can use this to do deep linking into your application to create a full back stack i use this an island tracker my animal crossing application that enables people to send friend codes via a deep link url it opens the app navigates to a specific tab and then adds another page and sets the friend code request property automatically which is really neat so i've really taken this to heart and really really got committed into using this url based navigation with my applications i hope that you're really enjoying these xamarin 101 videos i've been loving the comments that have been coming in i try to answer as many as i can not all of them but i try to and i thank everyone else for just kind of got some almost community mods in a way helping out answer some questions too i really appreciate that i'd love to know what other topics you want to hear about i've got a lot of suggestions so don't worry i do have them on my backlog been thinking about them but i want to continue to build out this 101 series so when uh when you're ready to start building your application or if you're building along with me you have all the building blocks that you need to build awesome applications in c sharp like always i'd super appreciate if you liked this video if you liked it of course that goes into the google algorithm of youtube goodness to recommend this video to others i'm pretty sure it does at least or that's what i've read on the internet and of course don't forget to subscribe and hit that notification bell so you get notified every single time i put out a new episode super appreciate that and of course i do stream usually on fridays we'll see how accurate it is but over at twitch.tv slash james montemagno anyways i really appreciate your time and for following along with these awesome 101 videos that at least i think are awesome and a few of you do too anyways thanks for watching and have a [Music] good [Music] you

Channel: James Montemagno

Views: 16,254

Keywords: xamarin.forms, navigation, push page, url navigation, uri navigation, nav, xamarinforms, xamarin forms, xamarin, ios, android, uwp

Id: 8iYpLMKE_ws

Length: 20min 13sec (1213 seconds)

Published: Thu Apr 08 2021