Learn Live - Create multi-page .NET MAUI apps with tab and flyout navigation

[Music] thank you whoa we're here welcome back everybody I showed up you didn't think I was gonna show up did you I I was not worried Monique was a little bit worried but I wasn't worried I knew you're gonna make it James where did James go oh my goodness I was okay so I love helping people with any problem in the entire world and we have we have on Monday this upcoming Monday the dot net comp Student Zone okay this is a really cool event for anyone just learning.net if you're here on learn live this is like a great opportunity maybe you have a friend maybe a someone else and the student zone.netconf.net we'll drop that in the chat somewhere we have a slide on it we'll talk about as well but on Monday it's a special Learning Zone so amazing team members across all of Microsoft it's a five hour or so stream they're gonna do it twice in the morning in the afternoon for around the world but basically you're going to be building your.net portfolio from start to finish and you're building these uh water consumption apps and and uh and Somalia as he was working on on this app and and KDP he's like is it like we keep getting this like like error like 504 like method doesn't exist or something uh on this API and I was like well let me look at the API and I was like yeah the API doesn't exist so I'm sorry I was like there's no there's no post there's only a get I was like call up Chris so it's cool it's cool to see the Pieces come together uh on it uh it's just really fun so hopefully they figure that out but I was popping back and forth but we're here we're here to learn live here about that Maui yes we are yeah next week we're talking about API so timely yeah yeah very very much so a lot of times so that's exactly it when you have a gift you don't have a post you need a third pair of eyes to take a peek at it and tell you what you're what you're doing you truly do you truly do and welcome back everyone if you've been joining us on this on this journey of learning how to build multi-platform applications with.net Maui for iOS Android Mac and windows we've been on a long journey uh last week we covered uh what do we cover uh theming and styling and dynamic resources yep making everything kind of work a little bit better with all making making your app look better but putting everything in one spot so it can look better in one so you don't have to repeat yourself in your code so you make sure your buttons all have that nice Alice blue color and you can just put it pop it in one spot styling we did a lot of styling did a lot of styling and uh this week is actually probably my favorite topic of all time because you know when I when I got hired at xamarin over at over nine years ago um I looked at it I think we're coming up on the yeah 10-year uh soon uh for me I did a talk so when I when I applied um and I did my interview process at xamarin I got on a on a on the team and whatever call I think I don't know what program we use we use something Skype probably Skype for business and Link and and and I got on I got onto it I had to do a presentation and I actually did a presentation on navigation for Android like it's been at my heart and soul of navigation and I just think and then it evolved uh 2014 or 2016 I did a talk on navigation as well so navigation in general to me is always the heart and soul of sort of what I love and I think this week is really cool because there's a lot of new navigation options in Maui that I'm really excited about yep it's how you display the date yeah so how about we get right to it Jay and start talking about all the navigation and how do we actually display the pages with shell shell that's right and we're talking about shell specifically because it's the default right and and when you do file new boom you're totally good to go why is there a buy what are you using what is it what's that buy button I know this is great I was gonna I was gonna mention this before so I upgraded my Mac to Monterey is that the latest and greatest Venture and Ventura Ventura yeah either way things kind of went downhill so I spun up a virtual machine parallel's virtual machine I just got it I had to download the trial version to get everything up and running now it's not that I'm too cheap to get the serial number I have it but I have everything running and I was too afraid to enter hit that buy button and enter the serial number for it because everything's working right now I'll do it after this but it's like it's working I'm not touching it we're gonna do it but we can see the buy button if you want to contribute to the show I'll hit the buy button and we can do it but maybe at the very end I'll enter the serial number and we can see it all work oh my goodness I love it I love it uh that's so good something went wrong when I when I uh upgraded the Mac os's I'm not sure what happened but we'll fix it eventually I like it um yeah and hi to everyone in the chat we got John Galloway over in the chat we were just in a meeting every meeting all the time non-stop so it's good to see him he's going to be moderating giving out the different uh links as well um just like oh he's talking to Cato right now talking about Blazer hybrid integrating some Blazer web using your dynami application we're going to do a learn module on that at some point in the future here and we'll kick off probably around two of this thing for advanced.net Maui goodness I want to be the plan at some point so definitely check that out thanks John for being here we love you so so much John the most I would say literally the most probably I haven't seen him I haven't seen him we're just talking yesterday I haven't seen him in person since I think 2019 at twitchcon wow um yeah it's been a while I know and then yeah there oh there he is I mean I mean I've literally I've seen him I have a one-on-one with him every single week so yeah yeah I saw John a couple weeks ago in San Diego for a conference so what he looks just like his photo here he does he doesn't age I don't know I don't know how it happens hey John how you doing we love you we love you all right uh let's talk about.net.com happening November 8th through 10th that is next week and I do know you listen you know Matt and I will be here on the 9th because we didn't plan this correctly so we'll we'll be not only doing stuff at dot net conf you and I have sessions on the 8th I'm actually talking about Blazer hybrid did you know that I'm literally my talker yeah no I'm gonna and half of them and one third of our presentation is on navigation can you believe it that's crazy I gotta write that demo today um and you have one on Azure and I've been helping with the keynote I'm so excited it's going to be so amazing it's live is interactive my session we're okay check this out we're not only just talking about Blazer hybrid but Elon and I Elan and I Elon what Elon Elon um Lipton who works on Blazer hybrid him and I are doing a talk that's going to be hybrid I'm gonna be remote he's gonna be on stage and we're talking about hybrid it's the most hybrid that's medicine ever it's super meta yeah and it's free is you could just go to the website it's completely free you're totally good to go and um there's a student a pre-con ahead of time so if you're looking to get started as a student you're in college or in high school you're a career switcher anything like that you gotta check it out.net youtube.netcomp.net check out the schedule amazing stuff from Microsoft from the community it's a community uh run event you know with with Microsoft uh and it's really cool so go check it out and look at the dot netbots 3D he's he's playing with the direct I know I I was looking at that the other day and we have a different slide title slide for the actual slides for the for the show and yeah.net buff is kind of getting near The Uncanny Valley that's true it's crazy yeah oh I also heard this just like five seconds ago they're going to be releasing a vs code pet of dot netbot little.net bot can walk around your vs code while you're you're typing which I think is so cool did that happen that's coming up it's coming out I think today they're gonna drop it so check out dev2 forward slash.net um John's gonna do a tick tock on it we got a new tick tock tick tock.com forward slash at dot net yeah I just all the things yeah I'm glad that happened I heard it was coming I'm glad it happened maybe the words gotta check it out you gotta check it out now we have.net you could have like a cat before or a dog but now you can have.net bot dot netbot bam oh yeah net developers that's right someone took.net so we were late on the dot on The Tick Tock train uh classic all right so what are we going to talk about today we've been talking about it but we're going to talk about more fly out and tab navigations with.net Maui specifically with shell and so go ahead follow along with us if you want to or otherwise just listen to us talk about it because we're going to give you a whole lot of extra goodness when we talk about it our experiences with it our well what we think of it too so you're going to get the learn module plus the whole James and Matt experience along with it as we go through this oh yeah take it afterwards go ahead and take it afterwards or follow along with us as you go too yeah so there's a URL for it all right so what are we going to learn today specifically we're going to go through and we are going to implement tab navigation with.net Maui show now I'm going to just call it shell most of the time I'm not going to say net Maui shell or you can say shell4.net Maui apps but I'm just going to say shell we'll just leave it at that we're going to do some tab navigation with it but we're also going to navigate between Pages within tabbed Pages wow yeah so a lot of these times when we're talking about navigation we have a lot of words to describe things that actually are conceptually simple so we're going to open up a tab page and we're going to go to different pages in that same page see it's just I don't know it's hard a lot of words there we're also gonna do some flyout navigation too like a little hamburger menu and a whole page flies out like an extra Sub menu flies out for you we're going to show you how to do all of those and we're going to actually show you how to do them in reverse because we're going to take the bottom one first and then do the tabs afterwards how's that sound James for some learning objectives I love it all right I love it cool so let's let's jump into it so when you're planning an application one of the things you want to plan out is how the user is going to get between the different pages of your app so take this take this app for instance it's beautiful isn't it it's just it's a demo app you can tell that for sure by how solid it looks but anyways it shows our it shows the moon phases of various of the Moon not various moons of the various phases and let me let me really quick do you know what do you know what tonight's oh my did you do this today oh it is November 2nd look at that I was gonna say do you know what tonight is because I have a flow automation power automate setup that does the weather for all my team and it also does the moon phase and it is a waxing gibbous tonight and that's what it is there's an emoji for every single one and that's what that's what this demo app is oh my goodness amazing yep waxing gibia so waxing means it's coming into full right so we'll have full moon in a couple days all right beautiful so what are you talking about we're planning the architecture system yeah we're planning out the uh overall holiday all the users are going to get around our app so how do we navigate between those pages you know what James this app is a full-on astronomical beauty of an app it tells us when the sunrise at Sunset will be well and how do we get there how do we get there I have no idea I have no idea it's a mystery yep and we're gonna have an about page too because we grab this data we just don't know it we grab it from a web service we should give that web server some credit somewhere we should put it in an about page we should have that too you know so we have to come up with a nice weights that our users can go about getting information seeing the various pages on our app in a nice way so that's what that's probably the very first thing other than figuring out what your app's going to do is figuring out how somebody's going to move across it or move around in it so I agree what I usually like to do is I like to look at all the different apps that are out there get a feel for like what you know all the different things are doing what kind of represents maybe something similar to my app or maybe go on dribble or something like that and get some inspiration uh out there and then especially if I know the pages if I don't have a designer right usually a designer will tell us but there are some standardizations uh I think in navigation or at least the what you put in the Shell of your application and that's what shell helps you kind of do which is kind of cool so yeah it's gone yeah shell makes it really nice so let's talk about the flyout navigation what is flyout navigation and I like to think of final navigation as like the menu or the hamburger menu right you click on it and things well fly out from this side and that's exactly it it's a navigation where window of menus flies out from this side and it provides like really a quick means to switch context within your application so it's like it's like a shortcut menu I guess it's the best best way to think about it and there's a couple different parts to it there's a header there's a flyout items there's the menu items and there's also a footer that can be all a part of this and I think the next screen here is going to show us we don't have where is it James we lost our image that was going to be on here almost oh my goodness goodness where did it go well you know what let's see what it looks like this looks like a fly out yeah it looks like a fly but I want to show right here oh there it is yeah so you got the header you got the fly out items and you got the menu items and you got the footer perfect so that's that's generally how we're going to build it up or that's not generally how it gets built up that's how it gets built up that's how it's happening yeah so when we build it we use flyout items that's a class name within the Maui shell to build up the things that actually go between the pages so when you click on a flyout item it brings you different places so it's part of the app shell development Paradigm and the navigation occurs when you tap on that fly out item itself and this is what it looks like so it is it's it's it's xaml so it can be verbose so let's ignore the shell part of it up top other than knowing that it has to go into a shell but when I have the fly out item that means it's going to come out from the side and here it's going to be cats or dogs it's going to say and what's inside that flyout item is what's going to actually be displayed after you tap on it so it's all kind of hierarchical in a in a way yep easy peasy so here is what it kind of looks like again you got the cats you got the dogs and behind the scenes there I have app that's the background app let's say it's running you click click on it flies out and then you see it perfect easy all right and then this looks like the same slide from before yeah it's a little bit different it's a little bit different yeah go ahead James yeah because you know how basically what we said earlier if you were reading some of our attending some of our earlier learn live sessions a lot of times what Don Maui will do is there's some sort of default um defaults for pages right so often like a Content page will have content well inherently if you just put content in there it knows that it's content so you don't need to reference that so what we saw earlier is that you can put these fly out items and shell content and tabs inside them so you can have the more verbose especially if you're having a fly out item that has a few tabs or other Pages inside of it we'll get to that and we talk about tabs but specifically here if you just want a bunch of flyouts and a bunch of pages you can just add pieces of shell content into here and you can see that this has the title icon and also the data template so the pages are lazily loaded as well which is cool so those two references before the same thing so you can do the verbose version which is nice because if you do have tabs with multiple tabs inside of them on one of the pages for cats maybe you have types of cats for example you could do that as well but if you just want a simple fly out this is how you would do it easily enough yeah cool I actually prefer the the verbose version because then I know what I'm getting all the time of course you do that's that's me that's me I like to know what I'm getting all right so then we have in addition to the fly out items we have menu items that go with along with it and there's a subtle difference here right and so the menu items they're not required but they are optional and they're represented by a menu item object you got to distinguish them somehow and these These are they're similar to buttons they don't actually lead to navigation rather they lead to something happening so it's not you're going anywhere you're gonna it does something here like like a setting button or an about button or something like that at the bottom or a login logout button that's what I initially think yeah log sign in sign out it does something it's not a page it's just a button yeah yeah and so and actually what's cool about it where they appear in the menu is kind of dependent upon how you declare them I always find I've thrown at the bottom it just seems more natural there but yeah so honestly to be 100 honestly through James I'm not sure if I ever used a menu item button I'm trying to think of a time I know I did but I'm trying to think of a time of what it was for because I like the fly out fly out just to be for navigation but yeah you'll use it maybe what else we'll think of a way we'll think of a way yeah where there's a will there's a way yep and so here we go menu item wow simple looks a lot the same as it did before when we're doing flyout except here we have The Binding to the command and so that help command is actually going to do something and here looks like it's probably going to show some help nice for net Maui fundamentals of the show all right then we get to the header and the footer so really just to make things look pretty again does it need to be there but it really it helps things out and here's what it looks like again kind of exactly what you would expect shell that fly out header and you could put really whatever you want in there you could also do the lazy loading by doing the um the uh content templates if you wanted to or you can just Define everything straight inside and then same thing with the footer it barely looks like it even changed but header footer battery yeah yeah so it's pretty pretty straightforward to do and you can do more than just an image source Center as well like we have a grid in here right now you can put text or really you could build up a whole View view if you wanted to there's a lot of options like when you think of a flyout if you just add the fly out items and that's it it's going to look kind of plain in general but yeah once you start to add these menu items you add the headers and Footers in it and then you have this really you know background stuff you really can get pretty nicely designed you have icons for each of them as well so it can really really specify them um and in fact when you look at some of the the defaults and the templates you'll know start to notice that you can even handle like selection change events and you can change all sorts of things as well so there's all sorts of different um State Management that you can do to really to make your your things look really nice so yeah definitely looking at that yeah it's super super powerful mm-hmm so how will we do this how will we go through and Implement some flyout navigation this is how we'll do it and what's cool is that we're gonna do the flyout navigation we're going to add some icons and then we're going to do a flyout header cool all right taking a look here at some chat while you go over there and open that up um yeah so Xanax we're gonna talk about tabs here in a little bit so we'll come back to that yeah go ahead and zoom in a little bit there for me uh Matt um and then I think time Bender if you want to hop us into the chat later we're going to be talking on teams later so maybe a more in-depth chat there and I know John's talking a lot about Blazer hybrids that's good we're reading the chat as they come in and we'll try to answer them as they come in as well so and so where all the exercises are are in Microsoft docs mslearn.net create Maui multi-page apps but instead of remembering all that just go over to the exercise and click on exercise repo short and sweet short and sweet and then we'll load up and we'll start following through with these with these um instructions and so I have already gone up ahead and loaded up exercise number one perfect and we have here just a simple.net Maui application with our about page moon phase Sunrise page and we have app and we have a beautiful app shell page oh that's what you're showing earlier right that's yeah it just shows the moon phase yeah all right so the first thing that we want to do that's what it would look like on Android is that we want to come through and we want to actually well let's do let's set up a title for it and then we'll move on so what we can do is do something like this I don't want to say Moon and I'm going to just jump ahead and we could do icon we could do something like that moon.png as well so yeah where's that where's that coming from your moon.png the Moon that PNG is going to come from the resources images so we have all those pre-loaded as well so the moon.png doesn't just exist in a file new application perfect we had to bring that along for the ride so pre-populated you get some royalty-free images of the moon a question mark and the sun if you wanted yeah perfect yeah that's cool good question though James yeah and this is kind of fascinating too so you have um you have the fly out menu item in here so in the example you could put it into the flyout item right like you said or here on the shell content you can just specify that information yep exactly all right so and we can also yep we can do the flyout icon here as well on the overall shell page that we wanted to so actually I'm going to pop that up there too now you can do that yeah oh interesting let's run oh so so by oh I see so flyout icon is instead of the hamburger yes whoa yeah oh weird I didn't even know you could do that I just learned something today boom totally worth it yeah totally worth it and so but what's interesting James is that does not render on Windows it renders on IOS and Android yeah but not Windows yeah probably not because the windows One is using sort of the newer stuff um from win ui3 so that kind of makes sense that's interesting yeah so let's let this build up and deploy yeah and then come on and here we go and we see our little application pop up and we see moon phase and we don't necessarily have do you need to put it in a flyout item fly out item yet that's what we have to do we have to put in a flyout item to actually make it fly out oh yeah you know why it didn't do it is because there's only one piece of content right ah see we just learned something Matt because you did not follow you didn't follow I got ahead of myself so here's what happened is this a good learning opportunity so whenever Matt makes a mistake which he does all the time well that's a great opportunity so the reason that we didn't see a fly out uh didn't fly a menu is because there's only one piece of fly out content like there's only one piece of shell content so there's nothing to fly out right like why would you just show it if there's only one piece of content now if we had multiple pieces of content it would go ahead and do it so what we're going to do is we're going to say hey Donna Maui please show a fly out item because we're telling you to do one now yes yep and so now we'll rerun it mm-hmm and when it builds up we will see it now hot reload for some reason is not working for me today on this I'm going to blame it on uh VM yeah yep and you can see it up here comes out and it says moon face nice all right so let's keep on going down and we added the moon ping but it doesn't show up on Windows because of the new win UI stuff but it would on on Android so it's kind of on Android and iOS it does yep all right so now we want to add in some more flyout options right so we're going to show our sunrise and our Sunset as well or a sunrise and our about page as well and put them in the fly out items and what we can do is just put them in there so yeah I think this is one of my favorite features of shell because previously [Music] if you were um if you were doing this then you would have to kind of start and stop I don't know sorry you would have to you'd have to have a flyout page which still does exist and then you have to have a list of items you know this stuff it's like quite a lot of work in general um ozonex says can use an icon for the flat icon yeah you can you can use like font awesome and things like that as well yeah so here we have it moon phase Sunrise whoa which is showing UTC time for me because that's how I am so that way the sun rises at night beautiful it sets in the morning and then about and then we can see icons are upon awesome and then when we uh actually get the where we get the data from that's cool you know the other thing you could do too by the way is um I don't know if we get into it but on your on your um shell so go to your shell and there's xaml so here you can do um I think it's like fly out let's see what the intellisense is fly out Behavior yeah fly out Behavior and then here you could say la do lock in there and I think what that will do is it will always show it open I'm pretty sure like side by side so for example if you were on desktop or if you were on um I think this works we're gonna we're gonna test it out in real time because why not there we go yeah so this is kind of nice so you can dynamically change that so you could dynamically change it based on the size of the window or other things like that um and you can lock it so you could have it like a master detail page here basically yeah um side by side and that's nice if you're creating like an iPad application or something like that and you're looking at the window size and you want it to be open to provide more contact so this gives you options in general if you shrink it down does it does it does it collapse automatically or as it is actually like locked I think yeah it's actually locked it's lock locked so you would want to dynamically change that based on some other things in general but um there's that yeah else the fly out is the default behavior and if you if you don't want fly out items at all you could disable it but yeah you just make fly out basically yeah just there yeah cool so yeah it actually yeah yeah I really like this for and we could check it with the on idiom stuff to see where you're running and then have it because I really do like it when you're at when you have the more screen room use it up yeah cool yeah and then also I think if you put the icon on the fly out item yeah if we put the icon up here in general yeah because now we put it inside of that thing yeah yeah so that should actually work anyways fun fact and actually I think we're about to do that as we get down here adding the icons and that's where it comes sun moon in question so let's have it actually let's add that yeah yeah icon equals son.png and then this next one's going to be question oh man let's see literally says how do you have a different animation for showing a display the fly out I think out of the box basically you just use the defaults in general um so that would be you know what it would be there um good question from um um someone else how do you get the in dark mode well by default it will automatically adjust as you can see Matt is in light theme here yeah um so it is by default in light theme now the background of this moon phase is is set to to a dark color so the other stuff that we talked about last week you can set the different colors and the theming automatically yeah right now it's defaulting to that so if you go to the sunrise page that was a uh it was going to be a a light theme right exactly yeah and so that like you said James the moon face page is just set the background colors just set the dark exactly so looks Dark theme but it it's not but yeah there's normal theming uh that you can have on it as well so the background you would just adjust the background colors and the text colors and things like that automatically but I think it does it for you automatically which is nice and yeah check out last week's show as we do go through that a little bit on how to do it so cool that was easy yeah and then of course let's set a header okay for it yeah why not and do we do the footer no we just do the header so just a header pop it in right here do a footer too okay this is the same thing just do the same thing what to say fly oh footer yeah like so you know yeah do something else on the bottom yeah let's just say how about this label Color Oops I'm a footer let's do white and let's do text I'm a footer like that that should work and close it off yeah I think for the hamburger icon the the flyout icon I don't think you can change it on Windows I think that's just the default but it's a good question enough to ask the team specifically like uh maybe that's something you've done at seven they're adding I know yeah they are doing a lot of desktop stuff in dot net 7. yeah but sometimes it's like based on the platform too right so for example like that title bar those icons it might just not be customizable by win UI three and if it's not then there's really nothing you can do about it but yeah I'll have to ask the team and see but they go oh Footers and headers boom look at that it's cool yep bam yeah super cool I like I like the dark slate color that's a nice nighttime moon setting color beautiful yeah yeah all right cool we made it we did it so that's really fly out so that's really it's kind of neat you know it you have that full functionalities a little bit of typing because you're dealing with xaml but other than that it's all pretty straightforward and I do really like the fact that you look at it and you know what you're getting yeah and then also you know like I said here we have the flyout items individually but we wouldn't necessarily have to have those we're just doing that here because we're going to be building out some more contacts and different pages as well so but just kind of kind of kind of cool yep yeah nice all righty I wouldn't even have any um any trivia on that one huh no no trivia we we saved that up for later to make it super duper hard oh perfect yeah no trivia for that one but we do have some after the tab navigation all right James so what is tab navigation first before we get it can we appreciate the image of the clock from IOS from like 15 years ago like iOS 3. I think for uh or uh now I can anyways yeah it's exactly the same there's one less icon now I don't have a bedtime one yeah I don't have bedtime well that's because it's in the health app now the app looks exactly the same they have not done everything yeah that's exactly the same amazing classic classic I love tabs yeah I liked has better than flyouts they're more you see them they're red in your face it depends on your app right because if you only have a few sections then you know tabs are going to be great because they're at the bottom or at the top and there are this but like to the question in the chat is like what if you have like a hundred sections of your app does you know how does that work well you can add 100 different sections in there and automatically scroll through all those for you automatically so if you have lots and lots of stuff then you should probably question yourself what why I'm what's happening in my app and why do I have so many so many sections but sometimes apps do you know there's definitely more complex apps like if I open up my like Security app or whatever there's a hamburger button and there's like a bunch of junk in there but then they also have tabs right they're like oh there's you can combine these things too I don't know if we actually go through that in this video okay cool and that's what that app does because they're like most of the stuff that's here and then here we'll hide the junk over here yeah yeah yeah and good question as well you can also add these dynamically on you can do it in code behind so you don't have to add them inside the xaml as well so you can add those and remove those or some sometimes people ask like well how do I enable or disable Things based on um specifically um maybe I'm in admin mode or in a normal user mode how do I add or hide different sections well you can make things visible or not visible or you can add them dynamically too based on that too yep cool yeah we've talked about tabs or in your face all the time it's kind of like when we put the flyout menu in to flyout mode where it's always sticking out there but yeah and uh so each yeah it's pretty straightforward each section is represented by a tab it's true a little icon on the bottom that's true yeah and you know that's going to be the the case specifically for IOS and Android but it is going to look different on desktop because desktop Tabs are a little bit different based on their platform so one thing about one thing to know about shell is it's sort of an opinionated way of building things so while we're showing tabs here as like a traditional tab for mobile it doesn't necessarily mean that that's exactly what it will do on on Mac or on Windows because inherently on those platforms they're going to look a little bit different and we'll see that when we run this application on Windows specifically and that's one of the great things about Maui is that it respects the paradigms of your native or the host operating system that you're running on so you're building your app once using a xaml or using your c-sharp code but when you run it it's a native app for the platform that you're running on and it's going to respect the design paradigms that that app has yeah and if and if you don't want that stuff you can always draw there's custom controls out there and know that there's like some really great Community packages for customizing tabs and flyouts and all this other stuff too but you know the Box default you get what the operating system gets you which I think you know when you look at that iOS application it's like yeah you know a lot of iOS applications are going to look and feel this way because that is how Apple wants their applications to look out of the box so right how I build applications is I try to make my applications adhere to the to the guidelines so when Apple updates stuff or Google updates stuff then you know it updates gracefully and users um you know want that as well exactly I like to think that the folks who put the operating systems together put a lot of time and thought into how they act and so I'm going to utilize their hard work to make my app build off of it yeah so all right so tab navigation within a Maui app so at the bottom you have the tabs use a tab bar object to hold everything and then click on it and it displays the content yeah at the top tab our object holds it a tab bar our tab within that tab bar moves things around yes makes sense like I said there's a lot of words here why not it makes sense when you when you see it a lot of words for a conceptually simple topic all right and here's how one would do it um looks a lot like the flyouts doesn't it you would have a except different different words tab bar within that you have tabs and within the tab you can put a shell content item for what you want to have displayed so here you just have this would display moons and sunrises across the bottom of the screen or the top depending on your operating system you have to be happen to be running on cool all right and then as he alluded to before James we can do tabs within a flyout menu yeah why not yep so flyout menu opens up one page of the tab bar that can display one or more tabs and maybe this is a way that if you had a million different things to do many different million different things to display you can kind of organize them that way you can have a flyout menu and then you can have a page with a ton of tabs and different fly out menu so but anyways file menu add multiple shell content items for each tab you want to have displayed and then within that so here kind of shows how it's done yeah the first flyout menu with two tabs within it and that second flyout menu would just have just be displaying one yeah exactly and of course you can also put a tab bar inside of here by default what shell tries to do is try to be smart about it and say hey if you have you know two pieces of shell content the only way I can show those are in tabs right in general which is quite nice yeah yeah all right yeah so they have another shortcut that was happening without the Tap bar and tab that James was just mentioning all right so here we go the knowledge check check it's time to check your knowledge all right so go ahead and vote for this at AKA Ms slash polls and gosh this one is a this is an opinionated question this is pretty subjective when is tab navigation a good choice for an app hmm it says yeah so you only have a few pages in your app and the pages all of equal importance that's interesting the apps Pages tend to be traversed from General to more specific I don't know what that means uh the apps Pages require extensive scrolling allowance my pick I pick C I know what they're getting at with B B is you have a list view like a list of planets you click on Saturn and you see Saturn's details that's what B has to be right yeah generally more specific I think so yeah can't be B either yeah um must be a right it has to be a boom all right nice good good good yeah it makes sense if you want to have tabs you only have a few pages you want to put them in tabs and boom there and I don't actually know if they need to be equal importance however I do think that is good right because sometimes people will like add a tab for about or for um a settings page actually I think that's not a great practice at all like a lot of times what you'll see is on your home page you might see a little settings icon or an or a image of yourself now and then that goes into the settings page right because it's not really equal importance right I think when you look at those you know um tabs that are there you're like okay I probably want to go into each of these tabs in general right now you may say that these are a vehicle so when I open my my security app there's a explore tab which is telling me to buy more stuff now to me that's not very important actually the devices and the events there's only like two things or there's like three of these things that are important so to me they could hide these in my opinion but to them they want to sell more stuff so they put it on a tab I do click on it more because it's on a tab right so in general right like that's there yeah yeah yeah and I think a good way to think about it as you mentioned maybe not equal importance but the pages are conceptually distinct so like with your security app like you have the feeds coming from the cameras well the feed or the page to buy the camera is really it's a distinct distinct yeah conceptual switch between them so maybe yeah that's what is a good way to think about it and I think the key here is you only have a few key Pages or sections of your application that should really say sections but pages is the same as a section right um because if you you can have a lot of pages you can drill down into it but in general it's like a few sections on my app where those sections have equal importance so yep yep cool and that's when tab navigation would be a good choice all right so let's Implement some tab navigation and we're going to add a tab bar combine some tab pages with the fly out for some reason if you need some help that's covered in here too I always need help uh good questions from the chat as well while you boot that up um Tabs are always at the bottom or we'll be at the top in Android per Android default design actually Android default designs are at the bottom now automatically uh top tops are more for sorting data or sections um usually on IOS and Android like a segmented control um but what they do is shell automatically on IOS and Android add them at the bottom on Windows and Mac they're actually at the top for tabs and they have drill down menus and we'll see that as we go through it because they are a little bit different on Windows because it's the default it's whatever the system picks up there one thing we didn't talk about I don't know if we're doing in the next sessions you can have tabs inside of tabs and on that for example then you'd have the main categories on the bottom and then tabs on top too so you would you could have that as a good good reference and that's really popular we might have a um you know uh let's say actually it's actually in my in my security app I just have it open all the time apparently but for example on the security tab there's there's modes and then automation so it's like it's a list of devices and it says you can you can switch between modes and automations that kind of like does different things basically inside the app and those would be two tabs inside of it so you'd have a a tab with two pieces of shell content inside of it which means that it's one tab with two things which will then create two new tabs at the top whoo amazing tabs upon tabs tabs on tabs on tabs tabs and tabs and tabs all right we're just going to update this existing one to just change it yeah we're just going to take this existing one and move it into tabs nice yeah pretty easy yeah I like that what I'm going to do I'm gonna actually take this and just comment it out because I know I'm going to need it later so we're just going to save and comment it out that way I don't have have to be typing yeah just and I might go through and delete uh literally as I know it's my security app I I use ufe security it's like they're owned by anchor not sponsored so there's no subscription fee so I'm a big fan of that so oh nice so here we go you have a tab bar with one tab in it and it's just saying one thing so actually what this is going to do is just going to show us the page yeah it's you know kind of like the same thing where we saw before the fly out with nothing in it it just kind of uh here's a page it's kind of just you know I'm not even going to run it because that's all it's going to show us it's just a page you can trust us here but now let's give it a title and then an NR icon again so let's start building it up and we do that within the tab not within the shell content because sometimes when I'm actually building these for real I do get a little bit I always want to put them into the shell content and not within the tab for some reason and but yeah put them in the tab so I'll put this one title a moon and then the icon being moon.png yeah I think what's really cool here is as you kind of saw earlier with the fly out on menu you could easily change your application without having to add new pages without having to change your infrastructure like we're literally going to change the existing application to an app that has tabs from flyout and we're and we're not really adjusting any other bits of code right it's just like changing 10 lines of code which I think is really nice yep exactly and now we'll go through and we'll just add another one for Sunrise pop it in here pop it right below I'll make a little more room and so really much same thing except for calling out to the sunrise page and let's actually run it now amazing I'm actually interested to see what it looks like on Windows to be honest with you ah I forget it's been a while well you're gonna see it in three two one that's pretty good there we go we have a table across the top yeah that makes sense yeah and then make it a little bit smaller and hit the sunrise and then it shows and so you see the little the indicator is a little bar whereas uh iOS or Android has like it kind of changes the tab now you can you can note that you still have that fly out because you've set the flyout behavior to be fly out yes and uh what happens when you actually tap on it there's nothing because there are no fly out items you want to disable that which I think is the is the default you know had you but we set it there so if people were wondering what just happened now if we had actual flyout stuff it would be in there it would be in there so I mean so shell is actually kind of so if we a lot of words again so if I didn't have flyout Behavior specified at all and just had tab bar here it would automatically go to disable yeah because there wasn't any flyouts so but because we had it there we had said you know what shell don't mind what you see mind what I tell you and put a fly out there even though I didn't declare anything exactly yeah so I'm going to put it back out to file because eventually we are going to build another flyout in here all right so there we go all righty so what else do we have do we want to do here all right we ran the app we saw how it looked this is what it looked like on Android yep they would have the right down there you can see how it kind of highlights and disables depending on what tab you happen to be on and now we are going to add some flyouts so what we're going to do is we're going to delete the overall tab bar and then we're going to start putting this stuff into what we just created into a flyout menu itself so what I'm gonna do here is get rid of that all my hard work boom paste that in well this should be very similar to before fly out menu name's a little bit different instead of moon but we now have a moon icon says astronomy but here you notice that we have shell content saying moon phase and we're also giving in the moon PNG there because we're going to build the tab bar within this flyout item got it and I'll just do that right away grab over this Sunrise one but um there we go and the same thing it says Sunrise has a sun NG so I think what we're really showing here is the flexibility of what shell brings to the table right you don't have to use the default implementations of Charlotte you don't even have to use Shell at all I use it you can just have a piece of content and then do the rest and take advantage of the normal navigation right so a good question from the chat is like can you customize this tab bar can you do you know floating things and all that other stuff and the answer is you can just not with the default implementation or style you could override it but you could also then take a look at maybe like sharpnado which is like a really cool Community package for tabs that does all sorts of crazy customization so that's the power of Don Maui is the community behind it right what dot net Maui will bring to the table is it will do the right things when we add two pieces of fly out items and two pieces of things here it's going to do the right things based on the default implementation or as close as it can on the different operating systems yep whereas it won't be able to do that if you you want to do something crazy that's not built in like if Apple Google and Microsoft and everyone else gave us floating Century things in there then yeah you would do that else the team would have to create something um especially or unique which is where a third party package comes in you know more than anything yeah right so what did you do here what happened is that another all right I just pasted this highlighted part in okay the title and the question mark and it just says about page so we're going to put in about page in but it notice that it's in its own fly out item wow so I have two flyout items one that says astronomy and one that says about in the astronomy one I have two shell content items in the about one I only have one so reading it oh what happens I have two flyout items One's Gonna Have a tab bar in it one's not and once this run we'll see it work you ever notice James A lot of these uh technical demos are kind of like a magic show where I'm gonna do something and now here's the record out of my head all right first flyout item two two tabs moon phase so on now we have the about and that brings it up pretty cool beautiful what's awesome about it is that it really isn't a lot of work to get it you know working exactly to tune it up the exactly the way you want it you want it to go all right and if you need help this is the whole thing for you okay right down here yeah that's where the need help comes from oh I see yeah our we have a nice little application that generates all these slides for US based off the learn module and you know this just picks up headers yeah but then we clean them up so we add all the images we do stuff yeah yeah we make it we make them more interesting for folks all right so this is the most fun part that I like the most James is that we're going to start using a navigation stack yeah within our tab pages and actually I think this is probably where most apps go whether with you're within a tab page or not I find that you're going to be using a navis navigation stack the most to navigate within your apps yeah all right so file pages and tab pages I mean they're just two ways to do navigation and each page there is really distinct and stands alone they're conceptually different for each page for fly out and tab navigations but stack navigation really has oriented towards the relationships between the pages so and our whole astronomy app if we had a stack layout you would say all right different planets I click on Jupiter I click on Mercury and I could see details about that planet then on the next page that like slides in or appears so relationship between that Pages or in James's Security app maybe he has a paid listing of his 75 cameras that he has around his house and then he can click on that and then see the feed yeah exactly that's what you do yeah yeah exactly and the the thing about the navigation stack whether you're using flyout navigation tabs or no navigation right maybe just have a Content page which is where we started then this navigation stack is what you would use to be navigating across all of your application yeah and yes he is using a Windows VM which is why it's a little bit slower because he was having some problems with his Mac so that's why it's a Windows VM on a Mac so Windows VM on a Mac you know what it's not actually working too bad I don't mind it at all I have a whole new Windows machine too but it's not set up yet either and there's a whole reason behind that and it's because it's armed but anyways it's cool I like that machine as well anyways actually I really love that machine all right so navigate with stack navigation all right we have this is awesome James I this is my favorite part of net Maui's shell this right here the URI navigation you use routes just like you would in web navigation like it's a query string and then it just works right you use a query string you say all right I want to go to this page and here's the data I'm going to send to it and then you go oh my gosh you get a whole bunch of things you get like a back button Behavior you have a current item you have current page you got current state and you have current or type of shell got a lot of different things that you can play with too um that kind of gets into the weeds a little bit that we won't get into but the point is with all of these is that you can tell in code exactly where you happen to be On Any Given set So within your whole navigation stack a lot of times in your code like you might not know in your view model like exactly how the navigation stack looks but with current page and current item and overall current the very bottom bullet you can tell where you are you can you can figure it out so that's where that's what this is all getting if you need to often you don't but if you need to do something special you have access basically to all of it is kind of what we're talking about here exactly all right so let's talk about the routing the URI based routing it's on our route defines a path to the content so it's just saying you know what cool planet page we're going to name that and it defines how to get there so it's most of the time it's just going to say cool plan a page and it's going to be a top level row so just a name essentially we're naming the page and then pages right here that's all it's saying we're going to name the page and it's going to correspond back to the page and now we can push them on to the stack by using that name and then we can send data to it with query parameters and that's my ultimate favorite thing there You're My ultimate favorite thing well yeah but I'm not built into the shell oh okay yeah be pretty cool though my little face was an icon we would have the.net SVG and SVG yeah ask the team if they can do that for for next weeks.net 7 rollout anyway so here's here's how you would define it you can say all right for each each different item you can say this is the route to get there so in order to get to the moon phase page I'm going to say you know what the route to get there is going to be moon phase I'm going to refer to whenever I want to get there somehow I'm going to refer to it as moon phase or sunrise or about so I can I can set that all up in in xaml mm-hmm and if I'm somewhere within my whole navigation stack and I need to pop up for some reason like I have it on a button like a regular button page that's not built in as part of the navigation stack because a lot of times you'll have a back button that's built in part of the navigation operating system exactly but you have a different button you have like a confirm like okay button you can have on that Handler just say shell go to current or current go to async you can do dot dot which brings you back up one page it kind of pushes you back once into stack yeah this is kind of familiar if you're just like thinking about how you would navigate like dot dot because it's kind of command similar to command line right you can also do uh dot dot forward slash dot dot and they'll go back two pages fun fact or you could do dot that forward slash Moon and it would go back a page and then it would go to Moon amazing amazing yeah and then here is how we would get to it so let's say we have a new page that's called astronomical body details so we registered that with our route from before so we had a page and we called route equals astronomical body details what we have then a property in that page called body name now we'll get to how that's defined in a second but let's just say there's a property and they're called body name and then we can pass data that will automatically bind to that property so that's pretty cool so Celestial name which is a string up above bind to it and go so when that astronomical body Details page gets displayed that body name property will have the value Moon automatically in there yeah and that's actually really it's actually really powerful I also want to mention one thing here too is that a lot of people ask okay well what if I need to pass complex data now that's something that we're not covering in this module however it's totally supported in fact you could say go to async and just say astronomical body details and then you could pass it a dictionary of string object so you could have um you know phase object and then pass it the entire object and pass that across and the rest of what we're going to talk about how you actually bind to those and how they get set is exactly the same so by default it's just string navigation similar to the internet but you could also pass it complex data as well that's a 100 supported and that's a brand new feature that was introduced at the launch of dot Maui which is again one of my new more favorite features of shell because often if I'm on a the first page I might have the full object I don't want to do a bunch of different things across let's say I just I mean I know I'm going on this page just put it in memory for a second pass it across the wire or go there the other option though is you could support multiple things because what if for example you were deep linking into this page you don't have that object you could still have like an ID for example and then you could then do the lookup to say oh okay they didn't pass me the object they passed me the ID via the URL navigation and then bingo bango you're totally good to go bingo bango next slide and this is how we actually do The Binding to that body name that we get in so the first stuff is that we're going to want to put a we're going to decorate with a with a attribute on the whole class yes and it's going to be called query property yes and then we say name of well that's the property that we have down below Astro name so we say query property name of expect a query string coming in with body name once you see that put that value into the Astro name property yes yes I have to look this up every time I do it it you know what I do is I just make them exactly the same so I do name of name of and then it's like no big deal because then it automatically gets set 100 inside of there now additionally some people say hey James hey Matt what if I'm doing mvvm I have a little bit of data binding you know I have view models how does that work and that's a Fantastical question how this actually works is that um you can put these query properties directly onto your view model and what dot Mi will do is it will trickle it down it'll first look to see are there query properties on the page um and if so then set them there or is there a view model or a binding context set to this and if so are there query properties on that so it will automatically bind those into your view model as well which is quite nice a good question is is there a get query string I'm not sure there are a new on navigating two which does do parameters and it might actually pass those in I'd have to look that up that is some newer things in dot net Maui on the navigation it may pass some of those things automatically if not that's a great a good feature request yeah you know I think on any time like hey what if it did this that's a good feature request put it on the team loves that stuff damn all right so let's do a little now let's check before we jump into the demo now let's check all right so we spent a lot of time talking on this one so here we go how would you send data to a page when using route-based navigation hmm do you pass data into the Constructor of the target page do you instantiate the page then set page level properties interesting or do you use a query string syntax a key value pair can be sent you can vote on our poll at aka.ms forward slash polls yeah yeah do you know how the the polls was built I don't know I think Laurent built that right I think he might have yeah someone was asked me earlier I think there's probably a little signal r abbit yeah signal arm Blazer I think right it's Blazer web assembly yeah that'd be my guess boom it's pretty good which is interesting because I'm going to get into a little signalr and a blazer but actually Blazer on the server side with Azure functions in my talk at dot net comp next Tuesday oh my gosh foreign all right so anyways let's talk through this would you all right so we're talking with route based navigation here see what do you see it's C all right we're not even gonna bother with it boom good good we just we just told it we did it all right so let's do this what we do we're going to use some tab pages with navigation so here's what we're gonna do we're going to open the solution we're going to add a route to The Details page so we're gonna have a root page Earth Moon Sun Jupiter Mars and we're going to display detail Pages based off of this we're gonna navigate to it our detail page is going to be one page this can be able to display any of those values though all right I love it do it all right so because we're adding pages to it and I don't want to have to do a bunch of typing we do have exercise three in the whole repo that you can just use it as a startup because now we have two new pages astronomical bodies and astronomical body page and if we open up app shell we can have we see we have them here we have them in a fly out and we have a tab page here the last one is called bodies has a new icon called comment and that's going to show the astronomical bodies page otherwise everything is set up the same yeah now one thing that you noted inside of uh inside of uh the PowerPoint is that each one of these uh items the flyout item and the shell pieces of content has a property called a route on it so for example if you wanted to navigate from the about page to the Moon page or the astronomy page you could do that by adding route on it um it's route that's the name of it 100 about 99 sure there's that now you can do that dynamically or you can do that obviously here inside of this and you would have these and those are unique routes now whenever you add a page we didn't have this in the slides actually funnily enough whenever you have a page that is not in the um in the Shell right you're you're going to navigate to it it's not in a flyout item it's not here you need to register that route with the shell and that's where we're going to do it inside of our exactly code exactly yeah oh well I didn't think I'd get that anyways all right so yeah let's go ahead and do that yeah all right yeah what are you're on the next one yeah I have to go all the way back up they didn't get your points though you're not signed in yeah I'm not I see I see all right I didn't get my points always always be getting points are you gods do all right so a little explanation of what we're going to be doing open the starter solution we can see our two new pages which we kind of just went through and now what we're going to want to do is we James was just talking about we want to open up the app shell class and give it a new route bye C sharp wise so what we were just doing here we're putting in routes based on a shell content but I can open up apps shell put it in right there as well yeah now best practice actually is here there's two things one the first thing is a string that says What specifically is the uh URL that you want to go to now I James prefer instead of doing a hard-coded string doing a name of and then having the route match the page specifically so that is one thing that you could do so for example you could do name of astronomical body page and then for example it would just be that string and you could use name of everywhere and that's a lot nicer in my personal opinion um because now you're not hard coding strings and then if you rename the page boom you're totally good to go yeah or some people like to do constants and have those Define somewhere else but I don't like just strings hanging out in my my routes in my personal opinion I just like to copy and paste the page names in general so I can find those all once in my opinion that's but you don't have to it's up to you you know what I like that that's a very good best practice and we should update the module to reflect that I think the James best practice yeah which you know doesn't hold a lot of weight to be honest I don't know we'll put your we'll get you a ping PNG file and put you know a little change okay I have to be animated.net nine feature nice all right all right and so what we're going to do is we're going to open up the astronomical bodies page so the page that actually has everything so let's actually show what it looks like and what it is it's really just a bunch of buttons on a grid I love buttons Earth Moon Sun comet look at that aren't those cool um click on it it's gonna show it's going to bring us to a different page so we're going to put them all in here like so and then because I made you change the string now you have to change all that goes change it everywhere but that's okay because I was gonna have to go in here and edit anyways eventually to a past data yeah so let's do this to make them so we can actually see what we're doing and then the name of and it's astrone body page yeah I'll just it's a bear now at this point you're not passing any data you're just going to say go to this page go to this page yeah and Shell's smart enough to add the back button for you wherever you're at and it's it's getting added onto the stack in general this is a little bit different because if you're coming from the web world you're thinking oh I'm navigating to this URL like it's not it's out of memory at that point right because the browser tab is there you got to remember this is a stack of pages how of these different operating systems work is you have a stack of pages and those are still going to be in memory there right you know so when you go back it's not gonna it's not like the browser where you go back and it has to reload that page it's going back to the URL stack it's actually going back to the page stack that's there so it's gonna have to reload that that page so remember that I was actually talking to um a web developer recently doing some Blazer hybrid work with automatic we're talking through that so yeah it's a little bit of a mind Bend and James I really do love doing this name of right here it tells you exactly where you're going you don't have to really do any uh mental gymnastics here it's true it's a great great thing all right two so now we want to actually start sending the data yes now you're going to need to do some string interpolation yep so we're going to do Astro name Comet Earth Moon and Sun Wind Fire combined you know what I was thinking that before as well so as James said we're going to do a little string interpolation and make sure I can patch everything up and I already forgot Astro name equals Comet Earth Moon so then it's parentheses astral name equals comment comment back so now is that thing yeah that's we get it like that yeah that's better Boop yeah see now if you change the name of the page or do something else refactor something then it's just gonna work in general and it's not magical hard-coded strings that you could typo well we do have one kind of what we're doing right here but generally speaking that's going to come from you won't be hard coding in your um parameters that your cynic and that'll actually come from a user here were just happen to be hard coding Boom for the sake of a demo yeah all right cool so yeah that's how it works and it's actually you know really nice you're sending an astro name and let's take a peek at then our astronomical body page you know what we're going to have to do we're going to have to add a property in to receive it yeah I bet you that's our next step and it sure is nice so here we're going to actually create the property it's going to call it Astro name and I'll just pop it up at the top here and then it's gonna once that property gets set it's just calling ask update the Astro body UI which finds the astronomical data that it wants and then puts it there so that's it's funny that we actually pass in the string because we've already set the strings you don't actually need to pass it oh yeah we just could just go grab it from the property yeah so funny yeah now additionally one thing people ask is like when is this a set so this is so the the reason a lot of times with like older navigation style where you'll create the page and you pass in objects and then do different work there this is actually nice because what will happen is the page will be created it'll be navigated to and when it's navigated to that's where the CR the properties are created so the page is already created and then they're set on navigating too and then it's it's there right so you could link into one of the page events to say okay I know that after I've been navigated to then I want to update the UI as well so is this a best practice here if you only had one property and you're changing it this way then maybe we might have some asynchronous operations in there maybe you're talking to a database or to a back-end system yeah so you could Loop into uh on navigated to or on appearing property yeah so just be aware yep and so here this is the magic we're saying on the class not on the property on the class or saying query property name of Astro name right down here and then we have Astro name there so here's doing it the James best practice just call them all the same thing yeah all right and actually I probably should do we could just do name of astroname for that as well it doesn't matter here we go all right we should be we should be looped up and ready to go start it let's have it yeah let's do it I'm excited I'm gonna see if it runs because it looks like your Android remember that Android pop-up you didn't want to yeah that was interesting huh yeah I'm gonna see I'm just gonna see if it compiles I'm excited because I know that you weren't getting a lot of intellisense and I think those are the animals I'll see you in the top left there see it's the drop down is Android and probably you didn't accept the Android thing so that's why that's funny here we are nice and then let's go to body bodies there we are buttons aren't they great they're beautiful let's do Haley's comment or is it Halley's comment Haley's Halley's I don't know but there it is tells us everything we need to know but it's 4.6 billion years old wow that's amazing yeah and up here right up here is the back button way up in the upper left-hand corner but that's where it goes with when when you I3 apps nice and if we could expand that we can see our above page two if we want and that back button goes away go back to it and we're in the same state as before as James was mentioning that apps desktop phone apps tablet apps they maintain their state where web apps might not although with all the new JavaScript Frameworks maybe they do now but yeah but anyways by default we have it State's 19 and we could go back and say Earth earth almost as old as Haley's Comet oh no yeah who knew the moon should be about the same age it should be about the same you'd think yeah and then the Sun a little bit older yep there we go nice boom cool there we go James we had it we built up an app we're passing data around I love this ability to pass the data around by using this go to a sync yeah super simple someone asked what's the life cycle of the query property well the life cycle is when you navigate that's when it's set so it's there it's a query property so it's it's that whenever it is navigated too just like in the browser when you navigate it it's the same type of system that you have there and again you can pass complex data so for example if you didn't have those buttons you had a list of things you already have the entire you know what you know object you could pass that object in but in this case we didn't so we're passing the identifier to look it up yeah yep and ideally yeah as you mentioned James either it would pass the entire object in in the dictionary or we had a list from that object that you found to the list you would have something that you would used as your lookup or the whole the whole object that you bound to the list so boom alrighty cool back to it summary what did we just talk about everything we implemented tab navigation we've navigated between pages but very first first thing we did was do fly on navigation wow yeah everything I love the navigating between pages with that Ura base that's the best thing we saved it for last and you know I'm partial to tab navigation file navigation I can take it or leave it but yeah and that's just me that's preference it works great in Maui that's just my UI design preference let's let's uh I wanna say that it's nothing nothing bad against Maui show it's just me with layouts fly out it's whatever you want to use whatever's best for your application yeah we did it that was quick we actually ended a little early amazing yeah we did wow yeah we are straight into the point so obviously if you want to learn more scan that you QR code head out to AKA Ms learn live Dash 20221102 it's a pretty cool date a dash summary yeah scan a QR code go out there or just go browse all the learn all the Microsoft learn modules and just when you get to the browse just click.net model you'll see all seven of them that we have including a learn path that you can go through and take them in order if you so do wish yeah and then James again.netcomp coming up next week super super excited about that yep do it we'll still be here next that's right Wednesday uh during.netcom so a special learnlive.net comp event it's not on the calendar but we'll be here from 10 Pacific to 11 30 Pacific as well but so if there's something you want to watch at dawn.com but these are recorded so you can watch it on demand or you can come join us if you're like oh whatever don't want to do that let's actually see what's going on at dot net comp I'm going to look it up right now all right comp. I'm going to see what session are we competing with agenda all right so we're going to be competing with what time are we at 10 10.net loves webassembly and Dot Net 7 building Blazer components and testing Blazer applications so it's the Blazer section so Donna Maui and Blazer together Blazer hybrid wow oh my gosh so that's great so if you're a web developer you want to learn about blazer.net.com if you want continue your Learning Journey what are we talking about next week next week is that on the slides I think it is yeah let's see let's see if we can next week ah rest services oh this is a fun one because we get to bring in the and we get to bring a little Azure into it I got to see if this thing still works it should should it should I just ran it the other day okay there you go nice what Azure changes so often so we I'll test it again today yeah so we're going to learn about consuming rest web services and Maui applications this is a cool one uh because that's something that most applications are going to need to do they're gonna need to not only set up that you know your navigation your pages theming styling but actually the last two sections are my favorite sections because there is the consuming restful web services and then the last one um which would be on the 16th is going to be about storing that data in a sqlite database which is super important as well so um that's super duper cool so you can do that and of course you can check out not only um all of our upcoming live streams but other things happening on the.net YouTube so youtube.com forward slash.net additionally if you go to dot dot net which is the website dot.net there's a live button and that blinks when things are happening live and we are there literally right now by the way so if you go to the.net live website it's it's us it's our faces on there which is really cool tomorrow is a.net community stand up for Don Maui so you definitely want to check that out they're going to be talking about.net hot reload and how to customize it um and then there's going to be a bunch of net comp stuff so you definitely want to check that out and of course the student's own stuff as well um John will be dropping all the links in the chat the last thing that we've been doing is the last slide last itch slide is there another slide there it is oh there we go we have a continue the conversation which is learn live continue the conversation where we actually hop on Microsoft teams for about 20 30 minutes hang out you can ask more detailed we're gonna have more impromptu chats as well from there so it's aka.ms forward slash llctc we'll drop a link in there we join in uh Matt and I we chat it up for a little bit so feel free to head over there and we'll see you in a few minutes and thanks everyone for hanging out I really appreciate it and I hope you have the most amazing Wednesday of your entire life until next Wednesday thanks Matt all right thank you James bye bye there's a key smiling there we go

Channel: Microsoft Developer

Views: 10,820

Keywords: microsoft learn live, dotnet, dotnet-maui, vs, developer, student, beginner

Id: 7ZeZD-iJFQw

Length: 83min 5sec (4985 seconds)

Published: Wed Nov 02 2022