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

Ғылым және технология

Today, we look at Tabs! Both the TabbedPage and using Tabs with Shell in both Xamarin.Forms and .NET MAUI. We explore top tabs, bottom tabs, tab sandwiches, navigation, customization, colors, and so much more! It is 30 minutes on TABS!
Full Xamarin Beginner's Playlist - • Xamarin & Xamarin.Form...
👕 Buy some swag! - jamesmontemagno.myspreadshop....
Links:
* Shell Navigation - docs.microsoft.com/xamarin/xa...
* Shell Tabs - docs.microsoft.com/xamarin/xa...
* Tabbed Page - docs.microsoft.com/xamarin/xa...
* My Coffee on GitHub - github.com/jamesmontemagno/my...
* Sharpnado Tabs - github.com/roubachof/Sharpnad...
Disclaimer: This channel, videos, and streams are created in my spare time and are a product of me... James Montemagno! They are NOT officially affiliated or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
Chapters:
00:00 - Introduction
01:45 - Adding a TabbedPage
05:00 - Adding existing pages in a TabbedPage
05:40 - Customizing TabbedPage colors
07:15 - Bottom Tabs on Android
09:55 - Navigation in a TabbedPage
17:30 - Shell Tabs in Xamarin.Forms and .NET MAUI
22:30 - Icons on Tabs
24:05 - Navigation in Shell Tabs
27:00 - Completely Custom Tabs with Sharpnado
28:22 - Wrap-up
☕️ Buy me a coffee - www.buymeacoffee.com/jamesmon...
Follow:
👨‍💻 GitHub: github.com/jamesmontemagno
🦜 Twitter: / jamesmontemagno
🔴 Twitch: / jamesmontemagno
📄 Website: www.montemagno.com
📰 Newsletter: newsletter.montemagno.com/
What is on my hat? It is the CLE clothing logo because I am from Cleveland! Checkout their awesome CLE merch: cleclothingco.myshopify.com/
What is that art on my wall? It is an original piece from the French street artist Gregos of La Butte Montmartre: / bcez1onhiqx
My Setup:
🎙 Blue Spark Microphone - amzn.to/3qgtYkq
🎙 Blue Pop Filter - amzn.to/3jEWM3r
🤳 Rode Microphone Arm - amzn.to/2Z68AlE
🎧 Sony MDR7306 Headphones - amzn.to/372jxta
📲 Stream Deck - amzn.to/373Uk1n
📹 Elgato Cam Link - amzn.to/3a9eGbh
📷 GoPro Hero - amzn.to/374lm90
🖱 MX Master 2S Mouse - amzn.to/3d7J2gj
⌨️ Tecware Phantom Keyboard - amzn.to/3aUP4y9
#Tabs #XamarinForms #DotNetMaui

