DotNet MAUI notes

XAML Page Types

ContentPage

<?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="MauiApp1.Restaurant">

    <StackLayout HorizontalOptions="Center"
                 VerticalOptions="Center"
                 Spacing="30"
                 Padding="40">

        <Label Text="Choose meal to order"
               FontSize="Medium"
               HorizontalOptions="Center" />

        <RadioButton Content="Pizza" GroupName="OrderGroup" CheckedChanged="OnOrderTypeChanged"/>
        <RadioButton Content="Kebab" GroupName="OrderGroup" CheckedChanged="OnOrderTypeChanged"/>
        <RadioButton Content="Chicken Soup" GroupName="OrderGroup" IsChecked="True" CheckedChanged="OnOrderTypeChanged"/>
    </StackLayout>
</ContentPage>
private void OnOrderTypeChanged(object sender, CheckedChangedEventArgs e)
    {
        if (e.Value) // If the RadioButton is now checked
        {
            RadioButton rb = sender as RadioButton;
            string selectedMeal = rb.Content.ToString();

            // Perform actions based on the selected meal
            DisplayAlert("Selection Changed", $"You selected: {selectedMeal}", "OK");
        }
    }

ContentPage : Describes one page of your application. This is the most simple page type in dotnet MAUI.

StackLayout : Places child elements one below the other in a vertical manner.

Let’s look attributes of StackLayout.

  • HorizontalOptions="Center" and VerticalOptions="Center": Brings the stacks close and aligned to each other in the center of the page.
  • Spacing="30": Determines the amount of space between child items.
  • Padding="40": Also includes additional spacing around the stack layout.

RadioButtons : Enables choice from a limited number of possibilities whereby the user has to choose a certain option.

Let’s consider the attributes we have in context with RadioButton.

  • Content: Specifies the string that will be shown in the graphic user interface for each option.
  • GroupName="OrderGroup": A good property so that any two or several radio buttons can be grouped to make sure that only one can be having the focus.
  • IsChecked="True" : Defines the option which is selected when none is explicitly selected.

Tabbed Page

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:MauiTabbedPageExample"
             x:Class="MauiTabbedPageExample.MainTabbedPage"
            BarTextColor="White"
            SelectedTabColor="Red"
            UnselectedTabColor="Orange"
            BarBackgroundColor="Black" >
    <local:MainPage Title="Main Page" />
    <local:RestaurantPage Title="Restaurant Page" />
</TabbedPage>

TabbedPage : Chunks are singular tabs of a page that can be given multi-tabbed user interface where each of the tab corresponds to a child page. None of them needs extra explanation; all the attibutes are explained before or are easy to understand.

NavigationPage

Restaurant.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="MauiApp1.Restaurant">

    <StackLayout HorizontalOptions="Center"
                 VerticalOptions="Center"
                 Spacing="30"
                 Padding="40">

        <Label Text="Choose meal to order"
               FontSize="Medium"
               HorizontalOptions="Center" />

        <RadioButton Content="Pizza" GroupName="OrderGroup" />
        <RadioButton Content="Kebab" GroupName="OrderGroup" />
        <RadioButton Content="Chicken Soup" GroupName="OrderGroup" IsChecked="True" />
    </StackLayout>
</ContentPage>

Set the NavigationPage in AppShell or MainPage

App.xaml.cs

public App()
{
    InitializeComponent();
    
    MainPage = new NavigationPage(new Restaurant());
}

NavigationPage(new Restaurant()): Navigates the Restaurant page with a NavigationPage to create a Restaurant page with a navigation function upon page loading.

Navigating Between Pages

If you want to navigate to the Restaurant page from another page, you can use navigation commands in the code-behind:

await Navigation.PushAsync(new Restaurant());

Navigates the application forward to the Restaurant page, which is placed to the navigation stack.

More convenient usage of NavigationPage

MainPage.xaml
This might be a page the first time a user is directed to the site from the external link and gets to choose which page to go to next, the Restaurant page.

