Навигация

Переходы между страницами и NavigationPage

.NET MAUI поддерживает навигацию между страницами. Для более простых сценариев навигации .NET MAUI предоставляет специальный тип страницы NavigationPage. Рассмотрим как его использовать для создания простейшей навигации между страницами.

Для поддержки навигации на каждой странице Page в .NET MAUI определено свойство Navigation. Это свойство предтавляет интерфейс INavigation, в котором есть следующие методы:

Task PushAsync(Page page)
Task PushModalAsync(Page page)

В качестве параметра здесь передается объект Page - страница, на которую надо осуществить переход.

Второй метод имеет в своем названии слово "Modal" и осуществляет переход на модальную страницу. Обычно модальные страницы используются, когда приложению нужно получить некоторую информацию от пользователя. При этом до получения информации нельзя возвращаться на предыдущую страницу.

Также имеются методы для возврата на предыдущую страницу:

Task<Page> PopAsync()
Task<Page> PopModalAsync()

Итак, рассмотрим простейший пример навигации, используя все эти методы. Создадим новый проект по типу .NET MAUI и C# Portable.

Так как наше приложение будет производить навигацию, то есть переходы между страницами, то вначале добавим эти вспомогательные страницы.

Итак, добавим в проект новую страницу, которую назовем CommonPage.cs и которая будет иметь следующий код:

namespace HelloApp;

public class CommonPage : ContentPage
{
	public CommonPage()
	{
        Title = "Common";
        Button backButton = new Button { Text = "Back", HorizontalOptions = LayoutOptions.Start };
        Label label = new Label { Text = "Lorem Ipsum is simply dummy text of the printing..." };
        //  переход с обычной страницы назад
        backButton.Clicked += async (o, e) => await Navigation.PopAsync();
        Content = new StackLayout { Children = { label, backButton} };
    }
}

На этой странице определяется единственная кнопка, по нажатию на которую осуществляется переход назад с помощью метода Navigation.PopAsync(). Поскольку метод является асинхронным, то перед ним ставится ключевое слово await, а сам обработчик кнопки помечается с помощью ключевого слова async.

Также стоит отметить, что у страницы устанавливается заголовок через свойство Title.

Подобным образом добавим вторую страницу, которую назовем ModalPage. Определим в ней следующий код:

namespace HelloApp;

public class ModalPage : ContentPage
{
    public ModalPage()
    {
        Title = "Modal";
        Button backButton = new Button { Text = "Back", HorizontalOptions = LayoutOptions.Start};
        Label label = new Label { Text = "Modal Message..." };
        //  переход с модальной страницы назад
        backButton.Clicked += async(o, e) => await Navigation.PopModalAsync();
        Content = new StackLayout { Children = { label, backButton} };
    }
}

Данная страница выглядит во многом аналогично предыдущий за тем исключением, что переход назад здесь производится с помощью метода Navigation.PopModalAsync(). То есть эта страница будет модальной.

И изменим код главной страницы MainPage:

namespace HelloApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        //InitializeComponent();

        Title = "Main";
        Button toCommonPageBtn = new Button
        {
            Text = "Common",
            HorizontalOptions = LayoutOptions.Start
        };
        toCommonPageBtn.Clicked += ToCommonPage;

        Button toModalPageBtn = new Button
        {
            Text = "Modal",
            HorizontalOptions = LayoutOptions.Start
        };
        toModalPageBtn.Clicked += ToModalPage;

        Content = new StackLayout { Children = { toCommonPageBtn, toModalPageBtn } };
    }

    private async void ToModalPage(object? sender, EventArgs e)
    {
        await Navigation.PushModalAsync(new ModalPage());
    }
    private async void ToCommonPage(object? sender, EventArgs e)
    {
        await Navigation.PushAsync(new CommonPage());
    }
}

Итак, здесь две кнопки. Одна производит переход на CommonPage с помощью метода Navigation.PushAsync(), а другая осуществляет переход на ModalPage посредством вызова Navigation.PushModalAsync()

Но чтобы с MainPage можно было бы переходить к CommonPage или ModalPage, нам надо в качестве главной страницы использовать объект NavigationPage, а не ContentPage, как установлено по умолчанию. Поэтому перейдем к классу App и изменим код установки главной страницы:

namespace HelloApp;

public partial class App : Application
{
	public App()
	{
		InitializeComponent();
        MainPage = new NavigationPage(new MainPage());
    }
}

И чтобы использовать механизм навигации в приложении, необходимо обернуть объект MainPage в NavigationPage:

MainPage = new NavigationPage(new MainPage());

Иначе мы не сможем использовать навигацию в приложении. Сам же класс NavigationPage визуально только добавляет заголовок страницы, который устанавливается с помощью свойства Title и который отображается рядом с иконкой приложения. Хотя в зависимости от операционной системы отображение заголовка может отличаться.

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

Попробуем перейти на обычную страницу, нажав на первую кнопку:

Как из скриншота можно увидеть, что в данном случае даже не нужна кнопка для возвращения назад, так как мы можем вернуться через стрелку рядом с заголовком.

Вернемся назад и нажмем на вторую кнопку для перехода к ModalPage:

Так как для перехода к этой странице использовался метод Navigation.PushModalAsync(), то данная страница будет модальной. Основное отличие модальной страницы в визуальном плане состоит в отстутсвии заголовка, несмотря на то, что в коде мы устанавливаем свойство Title у ModalPage.

Ну и для возврата с этой страницы назад нам надо использовать метод Navigation.PopModalAsync()

В реальности для создания модальной страницы необязательно определять отдельный класс страницы, как здесь класс ModalPage. Так, мы могли бы использовать в качестве модальной и CommonPage.

Анимация в постраничных переходах

Все ранее расмотренные методы навигации в качестве второго параметра принимают логическое значение:

Task PushAsync(Page page, bool animated)
Task PushModalAsync(Page page, bool animated)
Task<Page> PopAsync(bool animated)
Task<Page> PopModalAsync(bool animated)

И если оно равно true, то при переходе на другую страницу осуществляется анимация, если, конечно, целевая платформа поддерживает подобную анимацию.

По умолчанию анимация включена, поэтому, чтобы ее отключить, нам надо использовать одну из этих версий, передавая значение false.

Настройка внешнего вида

Класс NavigationPage имеет скромные возможности для настройки внешнего вида, в частности, с помощью следующих свойств:

• BarBackground: представляет тип Brush и определяет фон панели навигации

• BarBackgroundColor: представляет тип Color и определяет цвет панели навигации

• BarTextColor: представляет тип Color и определяет цвет текста на панели навигации

Например, в файле NavigationPage:

namespace HelloApp;

public partial class App : Application
{
	public App()
	{
		InitializeComponent();

		MainPage = new NavigationPage(new MainPage())
		{
			BarBackgroundColor = Color.FromArgb("#2980B9"),
			BarTextColor= Colors.White
        };
    }
}

В качестве фонового цвета задается один из оттенков синего, а в качестве цвета текста - белый цвет.