.NET Maui Apps | How to create Flyout, Tab Bar and Tabs in Maui Mobile and Desktop applications.

Рет қаралды 36,488

Күн бұрын

Are you looking for Coding Mentoring? If you're seeking personalized guidance and mentoring for your coding journey, then get in touch!. I offer expert guidance and support to help you level up your programming skills. Contact me on business.netcodehub@gmail.com to book a session and accelerate your coding career.
Hello everyone, welcome, in this video, I will facilitate on how to create Flyout, Tab Bar and Tabs in Maui Mobile and Desktop applications.
Thanks so much for watching 🙌🏾 LIKE 👍, SUBSCRIBE & turn on Notifications 🔔 to know when I upload new videos EVERYDAY!
/*You can buy a coffee for me*/ ☕️
www.buymeacoff...
/*Documentation*/
Maui Application Development Playlist | • .NET MAUI APPS
Follow @Netcode-Hub on:
netcodehub.blo...
github.com/Net...
/ netcodehub | Twitter
/ netcodehub | Facebook
/ netcode-hub-90b188258 | LinkedIn
Related Videos:
• .NET Maui Apps | How t... | Create Flyout, Tab Bars and Tabs in Maui Mobile and Desktop applications.
• .NET Maui Apps | How t... | Using Toast and Snack Bar in . NET MAUI Mobile and Desktop applications
• .NET Maui Apps | How t... | Using Popups -DisplayAlert, DisplayActionSheet and DisplayPromptAsync in MAUI apps.
• .NET Maui Apps | How t... | Style Mobile and Desktops applications using XAML In NET MAUI.
• .NET Maui Apps | How t... | How to use Font Awesome Icons in NET MAUI Mobile and Desktop applications.
• .NET Maui Apps | Addin... | Adding App Icon to .NET MAUI Project.
• .NET Maui Apps | Enhan... | Enhance Mobile App with Swipe View to make it user friendly.
• .NET Maui Apps | Right... | Right to Left Flow Direction In .NET MAUI Applications.
• .NET Maui Apps | Imple... | Implementing Lottie Animation In .NET MAUI Applications.
• .NET Maui Apps | Add S... | Add Splash Screen Image to .NET MAUI project.
• .NET Maui Apps | Navig... | Navigate through Content Pages using Navigation Service in Android and Desktop apps.
• .NET Maui Apps | Add C... | Add Context Menu to Desktop Application to enhance its appearance and accessibility.
• .NET Maui Apps | Integ... | Integrating Google Map with API Key in Android application in MAUI.
• .NET Maui Apps | How T... | How to Create Google Maps API KEY For Free for Android, IOS and Desktop Application
• .NET Maui Apps | Publi... | Publish Android Application using PowerShell CLI with just 2 lines of Statements.
• .NET Maui Apps | Using... | Using Map to get locations in Mobile and Desktop Applications
• .NET Maui Apps | How t... | How to use Auto Complete View in Mobile and Desktop Applications
• .NET Maui Apps | How t... | How to publish Android APK and Window MSIX applications locally in Visual Studio
• .NET Maui Apps | Gener... | Generate Barcode and QR Code in Maui Mobile and Desktop Apps
• .NET Maui Apps | How t... | How to Create, Use and Share .NET MAUI Class Library to different projects.
• .NET Maui Apps | Consu... | Consume API in Mobile and Desktop App using MVVM Architecture |Login Web API
• .NET Maui Apps | Consu... | Consume Login API in Mobile and Desktop App using Event Driven Architecture
• .NET Maui Apps | Creat... | Creating Contact Application for mobile and Desktop using Event-Driven Architecture
• .NET Maui Apps | Build... | Building to Do Mobile and Desktop App in MAUI

Пікірлер: 70

@Netcode-Hub Жыл бұрын

