.NET MAUI Page Types | DotNet MAUI Navigation | .NET MAUI pages

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

[SkyperX]

Best content for a first timer .net maui
I couldn't understand anything from others tagging videos as "BEGGINER" but this one explain most of my questions.

Thank you!

[mulsane]

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!

[ガリンガラオニンヨ]

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

[teftele]

Thanks, bro! Now this is the best video to watch while riding the subway)😅🎉

[mahsaldotcom]

Great tutorial, I had purchased a course on Udemy, but you explained better than that paid course. Thanks for tutorial:)

[WhoIm]

Very well explained with details and attention grabbing video. Can't wait for the next one!

[PouIetDeKFC]

This was super clear, thanks for the video!

[kgomotsodithebe]

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.

[zakirdev]

Thank you so much. This is a very helpful video. Keep it up, brother.

[kopilkaiser]

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

[ahmedosama]

Excellent tutorial, thank you for the great work

[amelyaazmin]

Thank you so much for this video. This video helped me a

[xacompany]

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?

[achrafgarai]

Really well explained, thanks for the tutorial

[akk]

Please explanation how to use Community toolkit gor MAUI . Thanks for the video

[hungchip]

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.

[nmarks]

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".

[JilaniShaikh]

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?

[mugileeshwaranj.s]

How to handle navigation in non UI classes, i have to use navigation inside the class which is inside andriod folder..

[lcppb]

what is the most current way to open pages??
Navigation.PushAsync(new HomePage()) or