.NET MAUI examples

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]

Enter a name for the project:

Select .NET 6.0:

This will automatically create the out-of-the-box “Hello World” example. Start the application using the [Winodw Machine] option:

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

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:

to be completed

admin

Uncategorized