Maui Application Development Playlist | kzbin.info/aero/PL285LgYq_FoLDWoWRj40u6INW7oLERCuW Grab code from GitHub @ | github.com/Netcode-Hub/Using-Navigation-Service-in-MAUI Follow @Netcode-Hub on: netcodehub.blogspot.com | You can read more articles on Application Development and Debugging Issues github.com/Netcode-Hub | Grab projects source code from here. twitter.com/NetcodeHub | Twitter web.facebook.com/NetcodeHub | Facebook www.linkedin.com/in/netcode-hub-90b188258/ | LinkedIn

@dodoyeoissoufabembou2984 Ай бұрын

merci

@kayun-chan-pit8642 10 ай бұрын

Your contents are good and clear. It's very concise tutorial. I love it very much. However, to learn and get knowledge well from your tutorial, I have to stop and type by myself often and save them in separated project. Thank you very much for your share to the world. It's really really useful. Great.

@Netcode-Hub 10 ай бұрын

Am glad you liked it 😃😆

@Satharn 9 ай бұрын

Thank you, I could not get better videos anywhere

@Netcode-Hub 9 ай бұрын

It's my pleasure to serve you with this. I have many videos on Blazor, Maui and Maui Blazor Hybrid. Just check the playlist whiles you subscribe as well. 😜🤪🤩

@kopilkaiser8991 10 ай бұрын

You've been extremely useful and helpful by providing such a great tutorial. Keep up the great work 😊

@Netcode-Hub 10 ай бұрын

Thanks 😀 More for you.. Check the playlist.🥰

@RickardApps 5 ай бұрын

Absolutely amazing tutorial. Perfect. Thank you

@Netcode-Hub 5 ай бұрын

Thanks 😊

@user-zi3xt3gm5s 7 ай бұрын

this way very helpful and clear. thank you

@Netcode-Hub 7 ай бұрын

I am glad you enjoyed it.

@oktjona 8 ай бұрын

how can you add tabbar on different pages other than the mainpage only so that if i navigate to nextpage i can get the tabbars

@ManieVerster Ай бұрын

It looks like to me that these menus do not like databound pages. Am I right and if I am wrong, how can I do this?

@annotations888 Ай бұрын

How do I set up the Shell.ItemTemplate with a Font Icon instead of an image?

@KinGhost_ 10 ай бұрын

Thnaks !!!!!

@Netcode-Hub 10 ай бұрын

Am glad 😀 you like it

@stephenyork7318 9 ай бұрын

I appreciate that you have flyouts and tabs at the bottom going, but it only works if your tab items match the flyouts. What I want to do is having other less used pages appear in the Flyout like About, Settings, Data Synch, but on the tab bar have +, Calendar, Entries. As soon as I click an item in the Flyout the tab bar changes to the items in the Flyout and I can never return to the initial set. Do you know how to mix them?

@Netcode-Hub 9 ай бұрын

If I understand you well , you want add about , contact … to the flyout (sidebar) not the tab section right ?

@stephenyork7318 9 ай бұрын

@@Netcode-Hub Any real world app that has a Flyout doesn't just have a copy of all the tab items in the Flyout. I want the 3 main actions that will be used on the tab bar and all other actions in the Flyout.

@Netcode-Hub 9 ай бұрын

@@stephenyork7318 flyout item and tab items content must be different . I understand sir . You can set flyout items and tab items with different content pages. Wanted to know if thus what you want to do If this is the case then then you can groups your tabs and flyout items in the shell using Flyout respectively.

@stephenyork7318 9 ай бұрын

