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

[@sinam1951]

Thanks a lot James! I was so new in App development. I just started a month ago and by watching your videos now I'm able to create simple projects.

[@JamesMontemagno]

Nice work! That is awesome to hear!

[@bebenlebricolo]

Ok; you know what ? That's the best summary I've found so far. Beats the Microsoft documentation by far (remember that TabbedPage doc that just says "Hey, it's incompatible with Shell, will make it crash" and you're left with no explaination as to why and how to actually remedy any of this). I was looking for highly customizable tab stacks and was kindof disappointed with the Shell's tabbar (but it's far more powerful than what I've thought originally) and the Sharpnado.Tabs is advertised here and there on the internet but your video is the first place I've found that actually compares TabbedPage, Shell's Tabbar and Sharpnado almost foot by foot. Thank you !

[@jfversluis]

And don't forget about the TabView in the Xamarin Community Toolkit! But Sharpnado is pretty amazing as well! Thanks James!

[@JamesMontemagno]

Good point!!! Totally forgot lol

[@mercytum7045]

This was really awesome...and thanks for letting us know about Sharpnado.Tabs. Hope to use it someday soon.

[@luisjjjj]

Great video, a Sharpnado.Tabs video would be awesome. Thanks again.

[@evenewtube4040]

Thanks a lot ! I was searching for it sooo much, love you ! 😘🤩

[@PC-js3bj]

Thanks James!

[@amirmirzababapour6016]

So good, thanks!

[@HelloVNNY]

Thank you a lot James 👍👍👍👍

[@playerzzt1262]

great video, I was struggling with the tab colors and icons

[@samiboy53]

Hi James! Awesome Video. Quick question: how about letting the user create tabs at run time dynamically? Similar to how in visual studio, where each code file you open becomes another tab. Can I do something like that in my app? Or even more advanced, letting the user doc the tabs in different spots similar to how you can do it in visual studio where you can play around with the different windows and doc them any which way you want? would love to see some help with that. Thank you so much again. I've learnt soo much from your videos.

[@sipepguru]

Could you kindly do a video on passing data between these different options

[@paul790905]

Thanks James from Cuba

[@DifferentTurn]

Thank you, James! Awesome vid, and great explanation! Now it's time to try things out 🤸

[@rikudouensof]

Thanks James

[@stefanvogel9770]

How to add top tabs to a contentpage ? I mean i have a main page where you can select something when you will routed to the next one and on the second one i want to have tabs. How to add tabs inside the second page ? Only what i can find is how to add tabs to the first page which will be called in Appshell but i cant find solution how to add tabs to content pages

[@giannisvenetik3506]

I've been struggling with this for about 2 days now. If you find a solution, please, let me know.

[@leosouza1520]

@@giannisvenetik3506 same thing around here, any solution?

[@livy5x281]

Thank u, this helps a lot!

[@gouzgr638]

Hey Amazing video. You are my go to channel when I want to learn or refresh memories. Can you make an example of binding for tab and flyouts. The IsVisible and the flyoutIsVisible are either bugged or I am doing something horrible wrong in my viewmodel. And I am still trying to figure out how to pass values from a flyout to a flyout pr to a page or tab for that matter

[@codewithreen5768]

Cam you do a short video on how to use Shopnado? I'm not able to pyt tab content.

[@openit6987]

Thanks you so much Pro .

[@ryanoconnell8204]

Great Video thanks James. Where the root is a Shell TabBar is there a recommended way to navigate a chain of pages from the root Nav stack and not from within the Current tab page Nav stack? You covered this for Non-AppShell. Of course could use Shell.TabBarIsVisible="False" or perhaps even Modal navigation to give the illusion of this, but it is still using the Current tabbed page Nav stack. Thanks

[@leosouza1520]

Great video, but how about tabs inside tabs when using Shell navigation (not Flyout) ?

[@nyuhkembayy]

Do you have video that shows how to code bottom flyout/drawer? Thank you!

[@maxblue8623]

Thank you, James! Can you make a tutorial on how to write a chat app with xamarin forms? There are so few good videos on this topic on KZbin(

[@BirenPatel]

Hey James! Great content and appreciate all you do for the Xamarin community. I had a question regarding iPad/iPhone navigation. Is it possible to have different navigation for different devices? Side bar for iPad and Tabbed for iPhone within the SAME app project? Any guidance will be greatly valued and appreciated. Thanks

[@GianniDPC]

Hey James thanks for the awesome videos! I have a question: can you enable swiping between shell tabs? I’m specifically looking to enable it for the top tabs.

[@JamesMontemagno]

I don't believe they ever added that for the top tabs.

[@jdia.]

Is there a way to make the bottom tabs navigation by swiping, like the top tabs do?

[@terryhenning8325]

Hey James! Great video - it's a must watch for learning MAUI. I've come back to it several times, but I'm wondering if there's a way to pass data when clicking on tabs in a TabBar when using Community Kit MVVM? I can hook up the NavigatedTo events, but I'm not seeing an obvious way to get parameters from VM1 passed to the VM that is the BindingContext for Tab2. Love the look of MAUI so far!

[@kangaroojack89]

Hey James awesome video, question on navigation buttons within a tab. How do I have a navigation button change to an entirely new tab as opposed to just navigating within the tab itself?

[@juanfrancisco9039]

Thanks a lot James!! Is there any way to expand the size of the top tabs to full width??

[@jimshattuck5285]

Hi James, love the videos! I'm new to MAUI and have a tabbed app I am working on that uses the camera as a barcode reader on Tab2 (in a StackLayout). However, when I navigate away from Tab2, then back the camera quits working. Any ideas?

[@wolframliermann2883]

Dear James thanks a lot, for so much helpful content. Is it possible to create an animated tabbar icons? Like in the Google clock app. Thank you.

[@BhekiSangweni]

Hey James great content as always! I have a question, is it possible to add a page on top of each page for example lets say you are using tabbed pages, and you want them to inherit that particular page...the same way the bottom tabs are able to be accessible in different pages

[@Subin-h2q]

Is there any way to place the tab title in center if there is no icon? without icon I looks odd as placed in bottom.

[@apollokulashekar398]

Hei, There is any option to disable the tab swipe in the shell 😢

[@bobbobson6290]

There's a small issue when there are more than 5 tabs and the tabs are at the bottom. The "More" tab isn't highlighted with the "SelectedTabColor" when a swipe is used to get there. Instead the fourth tab is still highlighted. But if the "More" tab is directly touched/clicked it gets highlighted correctly.

[@emilywatsonld]

Hey James, Do you know if it is possible to make the tabs on bottom be in nav stack in an easy way ? Like in instagram with it's bottom tabs, am trying to do such a thing, but except keeping own nav stack, don't see any alternatives

[@eakjaa]

Thank, How i will change language of "More" Tab, When i have five or six tab. More Tab is show automatic, but i can't language "More" to another.

[@megasupernewbie]

are there any vids about shell? I have not had a chance to learn that yet

[@kaligulah00000]

I have a Flyouitem->Tab> 2 ShellContents. I need that when I press a button in shellcontent1 it makes shellcontent2 appear to access it. I am accessing the IsEnable property through an MVVM binding, but it doesn't work. I've been trying for several hours and I can't get it. Could you help me please?

[@Jad.abouzaki]

You are amazing.. Thank you, please may i ask for autho 2 and refresh token? Thanks

[@kirwakelvinkering3122]

What if I wanted to hide the tabs and show them as the user scrolls ? Just like twitter does ,how will that be possible ?

[@anonymousug9648]

i prefer you always start out with a new project not necessarily opening it show roots and stuff but i mean let it be a new class new xmlpage or may be if aready coded start from the top it gets pretty confusing when you jump to the point i realy dont know where your namespaces come from and when you do show the class i still can't tell what in there and how it starts up thank you

[@adrianllamido759]

Hi James, thanks a lot for the video! About the "android:TabbedPage.IsSwipePagingEnabled", I wonder if there's a way to add this same gesture for the Shell's TabBar?

[@GianniDPC]

I’m wondering the same too.

[@JamesMontemagno]

I don't believe you can for Shell, I don't think it was ever added.

[@adrianllamido759]

alright, got it.. thanks for the reply,@@JamesMontemagno ..

[@SyedTassaduq]

so how do I set IconImageSource to show the image in it's orignal color like it is on png not everyone want a gray and white UI

[@Shahan85]

hi sir, could you please tell that how to Parameter Passing from a content page to tabbed page of between tabbed page?

[@jespinalny]

On iOS however, you’ll have a headache waiting for you when the icons are huge. Youll need a custom renderer class.

[@JamesMontemagno]

I haven’t really had any issues with that. You can always provide pics perfect icons if you desire as well

[@OrkSchamane]

Hi, i've wondering how to get dots instead of Tabs with. I want to create a welcome/tutorial page(s). And for that I want dots on the Bottom of the Page, so that the User can See the count of steps

[@cahyodwc]

Hi James, is there any Calendar View built in new .NET MAUI ?

[@jfversluis]

There won't be any new controls in .NET MAUI for the first version. It will have the same as Xamarin.Forms today but with a new architecture. From there, new things will be added :)

[@sentrycod2373]

Wonderful as always James. I was wondering how you navigate within a tab item, but for the Tabview control. I tried wrapping with a navigation page but the tabview only takes views. I tried using a data template selector to switch pages from view model but this is very rough. Is there a way to seamlessly do this?

[@JamesMontemagno]

I think you would want to use a TabbedPage and put the navigationpage inside of one of the tabs.

[@AntonKorolev-y1h]

Hello,how add badge in tab?

[@Otonium]

Cool. Can I get rid of the Flyout? and leave tabs only? Is it done changing something in the Shell?

[@JamesMontemagno]

Yup, just put Tabs in your shell :) you can also manually set "FlyoutBehavior" to Disabled at the top of the shell

[@tech-man8751]

@JamesMontemagno how to bring the tab at the top in iOS? as you show we can bring the tab at the bottom in Android, how to do it for iOS if we want to make it at the top?

[@eddyj.l4495]

Will u migrate the coffee App to MAUI?

[@94089463]

James: Any news on the Android Emulator for M1 Macs? Thank you

[@abba5102]

Very good brother I am xamarin developer.

[@JohnSmith-dd2nd]

MAUI in Sept 2022 is awful - trying to pull in tabbed pages on a fresh install of VS 2022 on a MAUI app and guess what - throws "the type os namespace Xamarin cannot be found (...... really?

[@RimuruLai]

same

[@amiteshwarsingh6099]

Just wanted to ask if xamarin will shutdown soon as i was just reading this on google and just came to your channel ,?

[@piyushagunjal3564]

Hello, I am struggling to change the font of the bottom tabs that are in the Shell. Please could you assist if this is possible and if so how to go about it? Thank you in advance

[@JamesMontemagno]

Take a look at -> github.com/jamesmontemagno/MyCoffeeApp/blob/master/MyCoffeeApp/MyCoffeeApp/AppShell.xaml#L101-L131 all the same code and logic

[@sacarymoviesamu]

Hello, James. I will put the comment here bcs it's your most recent video. I've been programming with a visual mode way (dragging controls / windows) for the past 3 years (mostly android apps), and now i have to do a multiplatform app with xamarin.forms. It's so confusing in many ways. Do you have any advice for me or can you recommend to me another multiplatform framework ? Thanks in advance.

[@zhh174]

what about tabs on the right side on desktop in maui?

[@JamesMontemagno]

Well that would be more of the FlyoutPage navigation style where you have those on the left/right. Similar setup though.

[@energymarketprice]

Shell tab page on Android is destroyed when you select another tab?

[@JamesMontemagno]

I believe this was all fixed up in .NET MAUI and also I think in the latest XF version (not positive though).

[@igorlimadev]

Great video, helped me a lot, but I didn't got it to work on iOS, just on Android. Is there anything special to do to make it work on iOS? It just shows a blank page with nothing in it, no tabs, no content.

[@JamesMontemagno]

Take a look at github.com/jamesmontemagno/mycoffeeapp working well for me there

[@igorlimadev]

@@JamesMontemagno I'll take a look, thanks!!

[@viccotr]

hello, who know how to switch between the tabs programmatically with ViewModel? thanks

[@JamesMontemagno]

Well in shell you would just navigate to the tab via the shell gotoasync method. else on a tabbed page you just set the current page index on the tabbedpage itself

[@ariesdane5876]

Admittingly, I only skimmed through this video but I never saw the Microsoft.Maui namespace referenced in any of the code you demo'd. All I saw was Xamarin.Forms.

[@JamesMontemagno]

The demo app i have been building the past year is Xamarin.Forms but all of the concepts and code besides the namespace are exactly the same

[@williamprogramer4168]

⭐⭐⭐⭐⭐

[@sespark]

Surprised you didn't say "tab in". 😂😂

[@thameemansari6644]

Yo James.. first comment..

[@jxalexan5641]

alg

[@priyankakondapuram2947]

Bro 2min stupid ad