loading experience

.NET MAUI

Navigation in .NET MAUI with Shell and parameters

Routes, tabs, flyout menu and passing data between pages in a typed way.

Navigation in .NET MAUI with Shell and parameters

Shell provides the navigation structure of a MAUI app: tabs, flyout menu and route-based navigation, similar to web addresses.

Objects travel between pages without being turned into strings.
Objects travel between pages without being turned into strings.

The app structure

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:MyApp.Views"
       x:Class="MyApp.AppShell">
    <TabBar>
        <ShellContent Title="Orders" Icon="orders.png" ContentTemplate="{DataTemplate views:OrdersPage}" Route="orders" />
        <ShellContent Title="Profile" Icon="profile.png" ContentTemplate="{DataTemplate views:ProfilePage}" Route="profile" />
    </TabBar>
</Shell>

Routes for detail pages

public AppShell()
{
    InitializeComponent();
    Routing.RegisterRoute("orders/detail", typeof(OrderDetailPage));
}

// from a ViewModel
await Shell.Current.GoToAsync("orders/detail", new ShellNavigationQueryParameters
{
    ["Order"] = selectedOrder
});

Receiving the parameters

The destination page's ViewModel implements IQueryAttributable and receives the objects passed in, without having to serialise them into a string:

public partial class OrderDetailViewModel : ObservableObject, IQueryAttributable
{
    [ObservableProperty]
    public partial Order? Order { get; set; }

    public void ApplyQueryAttributes(IDictionary<string, object> query)
    {
        if (query.TryGetValue("Order", out var o)) Order = o as Order;
    }
}

Going back

GoToAsync("..") returns to the previous page and can also pass parameters, which is useful to return a choice made on a selection page.

A tip: centralise route names in constants. A mistyped route is only discovered when the user taps the button.

Comments (0)

No comments yet.

Leave a comment