DotNet MAUI notes

MAUI Shell Basics: Shell application structure

In .NET MAUI, Shell is a powerful feature that helps you create an efficient and organized navigation structure for your application. It provides a straightforward way to set up and manage complex application navigation with minimal configuration.

What is MAUI Shell?

Shell is a container for your application pages that provides features like URI-based navigation, integrated search, and easy-to-use flyouts or tabs. It is particularly useful for multi-page apps that require consistent and manageable navigation structures.

Shell XAML Structure

To create a Shell-based application, you typically start by creating a Shell subclass that defines the layout of your application’s navigation.

Below, I’ll walk through an example of a basic Shell-based application that includes a flyout menu and tabs.

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="MauiAppExample.AppShell">

    <!-- Flyout Menu -->
    <Shell.FlyoutBehavior>Flyout</Shell.FlyoutBehavior>

    <!-- Flyout Items -->
    <FlyoutItem Title="Home" Icon="home.png">
        <ShellContent Title="Home" ContentTemplate="{DataTemplate local:HomePage}" Route="home" />
    </FlyoutItem>

    <FlyoutItem Title="About" Icon="about.png">
        <ShellContent Title="About" ContentTemplate="{DataTemplate local:AboutPage}" Route="about" />
    </FlyoutItem>

    <!-- Tabs -->
    <TabBar>
        <Tab Title="Dashboard" Icon="dashboard.png">
            <ShellContent Title="Dashboard" ContentTemplate="{DataTemplate local:DashboardPage}" Route="dashboard" />
        </Tab>
        <Tab Title="Settings" Icon="settings.png">
            <ShellContent Title="Settings" ContentTemplate="{DataTemplate local:SettingsPage}" Route="settings" />
        </Tab>
    </TabBar>

</Shell>

Shell.FlyoutBehavior: Specifies how the flyout menu appears. Options include:

  • Flyout: Default flyout menu behavior (can slide in/out).
  • Locked: Flyout is always visible.
  • Disabled: No flyout behavior.

Flyout Items:

  • FlyoutItem: Represents a section in the flyout navigation.
  • ShellContent: Represents each content page to be loaded when the FlyoutItem is clicked.

Tabs:

  • TabBar: Defines the bottom navigation tabs.
  • Tab: Represents a single tab, containing one or more ShellContent items.

Setting Up the Shell in Your Application

After defining AppShell, you need to set it as the main entry point of your application.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new AppShell();
    }
}

Advantages of Using Shell

  1. Simplified Navigation:
    • Shell provides a streamlined way to manage app navigation, which is particularly helpful in larger, multi-page apps.
  2. Consistent UI Elements:
    • Flyouts and tab bars provide a consistent user experience for navigation across the application.
  3. URI-based Navigation:
    • You can use URI-like routes to navigate between pages, making navigation easier and more predictable.

maui

, ,