DotNet MAUI notes

MAUI Shell Routing

Routing enables you, first, to configure various ways as routes with their names and, second, to make the navigation process enjoyable throughout the app. There are two types of routing in Shell:

  • Implicit Routing: The FlyoutItem, TabBar, and ShellContent have implicit routing when using this routing.
  • Explicit Routing: With each other manually defined routes are used for the pages which are not included in the main navigation for example modal pages.

Implicit Routing

<?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"
       xmlns:local="clr-namespace:MauiAppExample"
       x:Class="MauiAppExample.AppShell">

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

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

    <!-- TabBar for additional pages -->
    <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>

You can navigate programmatically from anywhere in the app:

await Shell.Current.GoToAsync("about");

Explicit Routing

Crud routing enables one to set routes for pages that one cannot route directly to the Flyout or TabBar. What makes this useful is that it allows you to react to conditionally navigated pages or pages that are opened in the modal.

Registering the Explicit Route

namespace MauiAppExample
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();

            // Register the AboutPage route explicitly
            Routing.RegisterRoute("about", typeof(AboutPage));
        }
    }
}

Routing.RegisterRoute(“about”, typeof(AboutPage)):

  • Adds the AboutPage to the routes with name “about”.
  • This makes it possible to call about page using the route name in GoToAsync().

Navigating Between Pages

The routes are clear, although you can move between the routes by using Shell.Current.GoToAsync() with either an implicit or an implicit route.

Navigating to Implicit Routes:
await Shell.Current.GoToAsync("about");

This will go to the DashboardPage which has already been included in the TabBar widget and has been given route (about). Because it is implemented as part of the main navigation, it is a routed control, by definition.

Navigating to Explicit Routes:
await Shell.Current.GoToAsync("profile");

This will go to ProfilePage which is not exactly under the main navigation (FlyoutItem or TabBar) but is in fact routed.

Using Parameters in Routing

Shell routing also has the ability to pass parameters between various pages this makes it easy to transfer data.

Navigate with Parameter:
await Shell.Current.GoToAsync("profile?userId=123");

Profile Page Code-Behind

namespace MauiAppExample
{
    [QueryProperty(nameof(UserId), "userId")]
    public partial class ProfilePage : ContentPage
    {
        public string UserId { get; set; }

        public ProfilePage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            // Use UserId here
            DisplayAlert("User ID", $"User ID passed: {UserId}", "OK");
        }
    }
}

[QueryProperty(nameof(UserId), "userId")]:

  • Defines a property UserId, which maps the value to domaine object from the query parameter userId.
  • This attribute enables the value to be automatically extracted from the URI of the navigation.

Summary of Routing in Shell

  1. Implicit Routing:
    • Appears automatically on pages derived from FlyoutItem, Tab, or ShellContent.
    • Cuts the amount of work done for primary pages by providing aids in defining routes for easy navigation.
  2. Explicit Routing:
    • You have to register a route using Routing.RegisterRoute function.
    • Useful for all the pages which are not situated in the primary navigation panel (for instance, details, modals).
  3. Navigation:
    • To go from one page to the other use the GoToAsync() method while passing the name of the route to go to as a parameter.
    • Transfer Parameters using query strings in order to send information from one page to another.
  4. Shell Benefits:
    • Simplified navigation.
    • This makes routes easily manageable and in addition to that, there is ability to pass parameters.

maui

, ,