<?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="MauiApp1.MainPage">

    <StackLayout HorizontalOptions="Center"
                 VerticalOptions="Center"
                 Spacing="20"
                 Padding="30">
        
        <Label Text="Welcome to the Main Page!"
               FontSize="Large"
               HorizontalOptions="Center" />
        
        <Button Text="Go to Restaurant"
                Clicked="OnGoToRestaurantClicked"
                HorizontalOptions="Center" />
        
    </StackLayout>

</ContentPage>

MainPage.xaml.cs (Code-Behind)

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void OnGoToRestaurantClicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new Restaurant());
    }
}

FlyoutPage

Let’s start with an example.

MainFlyoutPage.xaml (FlyoutPage)

This is the first page of the app. This page has the flyout menu and the main detail part where other options are found.

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:MauiApp1"
            x:Class="MauiApp1.MainFlyoutPage">

    <!-- The Flyout Menu Page -->
    <FlyoutPage.Flyout>
        <local:MenuPage />
    </FlyoutPage.Flyout>

    <!-- The Detail Content Page -->
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:HomePage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>
  • FlyoutPage.Flyout: Sets flyout menu on the left-hand side of the page which is achieved by the MenuPage.
  • FlyoutPage.Detail: Initial content is defined with HomePage and wrapped within the NavigationPage to allow application of navigation.

MenuPage.xaml (Flyout/Menu Page)

This is the menu page in which any user can proceed to other parts of the application.

<?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="MauiApp1.MenuPage"
             Title="Menu">

    <StackLayout Padding="10">
        <Label Text="Menu" FontAttributes="Bold" FontSize="Large" />

        <Button Text="Home" Clicked="OnHomeClicked" />
        <Button Text="Orders" Clicked="OnOrdersClicked" />
        <Button Text="Settings" Clicked="OnSettingsClicked" />
    </StackLayout>
</ContentPage>

MenuPage.xaml.cs (Code-Behind for MenuPage)

public partial class MenuPage : ContentPage
{
    public MenuPage()
    {
        InitializeComponent();
    }

    private void OnHomeClicked(object sender, EventArgs e)
    {
        ((FlyoutPage)Application.Current.MainPage).Detail = new NavigationPage(new HomePage());
        ((FlyoutPage)Application.Current.MainPage).IsPresented = false; // Close the flyout after selection
    }

    private void OnOrdersClicked(object sender, EventArgs e)
    {
        ((FlyoutPage)Application.Current.MainPage).Detail = new NavigationPage(new OrdersPage());
        ((FlyoutPage)Application.Current.MainPage).IsPresented = false; // Close the flyout after selection
    }

    private void OnSettingsClicked(object sender, EventArgs e)
    {
        ((FlyoutPage)Application.Current.MainPage).Detail = new NavigationPage(new SettingsPage());
        ((FlyoutPage)Application.Current.MainPage).IsPresented = false; // Close the flyout after selection
    }
}
  • The code then uses ((FlyoutPage)Application.Current.MainPage).Detail to change the Detail property to a new NavigationPage with the correct page we want to display.
  • IsPresented = false also ends the flyout menu after an option has been chosen.

HomePage.xaml (Initial Detail Page)

<?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="MauiApp1.HomePage">

    <StackLayout VerticalOptions="CenterAndExpand"
                 HorizontalOptions="CenterAndExpand">
        <Label Text="Welcome to the Home Page"
               FontSize="Large"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

OrdersPage.xaml (Orders Detail Page)

<?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="MauiApp1.OrdersPage">

    <StackLayout VerticalOptions="CenterAndExpand"
                 HorizontalOptions="CenterAndExpand">
        <Label Text="Welcome to the Orders Page"
               FontSize="Large"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

SettingsPage.xaml (Settings Detail Page)

<?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="MauiApp1.SettingsPage">

    <StackLayout VerticalOptions="CenterAndExpand"
                 HorizontalOptions="CenterAndExpand">
        <Label Text="Welcome to the Settings Page"
               FontSize="Large"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

App.xaml.cs 

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new MainFlyoutPage();
    }
}

maui

, , ,