.NET MAUI – Forget Me Not – Part 2

In Part 1 we created the skeleton of Forget Me Not (and explained what it is). Here in Part 2 we’ll add an about page. This is so easy that this will be a short post.

Create the page

Creating the page is almost indistinguishable from doing so in Xamarin.Forms. Here’s the XAML for the page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="ForgetMeNot.About"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <VerticalStackLayout Margin="10" Spacing="10">
        <HorizontalStackLayout Spacing="10">
            <Image HeightRequest="64" Source="flower.png" />
            <Label
                FontAttributes="Bold"
                FontSize="22"
                Text="About this app"
                VerticalOptions="End" />
            <Label
                FontSize="22"
                Text="v1.0"
                VerticalOptions="End" />
        </HorizontalStackLayout>

        <Label Text="This app is written in XAML and C# with .NET MAUI by Jesse Liberty and Rodrigo Juarez. Concept and original design by Robin Liberty" />
    </VerticalStackLayout>
</ContentPage>

We put a picture of a forget-me-not flower next to the title. Below that is the version and the acknowledgements. We’ll want to be able to navigate to the About page using a tab at the bottom of the page, so let’s turn to AppShell.xaml and ad the tab there:

<TabBar>
    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Icon="icon_notes" />

    <ShellContent
        Title="About"
        ContentTemplate="{DataTemplate local:About}"
        Icon="icon_about" />

Next we open AppShell.xaml.cs and add the route

public AppShell()
{
	InitializeComponent();


    Routing.RegisterRoute("about", typeof(About));

}

That’s it! We created the page, created the tab and told MAUI where to find the page by registering the route.