Hi. Welcome to CodingDroplets and thank you for
watching this video. This is the second video of .Net MAUI tutorial series. You can find the playlist
link in the video description. In this video, I'll walk you through the different types of pages
that we can use in dotnet MAUI. We are going to see more about Content Page, Navigation Page,
Flyout Page, and Tabbed Page. So let's get started. Let me create a new project to show different
types of pages in .NET MAUI. This project will be available in our GitHub repository. As
done in the previous video, I'm selecting .Net MAUI App project template. Let the project
name be MAUI Pages. Then the framework we are using is dotnet6. Let’s create the project. So the
project is created now. Let me open app.xaml.cs. Here you can see the app shell is assigned as the
main page. I'm just removing this MainPage.xaml and AppShell.xaml. We'll be discussing about
AppShell later. So now we can just comment this out. Now let's create a folder named Pages. We'll
be keeping all our Pages inside this folder. So let me add a new content page inside
the pages folder. Content page will be the mostly used page in your application.
Let the name be DemoContentPage1. So first I'll show you how to assign the main page
of our dotnet MAUI app. I'm going to assign this newly created content page as the main page of our
application. For that just open app.xaml.cs. Then we can provide the main page equals demo content
page one. Sorry, I forgot to provide new here. So main page equals new demo content page 1. Now let's
run it and see whether the main page is assigned or not. Here you can see a welcome message at
the top. Let's modify the message content in the demo content page 1. I am changing the label
text to "This is content page 1". Let's also make the font size bigger. I'm also making it bold. it
is better to provide some margin as well. Let the text color be white. Now you can see the changes in
the app. Let me also assign some background color for the content page. We can assign the color
using hex color codes. Let's see in the running application. So everything is fine. Let me also
place a button below the label. The button text is "Click Me" and also assigning margin. Now you
can see the button here. B nothing will happen when we click that as we haven't implemented the
click event. Now let's run this in Android emulator. The design is pretty much same in
Android as well. So now we can create multiple content pages and I'll show you
how we can navigate between content pages. Let me create another content page
with the name demo content page 2. I’m just copying the same contents from Demo
Content Page 1 to Demo Content Page 2. Now we can just assign a different
background color. Also changing the label text. Now in content page 1, I'm changing the
button text to open content page 2. Also we can assign a name for the button.
Let it be content page 2 button. Now let's create a click event for this button. You can
see the created method in the content page class. Here we are implementing the method
to open content page 2. Navigation dot. there are two methods - PushAsync
and PushModalAsync. Now we are using PushModalAsync. But I'll
be showing you the PushAsync soon. Now here, we can provide an object of content page
2. Let's run the application and test it now. The application is loaded. While clicking the button,
you can see it is opening content page 2. We can click the back button to close the active content
page. Again I am opening and closing content page 2. Now in content page 2, I am providing the button
name as close button. So we need to close the content page 2 on button click instead of tapping
the back button. Let's create the click event now. Now here you might be thinking of the same way
what we have implemented in content page one. Like navigation dot PushModalAsync, then providing
the object of content page 1 as parameter. That is not the way to do it. I'll show you how it works.
One more thing I need to mention is, we can make this method async as the PushModalAsync is an
awaitable method. Let's also make the content page 1 method async. Now let's run the application and
I'll show you the problem with PushModalAsync in content page 2. The app is loaded now. Let me
click on the button to open content page 2. Now let's click the button to close content page 2.
So you can see the content page 1 is showing. Now again if I am clicking the button it will
show content page 2. It seems like the things are working fine. But it is not. Let's just try to
close the active content page using back button. Now you can see it is showing content page 2.
Again if I'm clicking the back button, now it is showing content page one. Now content page two
again. Now content page one and finally all the pages closed. Basically what happens here is
when we call PushModalAsync method, the app is creating a new instance of the content page
each time and loading it. So from content page 2 when we are clicking the close button, it is not
actually closing the content page. Instead, it is creating a new instance of content page 1 and
loading it again. To really close a content page, we must use PopModalAsync method and there is no need to
provide any parameters. This method will just close the current content page. Let's try it now. Now I
am clicking this button to open content page 2. Then while clicking the close button it is going back
to content page one. Let me do it multiple times. Now let me click the back button and
you can see there are no other open content pages. Hope you clear with
PushModalAsync and PopModalAsync. Let me create one more content page
with the name, demo content page 3. We can just copy the page contents from existing one. Then assigning a different background color. Let's change the button text
in content page 2 to "Close Me". Now let's create one more button to open content
page 3. Let the name be content page 3 button and creating a click event. Here we can open
content page 3 using PushModalAsync method. Now in content page 3, let's
just place a close button. In the click event, we can use
the same PopModalAsync method. So let's try it. First I'm opening content page
two. Sorry, I forgot to change the button text. The label text in content page 3 is also
not changed. Now I am opening content page 3 by clicking the button. Close Me button should
close now. I think some mistake happened. Let me check the button click event. Sorry it should
be PopModalAsync. Just clicking hot reload to apply the changes. Now the close
me button closed content page three. This close me button will close content page 2
as well. I am just doing it multiple times. Finally the back button from content
page one closed all pages. So this is how what we need. Next we are going to see
about navigation page in .NET MAUI. Navigation page provides a hierarchical
navigation experience where you are able to navigate through pages, forwards and
backwards, as desired. Navigation page provides navigation as a last in
first out stack of page objects. I'll move the previous content pages to
another folder named content Pages demo. Now we can create another
folder named nav page demo. Inside this folder, I'm creating a new content
page with the name nav content page one. Then creating another content page
with the name nav content page 2. Let's create one more content page
with the name nav content page 3. Let me copy the page contents
from our previous content page. Also we can copy the background color. Let's change
the name of the button and create the click event. Same way I'm copying contents
s for other pages as well. So all the three new pages are ready. Next let
me open app.xaml.cs and change the main page. This time, I'm creating an object
of navigation page and assigning the new nav content page 1 object as the root page. Let me just run the application and I'll show
you the difference. Here you can see a header navigation bar which is showing the title.
Let's implement the button click events now. In nav content page one, we need to open nav
content page 2 while clicking this button. So let me provide navigation dot. This time I'm
using PushAsync instead of PushModalAsync. Then the object of the content page to be
navigated. Let me also make the method async. Next in nav content page 2, we can provide the same
PushAsync method for opening nav content page 3. Then for the close button, I'm providing navigation
dot PopAsync method instead of PopModalAsync. Finally, in nav content page 3, we can provide
the same PopAsync method for the close button. So now let's run the application
and I'll show you the difference. Currently we are in the root page, nav
content page one. I'm opening content page 2. Now in the navigation bar we can see a back button
which will also close the current content page. Let's try again. This time I am closing the
content page using the close button and that is also working fine. Let's navigate to content
page 3 now. The navigation is happening perfectly. Finally, the back button in the root
page will close it. Let me also show you how we can modify the navigation
bar. I'm just creating an object of navigation page in app.xaml.cs class. Now
assigning this object as the main page. Just before main page, I'm just assigning
some properties of this navigation page object. Let's assign a custom bar background color. Now Let’s see it in emulator. It
is showing in a brick color which we have assigned. Let me also assign bar text color. Now you can see the text color is showing in
black. Hope you're clear with navigation page. Next we are going to see about flyout page. .NET Maui flyout page 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. So first let's create a folder named flyout page demo. Then adding
a new content page with the name demo flyout page. In order to make this a flyout page, we need
to make some modifications. First thing is changing the content page tag to flyout page.
Then inherit the page class from flyout page. Let's clear the page contents now
and provide the elements needed. The first element is FlyoutPage.Flyout
and the second one is FlyoutPage.Detail. Now inside FlyoutPage.Flyout,
I'm creating a Content page. We must provide a title as well. Then let me
assign a background color. So that it will be easier to identify. Inside the content page we
can just place a vertical stack layout with a label. Let the label text be "This is FlyoutPage.Flyout"
Then aligning horizontally to the center. Let's assign margin as well. Now inside FlyoutPage.Detail,
first let's place a NavigationPage. For a navigation page, we must pass the root page
as a parameter. We have already done that while discussing about navigation page. To do the same
from XAML, we can use x:arguments attribute. So inside X:arguments, I'm providing a Content page
with a different background color. Then inside that we can just create another vertical
stack layout with a label in it. The label text is "This is FlyoutPage.Detail". That's
it needed. Now let's make this as the main page. Now let's run this and I'll show you how the
Flyout Page is. In the navigation bar, you can see the button for flyout. The text is not
visible clearly. So let me make it bigger. Now we can see the text clearly. So this area what
we are seeing is the FlyoutPage.Detail. If we click the flyout button it will open the FlyoutPage.Flyout
content. This is how flyout page works. Let's see how it works in Windows machine. In Windows machine, it is having a split
behavior. The FlyoutPage.Flyout is getting displayed on the left side.
We can really change this behavior. For that, we can assign the FlyoutLayoutBehavior
property of the flyout page. Let me assign it as popover. Now you can see that
it is having the same behavior of Android app. Split behavior is the same one which
we have seen before in Windows machine. Now I'll show you how will be
the split behavior in Android. In Android still you can see the same popover
behavior. The value of the FlyoutLayoutBehavior property only affects apps running on tablets
or the desktop. Apps running on phones always have the Popover behavior. We also have two
more behaviors - SplitOnLandscape & SplitOnPortrait. Those are for assigning the split
behavior based on the orientation. Just test those two in your project and let me know your
thoughts in comments. Now let's move to Tabbed pages. .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 content page and when its tab is selected the page content is displayed. So
let's create a new folder named tabbed page demo. Then inside that I am adding a new
content page with the name demo tabbed page. Here we need to change the content page tag to
tabbed page and inherit Tabbed Page in the class. Now let's implement the page contents. First element
is a content page with title and a label inside it. Now let me copy paste two more content pages.
Then changing the title and the label text. So now we have three content pages – Home, Cart, and Profile. Next, let's assign this tabbed
page as the main page and run it. Now we can see there are three different tabs in
the app, and we can navigate by clicking each tab. Let me make the label text
bigger. It is hard to see the text. Hope you can see the text clearly now. Next, let me show you how we can add icons for the
tabs. I'm just copying three different images to the images folder inside the resources folder.
Then we can assign the image file name in the IconImageSource property of the content
page. Let me assign it for other tabs as well. Let's run the application and see how it is
getting displayed. We are unable to see the images because both images and the background are white
in color. So let's assign a different color. There are two properties for assigning colors.
SelectedTabColor is for the active Tab and UnselectedTabColor is for the remaining tabs. You can see now
the selected tab is in red color and the other tabs are in blue. We can also assign the bar
background color. Let me assign some color for it. I'm also assigning a different color for bar text. This is how it works. Let's see how it looks in Windows machine. In Windows this is how it is getting displayed. It
is not looking good. So let me make some changes. Now we are able to see the tabs clearly. So
hope you're clear with all the different types of DotNet MAUI pages. We'll be
going in detail in an upcoming session. So that's it for this video. See
you all in the next video. Thank You!
