.NET MAUI: XAML, Layouts & Navigation

.NET MAUI (Multi-platform App UI) is Microsoft's cross-platform framework for building native iOS, Android, macOS, and Windows apps from one C#/XAML codebase -- the evolution of Xamarin.Forms, folded into the mainline .NET SDK with a single-project structure.

A ContentPage in XAML

<!-- MainPage.xaml -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">

    <ScrollView>
        <VerticalStackLayout Padding="24" Spacing="16">

            <Label Text="Welcome"
                   Style="{StaticResource HeaderStyle}"
                   HorizontalOptions="Center" />

            <Entry Placeholder="Enter your name"
                   Text="{Binding UserName}" />

            <!-- Command binding -- no click event handler needed -->
            <Button Text="Save"
                    Command="{Binding SaveCommand}" />

            <!-- CollectionView bound to an ObservableCollection --
                 automatically reflects Add/Remove without manual refresh -->
            <CollectionView ItemsSource="{Binding Items}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding Title}" />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Layout Containers

<!-- StackLayout / VerticalStackLayout -- single row/column -->
<VerticalStackLayout Spacing="12">
    <Label Text="A" />
    <Label Text="B" />
</VerticalStackLayout>

<!-- Grid -- precise row/column matrix -->
<Grid RowDefinitions="Auto,*" ColumnDefinitions="*,*">
    <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Header" />
    <Label Grid.Row="1" Grid.Column="0" Text="Left" />
    <Label Grid.Row="1" Grid.Column="1" Text="Right" />
</Grid>

<!-- FlexLayout -- CSS-flexbox-like wrapping/direction-aware arrangement -->
<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly">
    <BoxView Color="Red" WidthRequest="80" HeightRequest="80" />
    <BoxView Color="Blue" WidthRequest="80" HeightRequest="80" />
</FlexLayout>

Shell Navigation

<!-- AppShell.xaml -- declares the app's overall nav structure -->
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="MyApp.AppShell">

    <TabBar>
        <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="home" />
        <ShellContent Title="Settings" ContentTemplate="{DataTemplate local:SettingsPage}" Route="settings" />
    </TabBar>
</Shell>

// Navigate via routes, not manual push/pop
await Shell.Current.GoToAsync("//home");
await Shell.Current.GoToAsync($"details?itemId={item.Id}");

// Register a route not declared directly in AppShell.xaml
Routing.RegisterRoute("details", typeof(DetailPage));