.NET MAUI - How to create Tabs

hello my friend my name is jose cruz and welcome to uncle bill's favorite channel today i will show you how to create tabs in your application using.net maui in a simple way you see so how simple it is so you probably noticed that we have a here in the channel a series talking about.net maui so don't forget to subscribe because you have many views in the future and let's go to the video that's it so as we are learning from the last video let's have it away from my picture to not to have it behind that okay so i will minimize it and what we have here is a simple project dot net new maui blah blah blah the name the approach that you want you see super layouts here the fox today is not to discuss about variable names or project names okay let's focus on the objective here today so first i create this folder models okay as we involve this app we have also the platforms folder that's the standard one properties really common standard one the resource i added more icons here and i changed it some colors okay and when then we have the view models folder let's you have a video in the future so don't forget to subscribe to what also this one and learn all about the mvvm and in view if you are in the future receive a card here and we have also the folder views that's where i have my viewers okay i have three pages here that's in my account page my main page and my search page i didn't have everything here inside of my view so the standard app let's have a look at it okay yeah as you can see i just changed the colors here and it's a simple simple project but the objective here today is not to have a simple approach have tabs right so let's stop it i i will move it behind my camera i'm not showing nothing here right now and let's go to the app shell the show is where we have the shell right the scope of our application as you can see i have my search page here my main page this is the um the hold and also i'm not going to have only one page so i can comment it or delete you choose and to have our tabs for organization i will have my tab bar okay the first thing that we need to add here is a tab bar okay now i have my top bar what's going to be inside of this tab bar my tabs right i will create only one so inside of my tabs i want to have some definitions on my properties so let's have my title that i will call it home and also an icon right i can add some icons here so icon um i think cyclone g okay great i have my tab here my home my icon but i need to have something inside my tab right i have my top bar i have my top and i need to have a page inside of my tab as headphones okay so what i need to add here is a shell content so let's add the show content here as we had below right that's commented show code that close it and done okay i need to specify some on some properties here what i'm using for this for this page right for this content first of all is the template so content template data template and now i'll use my namespace to reference my viewers here okay so let's use loco it's the name of my namespace and as you can see we have a list of views here on the mvvm video i will talk about why main page is not appearing here but you're already guessing right yeah so let's have it main page and that's it perfect oh you forgot one thing we need to add our hot right we want to involve this in the future i will call it the same name done we have our first tab here and let's have another review about this as you can see we have one new page here that's my home is my main page not that search page anymore as you can see here below and you can see that it's a collection we are trying to create like an uber here or no berries okay so good but where's the tab right you can notice that we don't have tabs here or here on the top that's because we have only one type let's create another two done as you can see i have three tabs here right now i have my main page i have my search page and account page the same page in views that i have here right code page main page and search page so let's start our application to see how it's how it looks like how it looks right now great i have my list here as my main page my headstart list and then you can notice that i have here one tab called search what i have here is just that simple page that we use it before i'm not creating the involved in the application right now the focus on the tapes and on the tabs and you can see right now we have also an account that's just one button create an alert really simple so as you can see we are changing also our title here home search and account you can see it's using the title in portuguese i need to change it for global nomenclature right so we have more than one bottom tab right imagine that i want to have the top tabs how can i create it let's have it let's let's i will show right now it's really really simple on maui if you want to have top tabs you just add the shell content and one on tab basically that that it's really really simple let's create it right now donna what i did here i just added the same page here i just changed the whole but i would delete it but whatever just let's start an application and you see that in the first tab that i will have here i have home and three new tabs why we don't have nothing here as you can see it's just a giant space it's because we need to add the title here right we didn't add the titles and that's why it's really word here but as you can see um let's stop it let's stop an identity really fast done tab one two and three on the my home tab okay so first as you can see i have my tab one tab two and type three having the same page as we have here below but it's completely different um scope why because if i go to the search page i don't have those tabs this tabs belongs to the first step okay that's the home okay but what if i want to change my my tabs i want to remove the the tabs below just remove the tabs i have one tab inside of with shell content inside of it okay it's really really simple way to have it there so if you enjoyed the video don't forget subscribe hit the like button and i see you in the next video you

Channel: Jose Async

Views: 8,134

Keywords: dotnet, maui, dotnetmaui, android, ios, .net, async, developer

Id: Ca1FBWMuTLU

Length: 7min 17sec (437 seconds)

Published: Wed Jun 01 2022