Пікірлер: 92

  • @sinam1951
    @sinam19512 жыл бұрын

    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

    @JamesMontemagno

    2 жыл бұрын

    Nice work! That is awesome to hear!

  • @mercytum7045
    @mercytum70452 жыл бұрын

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

  • @evenewtube4040
    @evenewtube40409 ай бұрын

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

  • @PC-js3bj
    @PC-js3bj2 жыл бұрын

    Thanks James!

  • @bebenlebricolo
    @bebenlebricolo10 ай бұрын

    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 !

  • @terryhenning8325
    @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!

  • @HelloVNNY
    @HelloVNNY2 жыл бұрын

    Thank you a lot James 👍👍👍👍

  • @amirmirzababapour6016
    @amirmirzababapour6016 Жыл бұрын

    So good, thanks!

  • @kangaroojack89
    @kangaroojack892 жыл бұрын

    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?

  • @jfversluis
    @jfversluis2 жыл бұрын

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

  • @JamesMontemagno

    @JamesMontemagno

    2 жыл бұрын

    Good point!!! Totally forgot lol

  • @BhekiSangweni
    @BhekiSangweni2 жыл бұрын

    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

  • @livy5x281
    @livy5x281 Жыл бұрын

    Thank u, this helps a lot!

  • @gouzgr638
    @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

  • @ryanoconnell8204
    @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

  • @wolframliermann2883
    @wolframliermann28832 жыл бұрын

    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.

  • @DifferentTurn
    @DifferentTurn2 жыл бұрын

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

  • @BirenPatel
    @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

  • @juanfrancisco9039
    @juanfrancisco90392 жыл бұрын

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

  • @samiboy53
    @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.

  • @rikudouensof
    @rikudouensof7 ай бұрын

    Thanks James

  • @GianniDPC
    @GianniDPC2 жыл бұрын

    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

    @JamesMontemagno

    2 жыл бұрын

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

  • @paul790905
    @paul7909052 жыл бұрын

    Thanks James from Cuba

  • @Jad.abouzaki
    @Jad.abouzaki2 жыл бұрын

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

  • @megasupernewbie
    @megasupernewbie2 жыл бұрын

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

  • @sipepguru
    @sipepguru2 жыл бұрын

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

  • @playerzzt1262
    @playerzzt1262 Жыл бұрын

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

  • @bobbobson6290
    @bobbobson62902 жыл бұрын

    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.

  • @nyuhkembayy
    @nyuhkembayy Жыл бұрын

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

  • @luisjjjj
    @luisjjjj Жыл бұрын

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

  • @sentrycod2373
    @sentrycod23732 жыл бұрын

    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

    @JamesMontemagno

    2 жыл бұрын

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

  • @openit6987
    @openit69872 жыл бұрын

    Thanks you so much Pro .

  • @Shahan85
    @Shahan852 жыл бұрын

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

  • @aliakseikartashou6166
    @aliakseikartashou61666 ай бұрын

    Hi James, when you create tabs in TabbedPage they look nicely aligned across all horizontal space, but why ShellTabe doesn't have the same behavior? Is there a way to apply the same alignmeht to Shell tabs?

  • @codewithreen5768
    @codewithreen57687 ай бұрын

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

  • @emilywatsonld
    @emilywatsonld6 ай бұрын

    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

  • @94089463
    @940894632 жыл бұрын

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

  • @jdia.
    @jdia.10 ай бұрын

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

  • @user-bz2wy2zc4e
    @user-bz2wy2zc4e5 ай бұрын

    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.

  • @maxblue8623
    @maxblue86232 жыл бұрын

    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 KZread(

  • @leosouza1520
    @leosouza1520 Жыл бұрын

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

  • @sacarymoviesamu
    @sacarymoviesamu2 жыл бұрын

    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.

  • @piyushagunjal3564
    @piyushagunjal35642 жыл бұрын

    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

    @JamesMontemagno

    2 жыл бұрын

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

  • @OrkSchamane
    @OrkSchamane2 жыл бұрын

    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
    @cahyodwc2 жыл бұрын

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

  • @jfversluis

    @jfversluis

    2 жыл бұрын

    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 :)

  • @Otonium
    @Otonium2 жыл бұрын

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

  • @JamesMontemagno

    @JamesMontemagno

    2 жыл бұрын

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

  • @kaligulah00000
    @kaligulah000003 ай бұрын

    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?

  • @adrianllamido759
    @adrianllamido7592 жыл бұрын

    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

    @GianniDPC

    2 жыл бұрын

    I’m wondering the same too.

  • @JamesMontemagno

    @JamesMontemagno

    2 жыл бұрын

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

  • @adrianllamido759

    @adrianllamido759

    2 жыл бұрын

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

  • @tech-man8751
    @tech-man87512 жыл бұрын

    @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
    @eddyj.l44952 жыл бұрын

    Will u migrate the coffee App to MAUI?

  • @kirwakelvinkering3122
    @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 ?

  • @eakjaa
    @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.

  • @SyedTassaduq
    @SyedTassaduq5 ай бұрын

    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

  • @amiteshwarsingh6099
    @amiteshwarsingh60992 жыл бұрын

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

  • @apollokulashekar398
    @apollokulashekar3985 ай бұрын

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

  • @stefanvogel9770
    @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

    @giannisvenetik3506

    Жыл бұрын

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

  • @leosouza1520

    @leosouza1520

    Жыл бұрын

    @@giannisvenetik3506 same thing around here, any solution?

  • @user-oh7vc3xg8o
    @user-oh7vc3xg8o8 ай бұрын

    Hello,how add badge in tab?

  • @kelvinkirwa4887
    @kelvinkirwa4887 Жыл бұрын

    The more i follow this is the more i get confused , what then is the difference between a Tab , a TabPage and a TabBar ? can you please help us do a UI challenge like the twitter tabs ? Thanks sir.

  • @zhh174
    @zhh1742 жыл бұрын

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

  • @JamesMontemagno

    @JamesMontemagno

    2 жыл бұрын

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

  • @energymarketprice
    @energymarketprice2 жыл бұрын

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

  • @JamesMontemagno

    @JamesMontemagno

    2 жыл бұрын

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

  • @viccotr
    @viccotr2 жыл бұрын

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

  • @JamesMontemagno

    @JamesMontemagno

    2 жыл бұрын

    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

  • @jespinalny
    @jespinalny2 жыл бұрын

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

  • @JamesMontemagno

    @JamesMontemagno

    2 жыл бұрын

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

  • @abba5102
    @abba51022 жыл бұрын

    Very good brother I am xamarin developer.

  • @igorlimadev
    @igorlimadev2 жыл бұрын

    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

    @JamesMontemagno

    2 жыл бұрын

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

  • @igorlimadev

    @igorlimadev

    2 жыл бұрын

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

  • @anonymousug9648
    @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

  • @JohnSmith-dd2nd
    @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

    @RimuruLai

    Жыл бұрын

    same

  • @thameemansari6644
    @thameemansari66442 жыл бұрын

    Yo James.. first comment..

  • @williamprogramer4168
    @williamprogramer41682 жыл бұрын

    ⭐⭐⭐⭐⭐

  • @ariesdane5876
    @ariesdane58762 жыл бұрын

    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

    @JamesMontemagno

    2 жыл бұрын

    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

  • @sespark
    @sespark Жыл бұрын

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

  • @jxalexan5641
    @jxalexan56418 ай бұрын

    alg

Келесі