App.xaml vs AppShell.xaml vs MainPage.xaml in .NET MAUI

App.xaml vs AppShell.xaml vs MainPage.xaml in .NET MAUI

These three files define the structure and flow of a .NET MAUI application. Each has a specific role:

1. App.xaml

Purpose: Defines global resources and sets the root page of the app.

✅ App.xaml Purpose: Defines global resources (styles, colors, templates) and sets the root page of the application. Code-behind: App.xaml.cs initializes the app and sets MainPage or AppShell. Typical Content: Resource dictionaries Application-level styles

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.App">
    <Application.Resources>
        <Color x:Key="PrimaryColor">#512BD4</Color>
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="{StaticResource PrimaryColor}" />
        </Style>
    </Application.Resources>
</Application>
    

2. AppShell.xaml

Purpose: Defines navigation structure using Shell (tabs, flyout, routes). ✅ AppShell.xaml Purpose: Defines navigation structure using Shell, including: Tabs (TabBar) Flyout menus Routes for navigation Code-behind: AppShell.xaml.cs registers routes and handles navigation events.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MyApp"
       x:Class="MyApp.AppShell">

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

</Shell>
    

3. MainPage.xaml

Purpose: Represents a single screen (UI content). ✅ MainPage.xaml Purpose: Represents a single screen (usually the first page or a tab content). Code-behind: MainPage.xaml.cs contains UI logic for that page.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">
    <VerticalStackLayout Padding="20">
        <Label Text="Welcome to .NET MAUI!" FontSize="24" />
        <Button Text="Click Me" Command="{Binding ClickCommand}" />
    </VerticalStackLayout>
</ContentPage>
    

Flow Diagram

App.xaml (Global Resources)
 └── App.xaml.cs
      └── Sets MainPage = AppShell
           └── AppShell.xaml (Navigation Structure)
                └── ShellContent → MainPage.xaml (UI Screen)
    

Best Practices

• 💡 Use App.xaml for global resources only.
• 💡 Use AppShell.xaml for navigation structure.
• 💡 Use MainPage.xaml for actual UI content.
• 💡 Keep navigation logic in AppShell.xaml.cs.
• 💡 Follow MVVM for data binding and commands.