Shell provides the navigation structure of a MAUI app: tabs, flyout menu and route-based navigation, similar to web addresses.
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.