All Things Tabs! Top Tabs, Bottom Tabs, Tab Sandwich - Xamarin.Forms & .NET MAUI

today we're going to be talking about tabs inside of xamarin.net maui applications top tabs bottom tabs tab sandwiches all the tabs all the time so tune in [Music] hey everyone i'm james montemagno and i'm back with another xamarin 101 ant.net maui 101 slap them together because it's the same you know stuff going on here for the tabs pages and for shell tab to navigation now i'm pretty excited because in almost every single one of my applications i use tabs somewhere it's core fundamental piece of an application just like fly out navigation is very popular for applications with a lot of sections or a lot of different areas to go to tabs have sort of been a fundamental piece of ios and android specifically on android the tabs are always kind of on top and they were just mostly used for separating pieces of content like oh these are my favorite posts and these are my all posts and these are a category post and those have been the top tabs however really bottom tabs on ios became the the the standard those sort of five or six uh if you're on ipad otherwise i think you have one more tab core sections that the default tabs can go to and that's how a lot of applications are being built today so what i wanted to show you is how to use the tabbed page and xamarin forms in don and maui and also how to use it inside of shells this would be a little bit longer of a video but i want to break down both of them because of course you can mash them together like everything i'm talking about here so let's go ahead and get into it all right so what i have is just a file new blank application nothing fancy here just welcome to xamarin.form start developing well let's talk about it here how we add a tabbed page so what i'm going to do is on my shared code right click and i'm going to say add new item under xamarin forms you're going to see tabs page i'm just going to add tabbed page 1. that sounds like a great name now if for some reason you don't see tabbed pages in there or for some reason the item templates aren't showing up the only difference between a content page that we see here is that the tabs page is a tabbed page you'd have to change that in your xaml and then of course you need to change it back here where it inherits from the tabbed page you could also come in and just say var pages equals a new you know tabbed page and just create your tabs page in c sharp code behind as well you can do that but i prefer xaml and we'll kind of see why here in a second but let's look at what this is it's a tabbed page consisting of three pages and these pages are just created directly inside of this tabbed page let me just run this and show you what it looks like here because it's actually quite fascinating if you just need to slap together a bunch of tabs really quick you can actually just shove a bunch of pages inside the tabs page as children so here we go let's go ahead and boot this up and of course like i always do i always forget to change the startup page so let's open the app xaml and change this to tabbed page 1 and put this back to the squiggle perfect all right so that's going to be our main page of our application and we'll get it up really quick once here there we go so perfect so we have three tabs look at that one two three fantastic that's just using the default styling there is a toolbar xaml or xml file for android that's automatically brought in from the xamarin forms project and you can override the defaults but you can just set the properties to and i'll show you what that means as far as this blue and the sort of white and faded white color here of the selected and unselected tabs but look at that i get tabs and i get them on top now if i run this application on ios i'm going to get the tabs on the bottom because tabs only exist on the bottom it can also exist on the bottom for android but before i get there let's just talk about what's happening in this page okay so the first thing we're going to see here is if i say background color red and i hit that there's the red page it's a full page inside of there if i make them all red they're all going to be red but let's change one to pink and let's change one to orange and now as i scroll through them you're going to see the different colors there we go look at that now that's pretty cool i can flip through them which is cool you can also disable that which i'll show you here in a little bit but there we go we can go ahead and just set a bunch of stuff now this is creating the content pages directly inside of this sort of page and if you were to set a view model on this tab to page it would trickle down to children you could also set a view model on every single page if you wanted to totally up to you the cool part about this is that you could actually just slap an existing page inside of here so let's bring in a xmlns namespace of local my app is called app2 so that's where the the page over here lives this mainpage.xml and instead of bringing in that content page i'm just going to say local main page and bring it in and now we have a full main page look at that that's pretty cool i could also give it a title and here i'll just say hello world and it updates right there yeah that's pretty cool all right now what about the colors of these pages you know on the tabs for example this is blue well luckily enough you have all those properties if i just say color you'll see background color that's of the page bar background color bar text color selected tab color unselected tab color bar color is what you'd expect if i was to say orange it's going to change it to orange looks pretty cool you can use static and dynamic resources there so if you want light theme and dark theme totally works now if we want [Music] color bar text color of let's say black right you just put that in there now you have black now the bar text is fine and of course we have this little underline here but really that's not enough of an indicator you'd probably want the selected and unselected colors so instead of setting the bar text we're going to say selected tab color of black and now notice that these other ones are white which is kind of cool i can then say unselected tab color and let's say gray for example and now we get gray that's pretty cool too so you just get those different tabs automatically not bad all right now on android you can actually have a bunch of these pages so if i just put a bunch of these pages in here we're gonna see a bunch of them here and there we go we got all these different views bunch of tabs now on ios you're only gonna get five tabs and honestly anything over five tabs is just way too much so you probably want to try to limit the amount of tabs that you got going on here to be honest with you the five seems to seem the most but let's talk about now that we've colorized it we've brought in pages we've talked about view models a little bit let's talk about bottom tabs on android i'm glad you asked so here's the thing if i come in here and i want to do like placement or bar something there's no bar position right because on ios there is no native top tabs and on windows i think they're on the bottom or on the top so there's only one on there but luckily with xamarin forms down in maui with the tabbed page the one that's just built in using the native constructs there are platform specifics and platform specifics enable you to do platform specific things in shared code and you can do this by bringing in a namespace i'm going to say android here type android and it's going to bring in xamarin.forms platform configuration.android specific and write a bunch of code for me and there's a whole assembly here etc etc and i'll link to documentation for platform specifics there's a bunch of them because for example when i do android colon you'll see application button image list view swipe view these are platform tweaks if you will for android ios and windows that you can sort of manipulate inside of your xaml or in your code behind so what i'm going to do is there's a tabs page and i can say is smooth scrolling enabled is swipe paging enabled for example off screen page limit that's kind of cool too and then toolbar placement and that's the one that we're going to want and we have bottom default top we're going to say a bottom now we're not going to see hot reload kick in here because it's actually a fundamental shift to exactly how this uh how this works on the tabbed page so we're just going to hit the little reload button here that's going to go and reload our application with our changes for the tabbed page and now what we're going to see is we get tabs on the bottom which is super duper cool now you're probably wondering okay there's just text on here and that's looking pretty good james but what about images and icons well the cool part here is that on every single page there is an icon image source that icon image source can be anything okay it can be a font image it can be an image in your application so you can put them all in here just like you normally would so that's what you want to use icon image source that's just going to set it and that's going to be on every single page that's how you get them there i'll show you what that looks like when we take a look at our coffee application it has top and bottom tabs and all this other stuff but i just wanted to show you what this looks like all right so so far we've added a tabbed page we've brought in existing pages we've customized the android bottom position we took a look at platform specifics we talked about some of the platform tweak so for example in ios you can only have five tabs really in general then anything over that just don't show up so you have to have overflow so try to minimize your app to five tabs but what we haven't talked about is navigation and this is really tricky in some regard and the question is how do you want your app to navigate when you tap on a button on a page do you want the whole screen to navigate or do you want to navigate inside of a tab that is something that's super duper important to think about here and you can set it all up really easily based on where your navigation page is so let's take a look at that okay so back over here on our pink page let's go ahead and add a button in here okay i'm going to say inside of this content page there's a button and it is going to be text navigate and i'm going to say clicked i'm going to add a click handler and i'm done now of course i've modified some code in the code behind so it's you know going to go ahead and just stop the application and we're going to implement some stuff in general so that's what we want those we want basically when we click on this button we want to go do stuff all right so we need to decide when i'm on tab 2 here what does this button do does it navigate the whole page or does it navigate the tab inside the tab okay so let's check it out let's say i want to navigate the whole page what i'm going to do is i'm going to go ahead and wrap my tabbed page in a navigation page so let's say new navigation page all right just like that so wrap it all in a navigation page and uh that's all you really got to do to be honest with you and then what we'll do is whenever we click on this button we're going to say async we're going to await navigation dot push async new main page just like do that perfect now remember the navigation is based on the context where you're at so i am inside of the tabbed page and the tabbed page has navigation so if i run this application what we should see in this regard is that the entirety of that sort of tabbed navigation or the tabs page shifts and the first thing i want you to note here is that there's a tabbed bar up there right so check that out there's a tab up there and that's actually quite fascinating because if we wanted to put a title on it the title would be on the tabbed page okay up here hello that would be the be it there right so we have that there let's tap on it and see it all navigated the whole thing went away if i go back i'm back to all of my tabs go again back over here all right think about that so how do you want your app to handle sometimes you want to navigate away from the page from the tabs sometimes you want to navigate inside the tab so let's do that now so to do this normally what we would do is we'd be inside of this page so for example here i'm going to give this a name of tab 2 just so i can reference that from the code behind and what i want to do is i want to instead of giving sort of all of these tabs this navigation i'm only going to give some of them okay so what we're going to do is inside of this we're going to wrap the content page inside of a navigation page that's kind of cool now this is something that isn't super well known in the xaml world but it is well documented is that navigation page has an argument of a page so you could pass it in a page so that's what we're going to do and we're going to do x colon arguments this allows you to pass in any argument you want in this case it's a page and now also do the same down here for the second one just so we can see what a few of them look like all right so we have navigation page with our content page and a navigation page with another content page let's see what this looks like inside of our application all right so what we have is a few interesting things that just happen all right the first thing that we'll note is that the navigation page is pulling up the tab two here okay that's really fascinating because the the the navigation up top takes access to that so what we want to do is give this also a title of tab 2. all right and we do that we see tab 2 down here so kind of be aware of what's happening there if i come back and i say title of tab 3 we'll get tab 3 down there all right that's one thing to be aware of now let's see what happens when i click on this and i'm going to add a break point back here click and i want you to note that there is sort of this inside navigation intermodal navigation stack that's going on here so let's see what happens exception ah interesting what just happened there well what happened is that i was trying to access the navigation of the tabbed page the tab page doesn't have navigation though the child page does right so inside of here this one right here tab two has the navigation so what i would need to do in this case is say tab two dot navigation dot async right so whatever the pages in this case i'm accessing that page inside of a page but you would do it you know in the code behind of the main page for example but let's go to tab two let's go ahead and check it out here and now we still have a navigation proxy and there's actually a navigation stack that's already here so when i go ahead and push this away oh we've gone down and and broke it let's go ahead and refresh it here i'm going to go here and push it there we go we've navigated inside of the navigation i don't know why that acted weird but you know live coding not gonna edit it out totally keeping it in but check it out boom there we go right boom boom boom boom so really cool so now you're sort of in control here of exactly how you want things to be coming into your application do you want the navigation to go sort of entire app wide or inside of it here and you can control that right i could go up my parent see if it's a tab page and decide where i'm going to navigate to and from but really in essence that's kind of all the bits and pieces of the tabbed page all right tab page is pretty cool i love it it's one of the key fundamental pieces of any application but let's talk about shell if you remember in my very very first episode of the xamarin 101 series when i talked about shell and why i love shell because it gives me a lot of power in the url navigation and scaffolding of my application it also comes down and very helpful when it comes to tabs and fly-outs now our application that we've been using is the my coffee application and i've been updating this repo as i go and so far it's just using fly out navigation now i do want to talk about where you would use a tab page versus where shell can actually assist you so let's go ahead and check that out so this is our application it is the my coffee application it has coffees of the world there's list views there's collection views there's databases here of my coffee there's settings such as light mode and dark mode and all those fun things inside of there and let's take a look at this equipment which is actually just coffees of the world now when i tap on one of these it just says it's selected and that's kind of cool that's that's that's fine and dandy right now let's say i wanted my entire app to be tabs well go back to my first episode where i show you how to do that but let's say i want one of these fly-out menus to be a tabbed page you would think that this page here which if i open it up which is my coffee page or just a content page would need to be changed to a tabbed page no incorrect because shell assists you with that if we look over here at this flyout item we can note that we have a flyout icon and then we have a single piece of shell content that has a route on it which is quite cool now here's what we can do this is quite nifty i can actually add a tab inside of here all right and i can then put that piece of content inside the shell of that fly-out item i'm gonna go ahead and reboot this here so we can see what actually happens here when i boot this up sometimes playing around the shell is a little funky but let's see what this looks like here so here's our application and there's one tab so it's not doing anything all right which is important so what i'm going to do here is i'm going to go ahead and add another one now when i do this it's going to crash because it's gone ahead and actually red tried to register two routes so what i'm going to do here is change this route to route 2 all right i'm going to run it again all right so i'm creating a tab with two pages in it all right that's what we've done here for this sort of fly-out item and when we do that we're going to get two different items in here one two now they don't have a name so let's give it a title of tab one there we go and a title of tab two and when we go ahead back and forth we should see that go ahead and light up for us automatically which is quite nice very cool now these colors of the tabs are actually coming from our style sheet up top so that is this disabled color unselected color and the foreground color here of the top tabs this is the top tabs tab bar is the bottom tabs which we'll talk about next all right so there we go we got tabs on tabs on tabs on taps it's quite nice all right now here's something that's also very cool that you can do with this as one you could you could add more inside of here right you could add more shell content but we're going to do is add another tab another one all right and what i'm going to do this time is i'm going to go ahead and just add a single piece of content in there and now we're going to note that there's actually two tabs let me bring that over one two one two one two pretty cool right there's tabs here because this tab has two items inside of it down here we have two as well but this tab needs a name title tab one and then down here title tab two just like that pretty neat pretty neat and like i said earlier those colors for the bottom tabs are coming from this style sheet here so we can see that i have all the different app theme bindings for light theme and dark theme so if i change this over into dark theme here we get the dark theme very very nice which is quite cool not bad so the only difference between here is we got a lot of tabs a lot of pages going on which is quite nice all right now what you're saying is well what about those icons now i talked about it earlier you just use your font icons just like always all right so nothing crazy but i'm going to show you how to set that over here so what we're going to do is on this tab we're going to set the tab dot icon sorry icon there we go and what i can do is use a font image source so i'm going to take that paste it in take this paste it in and let's change it from icon coffee to uh let's say this mug over here so let's go ahead and take this take this to our mug save it and let's go ahead and go back and forth just so it refreshes there and now we get two different icons with coffee and coffee in a mug that's it so all we've done is added tab dot icon fon image source or an image if you have an image in your application and you're good to go all right and that's pretty much all you have to do really to be honest with you you got copies of the world tab one tab two you got your tabs on top you can add a bunch of them in there it's just like what you saw earlier and if you're using the tabs page like i said earlier there's the icon image source and that's what you would set with your font image source i'll put a video down in the show notes and up over there to my most recent video if you full relatively recent video talk about how to use font icons inside of your applications just like this all right now last things last when it comes to tabs tabs pages all this stuff that i showed you is that you can also navigate right so when i click on this i'm selecting it but how does the actual navigation work well let's take a look at that and let's do it in both a single tab and inside of a tab sandwich if you will or a tab inside of a tab so let's see what happens there so i'm going to go ahead and just stop running this application what i'm going to do is i'm going to change this over to just tab content page 3. and what i'm going to go ahead and do is come into my view model over here so inside this view model what i'm doing is i'm just saying uh whenever this you know is selected just go ahead and click on that selected alert and go from there so instead of doing that let's come in and just say await app shell dot current go to oops dot current go to async i'm going to do name of and let's do add my coffee page all right so nothing fancy that's just a page in the stack over here that has some content on it and let's see what happens here when we go ahead and try to navigate to that page from one of those tabs all right so it's going to boot it up and let's click on it here and boom there we go it's navigated into it now this is a i should have noted that that's actually a modal page that comes up on top of it so that's kind of funny so let's go into that page and let's go into the add my coffee page and let's go ahead and remove that modal and let's just do animated for example and now okay it's still going to be modal so let's go ahead and refresh that here and see what happens now where it's just animated instead of modal so modals just copy on top of modals which is super important to probably actually know and let's go ahead and take a look at what happens inside of the animated there it goes it animates inside of the main tab okay see there where both when i click on that it navigates the page inside the tab tab one same thing so it's not inside of this inside of this mini tab it's the whole stack there like i said basically at this point shell has sort of taken over navigation you could though use the traditional navigation stack instead of using the actual navigator here and push the entire t of the entire application if you want to though it wouldn't make a lot of sense in this type of application where you're already levels deep you may want to use that when you're you know navigating to another navigation page all right now before i get out of here i got to tell you about one more thing because you're probably saying okay there's cool tabbed pages there's tabs built into shell but what about if i just want to put tabs anywhere what if i want like cool circular tab things or like crazy tabs or just like i want full control of my tabs well don't worry because there's an awesome library out there called sharp nato tabs is by jean marie uh one of our mvps and jean-marie has this awesome sharp nato tabs which allows you to put tabs anywhere fixed tabs scrollable tabs bottom tabs badges segments and controls custom tabs button tabs all the things so many tabs support for android ios and windows you can do all sorts of things like you can have these you know circular things you can have tabs in the middle of your page you can have scrolly tabs you can have all sorts of tabs look you can have segmented tabs you can have all the things basically so if you want them give it a look at sharp nato tabs it's a more advanced control it's really really cool because you can do all sorts of things like animations here just still spam a lot type of thing it's so good there's badges there's all sorts of things look at these beautiful tabs put some tabs in your life it's so good sharp look at this look at this is ridiculous i love everything about it so there you have it things built into your application not built into your application awesome third-party controls things built into xamarin forms ended on maui all the things give it a look go give it a try there you have it that is for all intents and purposes the high-level deep dive mid-level all the levels of tabbed pages tabs shell navigation with tabs putting in icons different colors all the things so many tabs this is just really all the things i could possibly imagine about tabs if you have any more questions put them in the comments below i would love to hear from about what you have on tabbed pages if you're running any issues let me know do my best to go ahead and answer those questions so really appreciate all the support all the great questions over the last year since i started this channel up and really providing those xamarin now.net maui 101 videos to all of you really appreciate it and of course i love it if you jam that like button over there that thumbs up button hit that subscribe button super helps um the channel but also helps other people find videos as well if you want to know any information about this artwork behind me or my hat at all it's in the links below in case you have any questions about that but really appreciate you tuning in and thanks for watching [Music] you

Channel: James Montemagno

Views: 5,149

Keywords: xamarin forms, xamarin.forms, .net maui, dotnet maui, tabs, tabbed page, bottom tabs, top tabs, forms, xaml

Id: YDxQjb7N-P8

Length: 29min 43sec (1783 seconds)

Published: Thu Oct 14 2021