Overview
Here in this post, we look into some simple examples of MAUI applications. For a comprehensive introduction to MAUI application development see the following link:
https://dotnet.microsoft.com/en-us/learn/maui
Example: Hello World
Here are the steps which are required to create an out of the box MAUI based “Hello World” application:
Start VS 2022 and select the option [Create new project]. Select the dropdown [MAUI] on the top right to filter out non-MAUI options. Select the option [.NET MAUI App]
![](http://www.iteacorner.com/wp-content/uploads/2023/02/image-3.png)
Enter a name for the project:
![](http://www.iteacorner.com/wp-content/uploads/2023/02/image-4.png)
Select .NET 6.0:
![](http://www.iteacorner.com/wp-content/uploads/2023/02/image-5-1024x618.png)
This will automatically create the out-of-the-box “Hello World” example. Start the application using the [Winodw Machine] option:
![](http://www.iteacorner.com/wp-content/uploads/2023/02/image-6.png)
Example: Multiple pages
Create an MAUI out-of-the-box application (see Hello World example). This will result in an application with one page, which is defined by MainPage.xaml
![](http://www.iteacorner.com/wp-content/uploads/2023/02/image-7.png)
Because we want to demonstrate how to create an application with multiple pages, we add a second page, for example, SecondPage.xaml.
SecondPage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HelloWorldExample.SecondPage"
Title="SecondPage">
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Label
Text="Second page"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ContentPage>
Now we have two pages and have to find a way to switch between these two pages. To achieve that we use the MAUI concept of the shell. You can read more about that here:
https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/?view=net-maui-6.0
After implementing this shell mechanism we will have a drop-down menu on the top left side of the screen allowing us to select the page we want to open (see screenshot further below).
To implement this shell drop-down menu update the AppShell.xaml file as follows:
AppShell.xaml:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="HelloWorldExample.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloWorldExample"
Shell.FlyoutBehavior="Flyout">
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
<ShellContent
Title="SecondPage"
ContentTemplate="{DataTemplate local:SecondPage}"
Route="SecondPage" />
</Shell>
After starting the application we can see the shell menu on the top left which allows us to switch between the two pages:
![](http://www.iteacorner.com/wp-content/uploads/2023/02/image-8.png)
to be completed