@@Netcode-Hub My problem is that if I click on a flyout item, I'd still expect the tabs at the bottom to stah the same, not just replicate the items in the flyout. The main thin is once I've navigate to a flyout page then I can't get back to the main page. But it's also just weird to have a 10 item flyout and then see only 4 ot them on the tab bar. None of them should be there. I'm thinking it's the wrong model anyway, maybe a modal page with a back button is the way to go. I dunno. I've tried using a TabbedPage but when you put your items on ala then you can't use dependency injected services into the AddEntryPage ctor unless you create a TypeConverter. At that point my eyes started glazing over. Maui is so tedious, use dep injection with ease, except here. :( With TabbedPage though I really don't know how to get a Flyout going yet. Hence I went looking and found your tutorial here.

@stephenyork7318 9 ай бұрын

Ok, I found some maui samples on GitHub. This is how to achieve what I want: So Flyout Two will have its own tab bar.

@alexsoft999 3 ай бұрын

Thanks for video! Could you please explain how I can keep one part of menu options in Flyout panel and the others in Tabs independently. The current code doesn't allow to do it!

@Netcode-Hub 3 ай бұрын

😃, Sorry I don’t get you well, please come again. I guess you know how to set flyout and tab right ?

@alexsoft999 3 ай бұрын

@@Netcode-Hub Yes sir, I can run them separately, it works well. Now I want run them together to extend my menu system for keeping some menu items in the Flyout panel, the other part in Tab Bar. I set Shell.FlyoutBehavior="Flyout" Shell.TabBarIsVisible="True". But it doesn't work, only Flyout option are shown in the flyout and in the tab using your code. Any idea?

@Netcode-Hub 3 ай бұрын

@alexsoft999 you can add the flyout dynamically during runtime. Will see if I can create a video on that later

@alexsoft999 3 ай бұрын

@@Netcode-Hub Thank you, so do you think, that it is impossible to do in AppShell.xaml markup?

@Netcode-Hub 3 ай бұрын

Can’t say no, give a try and let’s see

@alexsoft999 3 ай бұрын

I think Route attribute in your ShellContent is odd. Correct?

@Netcode-Hub 3 ай бұрын

Have you recently discovered any different one? You can share 😃

@EmmanuelMalana-z4j 12 күн бұрын

can you show flyout contents while also having tabpage?

@Netcode-Hub 11 күн бұрын

Yes 👍

@batsuhbaysaa7171 9 ай бұрын

What programming language is this code written in? please explain :)

@Netcode-Hub 9 ай бұрын

Thanks for your comment 😊 This app was written in one of the best and most trending languages. Guess what! C# & Xaml for mobile apps

@RickardApps 5 ай бұрын

Do you know how to make an app that works in the background in MAUI? I don't know what these functionalities are called. I'd like if possible to have a button in the navigation bar that turns a service on and off. I have this blue light filter app that works just like that. If you pull down the curtain you can see the app active but it doesn't have a window. How does one do that?

@Netcode-Hub 5 ай бұрын

Will conduct research on it

@Netcode-Hub 5 ай бұрын

Will conduct research on that

@RickardApps 5 ай бұрын

@@Netcode-Hub thank you!

@Netcode-Hub 5 ай бұрын

@RickardApps 😃

@ErickJimenez-kb4yg 5 ай бұрын

You mean thread handling in C#, it also applies to other languages such as Java or Python, research about that and then ask your question again.

@chiragshah1426 6 ай бұрын

How do we change background and selected color of the menu item under tabbar. Example: under services tab, you have location, contactus... whant that menu to have different background color

@Netcode-Hub 6 ай бұрын

Try doing it in Shell

@ishakmco3186 23 күн бұрын

Bro can i design the bottom Tab to any design and perfect animation ???

@Netcode-Hub 20 күн бұрын

Yes you can

@user-ow7li6hs4s 6 ай бұрын

thanks sir

@Netcode-Hub 6 ай бұрын

Welcome 🤗

@user-xs6gp9pc8y 6 ай бұрын

Help, how to position the menu button in the upper right corner?

@Netcode-Hub 6 ай бұрын

Use xaml to move to any corner you want

@vargasdev 5 ай бұрын

A question. Can FlyoutItems be nested?

@Netcode-Hub 5 ай бұрын

How do you want it to be nested ?

@vargasdev 5 ай бұрын

@@Netcode-Hub Instead using tabs, when user taps a FlyoutItem, show some kind a subItem, expanding and collapsing. I don't know if I explain well myself.