Dot Net MAUI notes

XAML Page Types

—

by

maui
in , , ,

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 : Defines a single page within your application. This is the most basic page type in dotnet MAUI.

StackLayout : Arranges child elements in a vertical stack.

Let’s look attributes of StackLayout.

  • HorizontalOptions="Center" and VerticalOptions="Center": Centers the stack layout within the page.
  • Spacing="30": Sets the spacing between child elements.
  • Padding="40": Adds padding around the stack layout.

RadioButtons : Allows the user to select one option from a set.

Let’s look RadioButton attributes.

  • Content: Sets the display text for each option.
  • GroupName="OrderGroup": Groups the radio buttons so that only one can be selected at a time.
  • IsChecked="True" : Sets the default selected option.

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 : Represents a page that allows you to create a tabbed user interface, where each tab represents a different child page.
All the attibutes are explained before or easy to understand hence no need to write extra explanation.

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()): Wraps the Restaurant page in a NavigationPage, making Restaurant the initial page displayed with navigation capabilities.

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());

Pushes the Restaurant page onto the navigation stack, allowing the user to navigate forward to it.

More convenient usage of NavigationPage

MainPage.xaml
This could be the first page that allows the user to navigate to 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 root page of the app. It contains both the flyout menu and the main detail area.

<?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: Defines the left-hand side flyout menu using MenuPage.
  • FlyoutPage.Detail: Defines the initial content using HomePage, wrapped in a NavigationPage to allow navigation.

MenuPage.xaml (Flyout/Menu Page)

This is the menu page where users can navigate to other sections of the app.

<?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 uses ((FlyoutPage)Application.Current.MainPage).Detail to replace the detail page with a new NavigationPage containing the desired page.
  • IsPresented = false closes the flyout menu after an option is selected.

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();
    }
}