.NET Maui Apps | How to create Flyout, Tab Bar and Tabs in Maui Mobile and Desktop applications.
ฝัง
- เผยแพร่เมื่อ 22 ต.ค. 2024
- 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
Maui Application Development Playlist | th-cam.com/play/PL285LgYq_FoLDWoWRj40u6INW7oLERCuW.html
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
merci
Thank you, I could not get better videos anywhere
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. 😜🤪🤩
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.
Am glad you liked it 😃😆
Absolutely amazing tutorial. Perfect. Thank you
Thanks 😊
Hi . Is there a way to have a flyout with several options but and only one option show two options on Tabbar? Thanks
Reply
this way very helpful and clear. thank you
I am glad you enjoyed it.
You've been extremely useful and helpful by providing such a great tutorial. Keep up the great work 😊
Thanks 😀 More for you.. Check the playlist.🥰
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!
😃, Sorry I don’t get you well, please come again. I guess you know how to set flyout and tab right ?
@@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?
@alexsoft999 you can add the flyout dynamically during runtime. Will see if I can create a video on that later
@@Netcode-Hub Thank you, so do you think, that it is impossible to do in AppShell.xaml markup?
Can’t say no, give a try and let’s see
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
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?
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?
If I understand you well , you want add about , contact … to the flyout (sidebar) not the tab section right ?
@@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.
@@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.
@@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.
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.
How do I set up the Shell.ItemTemplate with a Font Icon instead of an image?
I think Route attribute in your ShellContent is odd. Correct?
Have you recently discovered any different one? You can share 😃
can you show flyout contents while also having tabpage?
Yes 👍
what If you need to show submenu in Flyout ? how can I do that ?
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
Try doing it in Shell
What programming language is this code written in? please explain :)
Thanks for your comment 😊
This app was written in one of the best and most trending languages. Guess what! C# & Xaml for mobile apps
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?
Will conduct research on it
Will conduct research on that
@@Netcode-Hub thank you!
@RickardApps 😃
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.
Bro can i design the bottom Tab to any design and perfect animation ???
Yes you can
thanks sir
Welcome 🤗
A question. Can FlyoutItems be nested?
How do you want it to be nested ?
@@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.
Help, how to position the menu button in the upper right corner?
Use xaml to move to any corner you want
is there a way easy for create Floating Windows Android on MAUI?
Unless customized
@@Netcode-Hub Yes, can you make a video Tutorial for this? I and more People really need that!
Ohk sir , will plan that,
Thnaks !!!!!
Am glad 😀 you like it
it seems tabbar works on only main page in android platform
Will confirm
How to Implement Tabbar Badge tabs using .Net MAUI without shell)))
This is a half part of video where is the remaining part??
Dropping soon 🔜
Your screenshot shots a nice flyout but then your code is a basic one :(
😊 sorry , customization need to be done 😃
Do you have a commununity on whasapp or telegram ?
Team and TH-cam