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

  Рет қаралды 40,834

James Montemagno

James Montemagno

Күн бұрын

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

Пікірлер: 93
@sinam1951
@sinam1951 2 жыл бұрын
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
@mercytum7045 2 жыл бұрын
This was really awesome...and thanks for letting us know about Sharpnado.Tabs. Hope to use it someday soon.
@evenewtube4040
@evenewtube4040 9 ай бұрын
Thanks a lot ! I was searching for it sooo much, love you ! 😘🤩
@bebenlebricolo
@bebenlebricolo 10 ай бұрын
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 !
@PC-js3bj
@PC-js3bj 2 жыл бұрын
Thanks James!
@HelloVNNY
@HelloVNNY 2 жыл бұрын
Thank you a lot James 👍👍👍👍
@amirmirzababapour6016
@amirmirzababapour6016 Жыл бұрын
So good, thanks!
@DifferentTurn
@DifferentTurn 2 жыл бұрын
Thank you, James! Awesome vid, and great explanation! Now it's time to try things out 🤸
@livy5x281
@livy5x281 Жыл бұрын
Thank u, this helps a lot!
@rikudouensof
@rikudouensof 7 ай бұрын
Thanks James
@jfversluis
@jfversluis 2 жыл бұрын
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
@luisjjjj
@luisjjjj Жыл бұрын
Great video, a Sharpnado.Tabs video would be awesome. Thanks again.
@openit6987
@openit6987 2 жыл бұрын
Thanks you so much Pro .
@playerzzt1262
@playerzzt1262 Жыл бұрын
great video, I was struggling with the tab colors and icons
@paul790905
@paul790905 2 жыл бұрын
Thanks James from Cuba
@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
@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!
@BhekiSangweni
@BhekiSangweni 2 жыл бұрын
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
@kangaroojack89
@kangaroojack89 2 жыл бұрын
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?
@sipepguru
@sipepguru 2 жыл бұрын
Could you kindly do a video on passing data between these different options
@wolframliermann2883
@wolframliermann2883 2 жыл бұрын
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.
@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
@juanfrancisco9039 2 жыл бұрын
Thanks a lot James!! Is there any way to expand the size of the top tabs to full width??
@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
@maxblue8623
@maxblue8623 2 жыл бұрын
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(
@Jad.abouzaki
@Jad.abouzaki 2 жыл бұрын
You are amazing.. Thank you, please may i ask for autho 2 and refresh token? Thanks
@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.
@nyuhkembayy
@nyuhkembayy Жыл бұрын
Do you have video that shows how to code bottom flyout/drawer? Thank you!
@bobbobson6290
@bobbobson6290 2 жыл бұрын
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.
@codewithreen5768
@codewithreen5768 7 ай бұрын
Cam you do a short video on how to use Shopnado? I'm not able to pyt tab content.
@megasupernewbie
@megasupernewbie 2 жыл бұрын
are there any vids about shell? I have not had a chance to learn that yet
@Shahan85
@Shahan85 2 жыл бұрын
hi sir, could you please tell that how to Parameter Passing from a content page to tabbed page of between tabbed page?
@GianniDPC
@GianniDPC 2 жыл бұрын
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.
@jimshattuck5285
@jimshattuck5285 12 күн бұрын
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?
@leosouza1520
@leosouza1520 Жыл бұрын
Great video, but how about tabs inside tabs when using Shell navigation (not Flyout) ?
@jdia.
@jdia. 11 ай бұрын
Is there a way to make the bottom tabs navigation by swiping, like the top tabs do?
@aliakseikartashou6166
@aliakseikartashou6166 6 ай бұрын
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?
@OrkSchamane
@OrkSchamane 2 жыл бұрын
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
@user-bz2wy2zc4e
@user-bz2wy2zc4e 5 ай бұрын
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.
@emilywatsonld
@emilywatsonld 6 ай бұрын
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
@94089463 2 жыл бұрын
James: Any news on the Android Emulator for M1 Macs? Thank you
@sentrycod2373
@sentrycod2373 2 жыл бұрын
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.
@tech-man8751
@tech-man8751 2 жыл бұрын
@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?
@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
@SyedTassaduq 6 ай бұрын
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
@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 ?
@kaligulah00000
@kaligulah00000 4 ай бұрын
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?
@apollokulashekar398
@apollokulashekar398 5 ай бұрын
Hei, There is any option to disable the tab swipe in the shell 😢
@eddyj.l4495
@eddyj.l4495 2 жыл бұрын
Will u migrate the coffee App to MAUI?
@sacarymoviesamu
@sacarymoviesamu 2 жыл бұрын
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.
@adrianllamido759
@adrianllamido759 2 жыл бұрын
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 ..
@Otonium
@Otonium 2 жыл бұрын
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
@piyushagunjal3564
@piyushagunjal3564 2 жыл бұрын
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
@user-oh7vc3xg8o
@user-oh7vc3xg8o 8 ай бұрын
Hello,how add badge in tab?
@cahyodwc
@cahyodwc 2 жыл бұрын
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 :)
@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.
@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?
@abba5102
@abba5102 2 жыл бұрын
Very good brother I am xamarin developer.
@amiteshwarsingh6099
@amiteshwarsingh6099 2 жыл бұрын
Just wanted to ask if xamarin will shutdown soon as i was just reading this on google and just came to your channel ,?
@jespinalny
@jespinalny 2 жыл бұрын
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
@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
@zhh174
@zhh174 2 жыл бұрын
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.
@viccotr
@viccotr 2 жыл бұрын
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
@energymarketprice
@energymarketprice 2 жыл бұрын
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).
@igorlimadev
@igorlimadev 2 жыл бұрын
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!!
@williamprogramer4168
@williamprogramer4168 2 жыл бұрын
⭐⭐⭐⭐⭐
@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
@sespark
@sespark Жыл бұрын
Surprised you didn't say "tab in". 😂😂
@ariesdane5876
@ariesdane5876 2 жыл бұрын
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
@thameemansari6644
@thameemansari6644 2 жыл бұрын
Yo James.. first comment..
@jxalexan5641
@jxalexan5641 9 ай бұрын
alg
Советы на всё лето 4 @postworkllc
00:23
История одного вокалиста
Рет қаралды 4,6 МЛН
Задержи дыхание дольше всех!
00:42
Аришнев
Рет қаралды 3,8 МЛН
Sigma girl and soap bubbles by Secret Vlog
00:37
Secret Vlog
Рет қаралды 15 МЛН
Dependency Injection with .NET MAUI Explained! Full Beginner's Guide
19:18
Custom Fonts & Font Icons/Images in Xamarin.Forms
20:18
James Montemagno
Рет қаралды 22 М.
XAML Data Binding and MVVM Basics (.NET MAUI, WPF, UWP, Xamarin.Forms)
19:15
Xamarin.Forms ListView vs. CollectionView - Which to use and why!
20:14
James Montemagno
Рет қаралды 31 М.
.NET MAUI 03T - Shell Navigation: Tabs
10:23
Stephen Hustedde
Рет қаралды 4,5 М.
Real World Production Apps Xamarin.Forms to .NET MAUI Migration Live Stream
2:31:54
C# WPF Tutorial #21 - Styles and ControlTemplates
12:53
Kampa Plays
Рет қаралды 16 М.
Turns out REST APIs weren't the answer (and that's OK!)
10:38
Dylan Beattie
Рет қаралды 129 М.
Intro to Shell in .NET MAUI
12:00
Daniel Hindrikes
Рет қаралды 7 М.
$1 vs $100,000 Slow Motion Camera!
0:44
Hafu Go
Рет қаралды 29 МЛН
Мой новый мега монитор!🤯
1:00
Корнеич
Рет қаралды 1,7 МЛН
Как бесплатно замутить iphone 15 pro max
0:59
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 8 МЛН
Bluetooth connected successfully 💯💯
0:16
Blue ice Comedy
Рет қаралды 1,9 МЛН