Как MAUI организует наше блуждание в приложении

Навигация на телефоне всегда немного непроста. Возможностей меньше, чем, например, на ноутбуке. Элементы интерфейса должны быть больше, так как палец на маленьком экране телефона значительно крупнее курсора мыши на мониторе.

.NET MAUI предлагает два основых варианта навигации.

Простое решение: NavigationPage

Это стандартный подход, похожий на старые Windows-приложения в режиме диалога. Нажимаешь кнопку — поверх текущего окна появляется следующая страница. Нажимаешь элемент, ассоциированный с функцией возврата — текущее окно закрывается, и появляется предыдущая. То есть реализуется так называемый стек страниц.

Пример простой навигации:

// MainPage.xaml.cs
private async void GoToDetails_Clicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new DetailsPage());
}

// DetailsPage.xaml.cs
private async void GoBack_Clicked(object sender, EventArgs e)
{
    await Navigation.PopAsync();
}

Плюсы:

• Простая реализация стековой навигации.
• Полный контроль над стеком страниц.
• Хорошо подходит для маленьких приложений.

Минусы:

• Много повторяющегося кода (boilerplate).
• Труднее масштабировать на крупные приложения.
• Нет встроенной поддержки TabBar, Flyout или URI-навигации.

Shell: «современный», более сложный подход

Здесь уместно вспомнить о Web-сайтах или сложных десктоп-приложениях. У Вас может быть меню с вкладками либо десктоп с панелями и окнами, где пользователь видит основные разделы приложения одновременно и может быстро переходить между ними, не теряя контекст (но при этом не по раз навсегда определенному пути).

Пример Shell, форма AppShell.xaml:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:pages="clr-namespace:MyApp.Pages"
       x:Class="MyApp.AppShell">

    <TabBar>
        <ShellContent Title="Home" ContentTemplate="{DataTemplate pages:MainPage}" />
        <ShellContent Title="Settings" ContentTemplate="{DataTemplate pages:SettingsPage}" />
    </TabBar>

    <FlyoutItem Title="Menu">
        <ShellContent Title="Profile" ContentTemplate="{DataTemplate pages:ProfilePage}" />
        <ShellContent Title="About" ContentTemplate="{DataTemplate pages:AboutPage}" />
    </FlyoutItem>

</Shell>

Здесь у Вас сразу несколько методов навигации.

TabBar

TabBar — это вкладки для быстрого переключения между разделами приложения.

Плюсы:

• Встроенные вкладки для удобной навигации.
• Каждая вкладка может иметь свой собственный NavigationPage, чтобы сохранить стек страниц внутри вкладки.

Flyout

Flyout — это боковое меню, которое появляется, когда пользователь проводит пальцем от края экрана или нажимает кнопку с иконкой «гамбургер».

Плюсы:

• Удобно для глобальной навигации между разделами.
• Может комбинироваться с TabBar для многоуровневой структуры.

Deep Linking

Deep Linking позволяет открывать конкретные страницы приложения через URI, как веб-ссылку.

// Переход на страницу DetailsPage с параметром
await Shell.Current.GoToAsync("details?itemId=42");

Плюсы:

• Интеграция с внешними системами.
• Быстрый переход внутри приложения.
• Параметры передаются через URI, упрощая обработку на целевой странице.

Практические советы

• NavigationPage: подходит для маленьких приложений или внутренних модулей. Легко понять и быстро настроить.
• Shell: для средних и крупных приложений, где нужны TabBar, Flyout или Deep Linking.
• Можно комбинировать: Shell может содержать NavigationPage внутри TabBar, чтобы использовать преимущества обоих подходов.

Заключение

• Shell — современный и мощный инструмент для навигации в .NET MAUI.
• NavigationPage всё ещё актуален для простых сценариев.
• Выбирайте инструмент под задачу и не усложняйте архитектуру без необходимости.