Navigation with .NET MAUI Shell - .NET MAUI Tutorial Step-by-Step

in this next part of the dotnet maui crash course we are going to learn all about navigation so how to go from one page to another page and also how are we going to get that complex monkey object into that other page and show all the details there [Music] as you might have already noticed in the previous videos is that we're using shell now if you've been working with xamarin forms before then you might already know about shell and it has all the concepts that you know and love from there but you know the built-in dependency injection is now a thing of course but other than that you should be able to use everything that you already know and love if you're not familiar with xamarin forms shell is like your opinionated way on how to set up an app so it helps you very much with arranging your visual hierarchy it's very easy to put things in a flyout menu so your hamburger menu or in the tab bar whether it's on the bottom or in the top so it can help you with all these kinds of things and it can really help you especially if you're building your first kind of apps but if you want to do all kinds of advanced stuff that is totally possible as well um you know or there's the other way around where you just rip out all the shell stuff and you start with a completely blank page that's still a possibility as well but i'm focusing on kind of like the beginner developer here who hasn't worked with xamarin forms and dotnet maui a lot yet so um we're going to focus on shell and in shell you have kind of like the url type navigation so um all the navigation happens through kind of like a url you will have to register your pages as being a url and then from there you can easily say hey go to this page or go to one page up we'll see all that in in the video in a little bit here but you know you have kind of like two types you can whenever you use the url type you can go with like the parameters so the query parameters which can hold like very basic types like strings or integers or that kind of stuff and you can just pass along an id so imagine our monkey finder app and you would just pass in the the id of the monkey so you would go to monkey details question mark id is one um and it would go to the page and it would paste in that one basically you provided that and we would go out to the database and grab the monkey that has the id of one right that is one possible route but if you have already have all the monkey objects like in your main page like we have in our application basically we've set that up in the previous video then you have all the details already in json so why would you go out to the database grab the whole details again that will just be a waste of time and compute cycles right so you don't want to do that so what you can also do is provide the whole complex object so this whole monkey object we can just provide that through a url kind of navigation in shell and we can catch that complex object in our view model on the other side in our details and then we can show that in a page so that's exactly what we're going to implement on this video all right so let's go over to our screen here and let's go crunching some code just to be absolutely clear the episode numbers for this course and the part numbers of the workshop do not really align so just to be perfectly clear you want to go to part three navigation right here you want to open that up and open that solution in visual studio so i've already done that you can see it right here and this is the exact state where we left off for like the previous part right so but now like i already mentioned with the flick of a button you can just say hey i want to run this code but now on my android emulator right on my pixel the emulator that we've set up in an earlier video so whenever i do that we have the exact same code base i didn't change a thing and we are suddenly running an android app on the android emulator now how cool is that this is the power of done at maui at work and you can see the exact same code this is what we implemented in the previous part get monkeys and we will get a list of the monkeys we're fetching that from a remote url deserializing the json and here we are now what we're going to implement now is that we're going to tap on one of these monkeys and we're going to view the actual details in the details page that we've you know seen here in our directories at least in our solution that it's there but we need to fill in the blanks right so that's exactly what we're going to do now before we get to it i thought of a a little hint a little thing that i should have maybe mentioned for the setting up the android emulator thing if you're going to attach a physical device you totally can so just get your android phone out connect a physical device but what you need to do it will give you some nice options is um go over to the menu here and you want to go to the settings app and it kind of like defers on like which flavor of android you're running but you can go all the way down you can go to the about so the about all the android things again you scroll all the way down and you have this build number here and if you tap this a good number of times it says now no need you're already a developer but it will start a countdown from five and it will enable developer mode and if you go back here then you will see i think somewhere here in system advanced and you will have these developer options and these has all kinds of options to stay awake whenever it's connecting to usb so that you don't have to wake it up all the time and you can do a lot a lot of options here um but also this is needed whenever you want to attach your physical device else it won't pick up in the run menu there so this is something that you need to do just a quick tip i thought of while recording this video so make sure to do that for the emulator it's not strictly necessary but it can still provide you with a couple of nice options that you might want to have and now let's get into that implementing of the navigation now the first thing we want to do is here this is our main page so in the previous video we've implemented like this whole layout this whole ui that you want to have and here we're in the data template right so this is the representation of one monkey so that's that little image on the left and then like the name i think on the right side right so we want to have this and here we have a grid and a frame and in this frame we're going to add something that is called a gesture recognizer so here frame dot gesture recognizers we can just do that and inside of this you have a couple actually you have what do we have gesture recognizers we have a click a drag and drop a pinch a swipe so you can detect all these kinds of gestures here but we want to have the tab gesture recognizer so we will set up that one you can actually do multiple so you can do you know depending on what the user is doing you can trigger different things and what i'm going to do actually here is implement the tab so i'm going to do this with an event so technically you know if you've been watching the previous video about mvvm you can try to do this in a command as well but i'm going to go for the tab right now and this will just generate a new event in our code behind so let's go over to that and here you can see this is just a regular tapped event right so event arcs all the things as if you would do a click on a button or maybe some other thing that you've been used to from another.net project now don't be frightened i'm going to copy in a little bit of code again here um so here we are and let's have a look at what this does so i'm going to leave the red squigglies i'll fix that in a minute um so actually what we're going to see here is we're going to retrieve the actual monkey object from a visual element that's like the the highest in the our hierarchy of don at maui elements it's a visual element and everything inherits from that so we're just going to treat this as a visual element the sender because that's going to be like the center is going to be our frame right that's probably going to be our visual element in this case and then we're going to get the binding context now that's kind of interesting the binding context is set to well in this case the view model right but that's for the whole page and if you remember from the previous video um the data the binding context for just one item is going to be the monkey right so for this item template it's going to be that one monkey and if you set like the binding context which will happen automatically within a collection view for this this item template then the binding context will be the same for this grid this frame this grid this image all the descending children will be of the same binding context here so that's why we can just reach out and get that binding context we're going to cast that or try cast that as a monkey if it's no we're going to return so that's not you know you maybe want to inform the user although this never should really happen and then we're going to do the actual navigation so we're going to do a wait and we're going to call on shell dot current so that's kind of like the in the the current instance of our shell object and we're going to say go to async and this is interesting here we're going to specify like the url so the page that we want to go to in this case the details page uh we have a true which will actually animate a little bit while we're doing the navigation you can set it to false and it will just poop go to that new page and here we can specify like the values that we want to put in here and you can do a full dictionary and it will automatically serialize and deserialize the thing for you so here we can just say new dictionary string and object and we're going to say this key so the key is going to be the monkey and we're going to put in the monkey actual object so this will deserialize all the properties we'll actually serialize all the properties of that monkey make sure that it gets transported over to our details page and we can catch it on the side of the details page now this is going to be awaited so we are going to have to make this async and now everything is happy and this should trigger it but we are not quite ready yet because we have a few other things to do let's go over to our solution explorer and i'm going to go to the view models right now and here we have the monkey details view model we've seen that before but it's completely empty right now so what we want to do here is make this also a public partial and we need to make it a partial because we're going to use the community toolkit mvvm right and that needs the partial class to do all kinds of source generation as we already know so we're going to do that and we're going to add a new constructor which is technically not really necessary i think because we're not really going to do anything here for now but you know it's good to have and we're going to then create a observable property you still knew that right we need to do an observable property which is going to be monkey of the type monkey and we're just going to call that monkey there we are save it and boom we have our observable property that we can use for the data binding as we've seen in the previous video now one thing that we need to add is a way to actually map our incoming monkey object to this monkey property now so what we can do for that is we have this attribute and we can put that on top of the class query property which is built into done and maui especially for shell and this needs a couple of parameters right so first we need to tell it that it needs to map it to um the monkey property um so we just need a string to say like hey we're going to map this to well the monkey property which is kind of like you know it's it's not really here because it's going to be generated but the intellisense already knows it's here so we're going to map whatever is coming into the monkey property here and we're going to get that from the actual monkey key right so this is the key in our dictionary that we specified here so we specify this this monkey right here and that's coming in here and it's going to map it to the property of name of monkey now this is all strings and you know it's monkey and monkey so this is maybe not the greatest naming but i'm sure you can kind of like figure it out and then do it with a couple of different names you can also avoid the magic strings here but also doing things like name of monkey and that kind of things but you know this is just to make it a little bit clearer that this is the actual key in in the dictionary here now this is actually all we need to get the monkey over to our details view model so it will automatically for you be serialized be deserialized and we have it here in our view model so now kind of like the last two things that we need to do is actually implement the ui to actually show something of these details and register the route for this because we need to register like where do we find these monkey details so let's go into that at first we're going to go to our solution explorer again and now i'm going to go to the views and i'm going to go to the details page and you can see here there is completely nothing yet so let's actually get something here from the main page.example because i hate typing so let's get this view model again and we're going to get this data type and actually let's get this title in here as well we need these three things to make it show up nicely and i'm just going to paste it in here so a little repeat exercise here the xml namespace is a shorthand for this whole namespace right here so this is monkeyfinder.viewmodel so if we look here we have this namespace monkeyfinder.viewmodel right so that's why this is there and then we can use this viewmodel in our example instead of having to type this whole thing all the time now this x data type is especially so that the intellisense will know about what the type that we're going to use here so our monkey's view model although in this case it has to be the monkey details view model right so let's change that so we have the right one and our title we're actually going to set now to um our monkey dot name so that we get the name in in the title right for our uh little application and you can see it already did it with the intellisense so that is great now i'm going to again bring in some code here so um let me get in a little snippet of code and we're going to build that out together so here you can see a scroll view and that is a element that is you know make sure that whenever something goes over to like your viewport you can automatically scroll it if you do not you know if it all fits in the screen because we have all kinds of screen sizes it will just stay put but if it goes over then you can automatically scroll through that so that's what the scroll view does now we have the vertical stack layout so that will align things like vertically it will stack everything all the children in here it will stack that vertically automatically for you and then we have this grid with three columns which is like equal here the auto is a middle and then equal there so that's kind of like how it layouts and we have two rows one of 160 and one of auto which will probably fill up the rest of the stuff here and here we still need to do the background and image of the monkey and here we need to do the details of the monkey so let's focus on the first part and we're going to bring in again a little bit of code here that you can all find in the repository readme um so let's bring this in and there is something funky going on with my formatting here so forgive me while i try to format this for you we have this image we have this frame and we have a box view so let's see how that all kind of fits together and this box view you can see it does a grid dot column span 3 so that goes over the whole length of our screen it will has this yellow background and it will have the full 160 because we had this row of 160 height right so we have this nice little background of our primary color we'll get the styling later don't worry um then we have a frame and this will be in our rose pan number two so that will span two rows uh two rows so like this and that will have a a column of it will live in the first column and then we have a little bit of a margin so the column is is the middle one right this is this is the one so you will see in a little bit visually how this all comes together it's a little bit cryptic right now it will have a width request of a height request so it will be a square one um and do some other things and this is kind of like the interesting thing is clipped to bounds and corner radius so if you know a little bit about how this works this will be a circle and it will be clipped so that the the corners will be clipped off um so what we're probably going to see because this frame isn't closed right we can see the box view itself closing here but the frame is not and inside of that we have this image so inside this frame which is going to be clipped we'll have this image so probably we're going to see a rounded image of our monkey which is going to be pretty amazing now for the image the height request again we're going to set this to the center and we're going to set this to the source of our binding monkey dot image so it already knows about our monkey property in the view model and it knows that it has an image and we can just get the source from there so an image is just you know you can load images from urls from local images if that's what you want from basically all kinds of things that is what that does so now we have all of this let's also add something for our details so this is this is living inside of our grid and the grid is needed to make that fancy layout right like i said we'll see that in a little bit um we kind of like have overlapping visual elements here to make it look nice this is definitely something that you need to get you you know in your fingers that's a dutch expression maybe i don't know you have a little bit of practice with this to get all the layouting right and do the fancy stuff i'm not the best designer so i'm happy this workshop was created by james um but you know it will look nice and fancy and it will take a little bit of practice to get it that way now for the details we have this right here so let's bring in a little bit for that as well and this is just going to be like the extra details for the rest of our monkey and this is again a vertical stack layout so it will do all the things underneath each other we have a little bit of panning a little bit of spacing and we have a couple of labels here with again some styling which is going to come later and we're going to bind all the text here to the details to the location and to the population now there is something specific going on with these bindings if you look at this one the population you can see that this that says binding but it also does comma and then you could say string format now this is really cool you can do inline string formatting and there's a couple of other options that you can do with bindings but string formatting is one of them and you can just say hey i want to have this single quote because you know for the text we already do double quotes so you want to have the single quotes here and you can say population colon space and this will just be a a static string this will be like literally what's going to appear on screen and then whenever you do this this brackets here and a0 you can have this monkey population is in there so we can now say population um semicolon and we will have the population here the number instead of you know having to have two labels one with population making sure they align properly you can just do this with the string format so that is pretty great now i think our ui is pretty much set up as well so that's neat um kind of like the last thing we need to do now is set up our route so that we can actually get to this page right right now if i would run this you would get a runtime exception because it doesn't know where to go whenever we call here to the go to async it doesn't know how to use how to find the details page so let's set up that now to do that we're going to need to go to the solution explorer again and we're going to have to go to the app shell example.cs in fact you can do it everywhere basically you know as long as it's like early in your app lifecycle but i think it makes most sense to do it here in the app shell that's where the thing is going to be created so here let's just do routing which is also a shelfing routing dot register route and we can say name of details page and we need to do that also for type of details page so what we're doing here we're registering this through the same name and the same type but you can totally have a different name and a different type if that's what you want if you want to call this monkey details page and you want to navigate to monkey's diesel page like that but you still want to go to a type of details page totally up to you if that's what you want if you want to use a different naming scheme here but you know i think it kind of makes sense to use the same name and the same type for things um and then also you get rid of like magic strings and you can just use name of and and those kinds of things so um you know this just works but it's up to you if you want to actually follow this kind of like pattern for this and another thing that we need to set up is our dependency injection because what we have now is we're going through our main page we're going to our shell current go to async we're going to set our dictionary monkey which is all fine it's then going to go to our monkey view model is going to populate this thing right here it's going to know about that but what we still don't have is here in our details i need to go back to my view details page and then the code behind and i need to here specify the monkey details view model view model and we need to set that up to our binding context right because else if we don't do that we're not going to see anything so let's set this and we want to do it through dependency injection so that it all lines up so now i have the construction constructor injection set up it will catch our view model it will assign that to the binding context now i need to go to my solution explorer again go to my maui program where all the registration lives for our other services and view models right and i need to add these transients ones so add transient which is going to be our monkey i don't know monkey details view model and our details page and again we want to do this at transient because so that you get a new instance of these pages every time now actually let's just run this thing on android i'm going to run this thing on android again and we should see now the same screen that we've seen before with our list of monkeys but now we should be able to tap on it and actually go to the details pages we've just set up to see the all the details of our monkeys that we have entered here so let's get the monkeys this should still work we didn't change anything in this regard so here we are and let's take one i don't know let's take henry from phoenix and if we click that we get to our details page where you know here you see the the kind of like complex layout with the the bar here behind and this rounded image that i've been talking about and kind of like overlaps with the top bar and like the the bottom one where you have all the rest of the details and here we have the title that we set to monkey.name if you remember correctly so here we have a full-blown details page for our monkey how amazing is that so we just implemented all of this be proud that you made this work and you know we can stop this and we can still run this on our windows machine and just click boom windows we're going to have to wait for this to build a little bit and then our windows app will come up which will have the exact same functionality okay here it is our app is coming up it's been built successfully let's see come on you can do it yes here we are and whenever we do get monkeys we see the little loading indicator we're going to get our actual monkeys let's do the capuchin monkey right now and you can see here that we have the same detail page but now running on windows as well i didn't change anything just flip to the windows target and boom we have the same thing running on windows all right be proud of yourself you've done well you've implemented navigation you've learned about a great deal of layout stuff for down at bowie as well how to create fancy layouts well a little bit fancy layouts this is only just the beginning uh how to register roots in shell what shell exactly is you've learned a ton today so be proud of yourself go out buy ice cream and celebrate for a little bit but you know we're not stopping there we have for the next video on the agenda how to access platform features so we're actually going to use the location sensor so the gps or however the device determines what your location is and it's going to find the closest monkey because if you remember correctly for all the monkeys we have a location with gps coordinates and we're going to find the one that is closest to us so make sure to stay tuned for the rest of the course in fact let me help you with that right now here is the next video in this course that you might want to check out and here is the playlist for the full course and of course make sure that you're subscribed with this button right here see you on the other side [Music]

Channel: Gerald Versluis

Views: 20,567

Keywords: .net maui, dotnet maui, .net 6, .net 6 maui, dotnet maui tutorial, .net 6 xamarin, dotnet maui getting started, .NET MAUI crash course, .NET MAUI workshop, dotnet maui workshop, dotnet maui full course, .net maui full course, learn .net maui, learn dotnet maui, net maui, crash course, .net maui tutorial, c# maui, what is .net maui, VS2022, .NET MAUI MVVM, dotnet maui shell, .net maui shell, dotnet maui navigation, .net maui navigation, .net maui pass object, Shell

Id: pBh5SXVSwXw

Length: 24min 40sec (1480 seconds)

Published: Wed May 18 2022