.NET MAUI Page Types | DotNet MAUI Navigation | .NET MAUI pages
DotNet MAUI Tutorial Series: • .NET MAUI - Learn DotN...
This is video is part of a series named .NET MAUI Tutorial. In this video, we'll discuss about different types of pages [.NET MAUI Page Types] that we can use in .NET MAUI.
Also we'll see how to navigate between different pages in .NET MAUI [DotNet MAUI Navigation].
The demo project showing in the video is developed in Visual Studio 2022 with .NET 6 & C# (C Sharp).
.NET MAUI Page Types [.NET MAUI pages]:-
1. MAUI Content Page
The .NET Multi-platform App UI (.NET MAUI) ContentPage displays a single view, which is often a layout such as as Grid or StackLayout, and is the most common page type.
ContentPage defines a Content property, of type View, which defines the view that represents the page's content. This property is backed by a BindableProperty object, which means that it can be the target of data bindings, and styled. In addition, ContentPage inherits Title, IconImageSource, BackgroundImageSource, IsBusy, and Padding bindable properties from the Page class.
.NET MAUI apps typically contain multiple pages that derive from ContentPage, and navigation between these pages can be performed.
The child of a ContentPage is typically a layout, such as Grid or StackLayout, with the layout typically containing multiple views. However, the child of the ContentPage can be a view that displays a collection, such as CollectionView.
2. MAUI Navigation Page
The .NET Multi-platform App UI (.NET MAUI) NavigationPage provides a hierarchical navigation experience where you're able to navigate through pages, forwards and backwards, as desired. NavigationPage provides navigation as a last-in, first-out (LIFO) stack of Page objects.
.NET MAUI supports modeless page navigation. A modeless page stays on screen and remains available until you navigate to another page.
A NavigationPage is typically used to navigate through a stack of ContentPage objects. When one page navigates to another, the new page is pushed on the stack and becomes the active page.
When the second page returns back to the first page, a page is popped from the stack, and the new topmost page then becomes active.
A NavigationPage consists of a navigation bar, with the active page being displayed below the navigation bar.
We also included some of the customizations available in MAUI Navigation Bar.
3. MAUI Flyout Page
The .NET Multi-platform App UI (.NET MAUI) FlyoutPage is a page that manages two related pages of information - a flyout page that presents items, and a detail page that presents details about items on the flyout page. Selecting an item on the flyout page will navigate to the corresponding detail page.
To create a flyout page, create a FlyoutPage object and set it's Flyout and Detail properties. The Flyout property should be set to ContentPage object, and the Detail property should be set to a TabbedPage, NavigationPage, or ContentPage object. This will help to ensure a consistent user experience across all platforms.
4. MAUI Tabbed Page
The .NET Multi-platform App UI (.NET MAUI) TabbedPage maintains a collection of children of type Page, only one of which is fully visible at a time. Each child is identified by a series of tabs across the top or bottom of the page. Typically, each child will be a ContentPage and when its tab is selected the page content is displayed.
In a TabbedPage, each Page object is created when the TabbedPage is constructed. This can lead to a poor user experience, particularly if the TabbedPage is the root page of your app. However, .NET MAUI Shell enables pages accessed through a tab bar to be created on demand, in response to navigation.
MAUI Page Navigation:
A page can be navigated to by calling the PushAsync method on the Navigation property of the current page.
The active page can be popped from the navigation stack by pressing the Back button on a device, regardless of whether this is a physical button on the device or an on-screen button. To programmatically return to the previous page, the PopAsync method should be called on the Navigation property of the current page.
.NET MAUI supports modal page navigation. A modal page encourages users to complete a self-contained task that cannot be navigated away from until the task is completed or cancelled.
A page can be modally navigated to by calling the PushModalAsync method on the Navigation property of the current page. To programmatically return to the original page, the PopModalAsync method should be called on the Navigation property of the current page.
Chapters:
0:00 - Intro
0:48 - MAUI Content Page
8:26 - MAUI Navigation Page
13:34 - MAUI Flyout Page
17:40 - MAUI Tabbed Page
#dotnetmaui #netmaui #visualstudio2022 #maui #codingdroplets #dotnet6
Пікірлер: 67
From far the best guide for someone who is really on it's beggining with MAUI, I followed a lot of tutorials but your calm and way of going through things and making a foundation is unbelivable, you really have some skills in tutoring, thank you a lot for the videos mate!
@CodingDroplets
3 ай бұрын
Thank you so much for your kind words! I'm thrilled to hear that you found the tutorial helpful and that it provided a solid foundation for your journey with .NET MAUI. Your feedback means a lot to me, and I'm glad I could assist you in your learning process.
So far, this is the only video I found in the internet that clearly explains the differences between the different navigation in .NET MAUI. Thank you for your effort! Now, I am thinking about applying the same thing using MVVM architecture... I wish you did a video for that soon. Edit: Now I wonder if I can use more than 1 navigation technique for just one app. I want to see the implementation if that was possible
@CodingDroplets
2 ай бұрын
Thank you so much for your feedback! I'm thrilled to hear that you found the tutorial helpful in understanding the navigation techniques in .NET MAUI. I appreciate your suggestion for a video on implementing MVVM architecture with navigation in .NET MAUI, and I'll definitely consider creating one in the future. Regarding your question about using multiple navigation techniques in one app, it's absolutely possible! .NET MAUI offers flexibility in how you navigate between pages, and you can mix and match different navigation techniques based on your app's requirements. Implementing multiple navigation techniques in a single app could be a great topic for a future tutorial.
Very well explained with details and attention grabbing video. Can't wait for the next one!
@CodingDroplets
Жыл бұрын
Thank You! Next video coming soon.
Very helpful. Thank you so much!
@CodingDroplets
25 күн бұрын
I'm glad you found the tutorial helpful! Thank you for watching and for your kind words.
Thanks, bro! Now this is the best video to watch while riding the subway)😅🎉
@CodingDroplets
Жыл бұрын
Thank you for your comment! I'm glad to hear that you found the tutorial helpful and entertaining. It's great to know that the video is serving as a good companion during your subway rides. I hope it makes your commute a little more enjoyable!
Enjoying the series, thank you for the visual text with the explanations. This helps in understanding each topic you touched on. Great teaching ❤. Thank you.
@CodingDroplets
2 ай бұрын
Thank you so much for your feedback! I'm glad you're enjoying the series and finding the visual text helpful. Happy coding! ❤️
Great tutorial, I had purchased a course on Udemy, but you explained better than that paid course. Thanks for tutorial:)
@CodingDroplets
Жыл бұрын
Thank you for your feedback! I'm glad to hear that.
@col89808880809
Жыл бұрын
I agree with statement because I did the same.
@ReadLineAcademy
9 ай бұрын
please responce me brother ,thanks a lot in advance
This was super clear, thanks for the video!
@CodingDroplets
5 ай бұрын
You're very welcome! I'm thrilled to hear that you found the tutorial clear and helpful.
Thank you so much. This is a very helpful video. Keep it up, brother.
@CodingDroplets
7 ай бұрын
You're very welcome! Glad to hear that you found the video helpful.
⭐ Join Us on Patreon: www.patreon.com/CodingDroplets .NET MAUI Tutorial Series: kzread.info/dash/bejne/gWdhzKiuiNSng6g.html
@rishitfamilyandfriends
Жыл бұрын
Awesome and well explained 👍🏻 In udemy it was difficult now you made it more easy. When I worked in WPF it was complicated, maui is easy.
@CodingDroplets
Жыл бұрын
Thank you for your feedback! I'm glad to hear that you found the tutorial helpful and that it made working with MAUI easier for you.
Excellent, wonderful, useful, and extremely helpful tutorial. It would've been just better if you could have explained the FlyoutPage a bit more. Apart from this, every single topic have been covered in detailed
@CodingDroplets
8 ай бұрын
Thank you for the positive feedback! I appreciate your suggestion about covering FlyoutPage in more detail. I'll keep that in mind for future tutorials.
Excellent tutorial, thank you for the great work
@CodingDroplets
9 ай бұрын
Thank you so much for your kind words! Glad to hear that.
Outstanding! Thank you.
@CodingDroplets
10 күн бұрын
You're very welcome!
Really well explained, thanks for the tutorial
@CodingDroplets
Жыл бұрын
You are welcome!
Fantastic work, thank you!👌
@CodingDroplets
11 ай бұрын
Thank you so much for your kind words and feedback! I'm glad to hear that you liked it. Your encouragement motivates me to continue creating more helpful and informative content.
You are an excellent teacher sir!
@CodingDroplets
Жыл бұрын
Thank you so much for your kind words! I'm glad you found the tutorial helpful and enjoyed my teaching style. It's my goal to make the learning experience enjoyable and understandable for everyone.
Thank you so much for this video. This video helped me a lottttt
@CodingDroplets
11 ай бұрын
You're very welcome! Thank you for watching the tutorial and for your kind feedback. Glad to hear that the video was helpful to you.
Excelent content, thaks!
@CodingDroplets
11 ай бұрын
Thank You!
Useful
@CodingDroplets
6 ай бұрын
Glad to hear that
During World War II, the Allies provided air support to soldiers fighting on the ground. The soldiers referred to air support as "Angels On Our Shoulders". That is what Coding Droplets is to coders: "Angels On Our Shoulders".
@CodingDroplets
Жыл бұрын
Thank you so much for your kind words and the meaningful analogy! We strive to create valuable content and tutorials that help developers enhance their skills and overcome challenges. Your comment is truly appreciated and serves as a motivation to continue delivering helpful and insightful content.
Another finished tutorial, Thanks again for your valuable knowledge!!! One question, I´m using Mac, so when I emulate iPhone or MacCatalyst, the icons appear huge, is there any way to show these icons smaller?
@CodingDroplets
Жыл бұрын
You mean the icons in tabbed page?
@xacompany
Жыл бұрын
@@CodingDroplets exactly
very very good
@CodingDroplets
9 ай бұрын
Thank You!
How to handle navigation in non UI classes, i have to use navigation inside the class which is inside andriod folder..
Please explanation how to use Community toolkit gor MAUI . Thanks for the video
@CodingDroplets
Жыл бұрын
Thank you for your comment! I am glad to hear that you are interested in learning more about using the Community Toolkit for MAUI. In the upcoming videos, we will definitely cover how to use the Community Toolkit and include practical examples to demonstrate its capabilities. Stay tuned.
@akk5830
Жыл бұрын
@@CodingDroplets cool thanks
Hello teacher, it seems like we are missing lessons on Multi Windows and FloatingWindows on Android devices. I hope you can produce a video that goes into more detail. I have read the documentation on Microsoft but it is still very difficult to understand for a beginner like me.
@CodingDroplets
5 ай бұрын
Hello! Thank you for reaching out, and I appreciate your feedback. I'll definitely consider creating a video that goes into more detail to help clarify these concepts and provide a more accessible explanation.
can u please tell how to visible the app bar name which of our choice in the video it is not there for flyout page
Can we open windows in a parent? or tabs like MDI Parent and MDI Child or something like tabs which are there in WPF? if yes any ref link?
@CodingDroplets
Жыл бұрын
Thank you for your comment! In this video, we focused on explaining the TabbedPage in .NET MAUI, which allows you to create a tabbed interface for managing multiple pages. It provides a convenient way to organize and navigate between different sections of your application. If you were referring to the tabbed interface in the context of the video, then yes, we covered the TabbedPage and its usage. However, if you were specifically looking for information on opening windows or implementing a more advanced tabbed interface like MDI (Multiple Document Interface) found in WPF, it's important to note that it might require additional customization and platform-specific implementation.
what is the most current way to open pages?? Navigation.PushAsync(new HomePage()) or Shell.Current.GoToAsync(nameof(HomePage))
@CodingDroplets
Жыл бұрын
Thank you for watching the video and for your question about the most current way to open pages. Both Navigation.PushAsync(new HomePage()) and Shell.Current.GoToAsync(nameof(HomePage)) are valid ways to navigate to a page in .NET MAUI. Navigation.PushAsync(new HomePage()) is the traditional way of navigating between pages in Xamarin and continues to work in .NET MAUI. It pushes the HomePage onto the navigation stack and moves the user to that page. Shell.Current.GoToAsync(nameof(HomePage)) is a newer way of navigating in .NET MAUI, introduced with the Shell navigation pattern. It uses a URI-like syntax to specify the page to navigate to and provides more flexibility in terms of navigation and page hierarchy. Both options have their benefits and it ultimately comes down to personal preference and the specific needs of your application.
finally i found what im looking for.
@CodingDroplets
Жыл бұрын
Hello! Thank you for your comment. I'm glad to hear that you found what you were looking for in my .NET MAUI Pages Tutorial video. It's always great to hear positive feedback from viewers, and I'm happy to have been able to help you.
good evening i am a .net maui developer and looking for intership/full time job anyone can help me anyway?????Please 🙂
@CodingDroplets
9 ай бұрын
Best of luck with your job search, and I hope you find exciting opportunities in the world of .NET MAUI! 🙂
While this video is a very good, there's no explanation for navigating to a different page when the user clicks on an item in on the flyoutpage.flyout. Help appreciated.
@CodingDroplets
Жыл бұрын
Thank you for your comment and feedback! I'm glad to hear that you found the ".NET MAUI Pages" tutorial helpful. In the same video, I did cover the topic of navigation and demonstrated how to navigate to different pages. However, I understand that you were specifically looking for an example of navigating to a different page when the user clicks on an item in the flyout menu. I apologize for not including that specific scenario in the tutorial. In the video, I focused on demonstrating navigation using buttons placed inside a content page. I explained how to handle button click events and perform navigation based on user interactions. While the flyout menu scenario was not explicitly covered, the principles of navigation remain the same.
@nmarks
Жыл бұрын
@@CodingDroplets Thanks.
@CodingDroplets
Жыл бұрын
Welcome