Маршрутизация и навигация в NET MAUI. Маршруты

Содержание

Маршруты в Shell
Навигация в Shell
Итого

С навигацией в приложении .NET MAUI мы частично познакомились при изучении NavigationPage. Вместе с этим, если наше приложение использует оболочку (Shell), то мы получаем в свое распоряжение также мощную систему навигации и маршрутизации, включая и использование параметров маршрутов, как это делается, например, в Blazor Hybrid или приложениях ASP.NET Core. В этой части мы разберемся с маршрутизацией и навигацией в приложениях, использующих Shell.

Маршруты в Shell

Навигация в приложении с оболочкой Shell выполняется путем указания универсального кода ресурса (URI) для перехода. Такие URI могут содержать следующие три компонента:

Маршрут — определяет путь к содержимому в составе визуальной иерархии оболочки.
Страница. Страницы, которые отсутствуют в визуальной иерархии оболочки Shell, можно поместить в стек навигации из любого места в приложении.
Один или несколько параметров запроса. Параметры запроса можно передать целевой странице при вызове метода навигации.

Если URI содержит все три компонента, то он имеет формат «//маршрут/страница?параметры«.

Маршруты можно определить для объектов FlyoutItem, TabBar, Tab и ShellContent с помощью их свойства Route. Например, создадим новое приложение .NET MAUI и посмотрим на содержимое AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NavigationMAUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:NavigationMAUI"
    Shell.FlyoutBehavior="Flyout"
    Title="NavigationMAUI">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

Здесь у ShellContent определен маршрут — «MainPage» по которому пользователь может открыть одноименную страницу приложения. В качестве маршрута может выступать людая строка, например, мы можем изменить маршрут так:

<ShellContent
    Title="Home"
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="home" />

результат работы приложения не изменится. Используя свойство Route различных элементов Shell мы можем создать разветвленную схему маршрутизации на основе URI. Например, добавим в наше приложение ещё одну страницу ContentPage

изменим код AppShell.xaml следующим образом:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NavigationMAUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:NavigationMAUI"
    Shell.FlyoutBehavior="Flyout"
    Title="NavigationMAUI">

    <TabBar Route="pages">
        <Tab Route="main" 
             Title="Обзор">
            <ShellContent Title="Главная"
                          ContentTemplate="{DataTemplate local:MainPage}"
                          Route="home" />

        </Tab>
        <Tab Route="secondary" 
             Title="Работа с проектами">
            <ShellContent Title="Проекты"
                          ContentTemplate="{DataTemplate local:Projects}"
                          Route="projects" />
        </Tab>
    </TabBar>
</Shell>

Здесь мы определили элемент TabBar и два элемента Tab в каждом из которых поместили по одному элементу ShellContent. У всех пяти элементов (1 TabBar, 2 Tab и 2 ShellContent) определены свойства Route. Абсолютные маршруты для страниц MainPage и Projects теперь будут выглядеть следующим образом:

для MainPage: //pages/main/home
для Pages: //pages/secondary/projects

Проверить это достаточно просто — изменим код:

для страницы MainPage:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationMAUI.MainPage"
             Appearing="OnAppearing">

 
        <VerticalStackLayout Padding="10">
            <Label x:Name="LocationLabel"/>
        </VerticalStackLayout>
 
</ContentPage>

здесь мы определили метку с именем LocationLabel и обработчик события Appearing страницы, который расположен в файле MainPage.xaml.cs и выглядит следующим образом:

public void OnAppearing(object sender, EventArgs args)
{
    LocationLabel.Text = Shell.Current.CurrentState.Location.ToString();
}

здесь мы используем статический класс Shell и через его свойство Current.CurrentState.Location получаем URI текущей страницы, который подставляем в виде строки в свойство Text метки.

Точно такой же XAML-код и обработчик события определим для страницы Projects:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationMAUI.Projects"
             Title="Projects" Appearing="OnAppearing">

        <VerticalStackLayout Padding="10">
            <Label x:Name="LocationLabel"/>
        </VerticalStackLayout>
 
</ContentPage>

public void OnAppearing(object sender, EventArgs args)
{
    LocationLabel.Text = Shell.Current.CurrentState.Location.ToString();
}

Теперь запустим приложение и посмотрим на текст меток:

страница MainPage

Страница Projects

Навигация в Shell

Чтобы перейти к определенной странице по её URI, достаточно воспользоваться методом GoToAsync() статического класса Shell. Например, добавим на страницу MainPage кнопку:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationMAUI.MainPage"
             Appearing="OnAppearing">

 
        <VerticalStackLayout Padding="10">
            <Label x:Name="LocationLabel"/>
            <Button Text="Проекты" Clicked="Button_Clicked"></Button>
        </VerticalStackLayout>
 
</ContentPage>

Для которой определим следующий обработчик события Clicked:

private async void Button_Clicked(object sender, EventArgs e)
{
    await Shell.Current.GoToAsync("//pages/secondary/projects");
}

Запустим приложение и проверим его работу:

Итого

Приложения .NET MAUI, работающие с Shell, используют навигацию на основе URI, который задается для отображаемых в главном меню элементов с помощью свойства Route. Комбинируя свойство Route в различных элементах мы можем создавать разветвленную схему маршрутов и переходить по этим маршрутам, используя методы статического класса Shell.