Навигация

Основы навигации

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

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

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

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

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

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

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

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

Итак, добавим в проект новый элемент ContentPage (C#), который назовем CommonPage.cs:

Определим в этом классе следующий код:

using System;
using Xamarin.Forms;

namespace HelloApp
{
    public class CommonPage : ContentPage
    {
        public CommonPage()
        {
            Title = "Common Page";
            Button backButton = new Button
            {
                Text = "Назад",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };
            backButton.Clicked += BackButton_Click;
            Content = backButton;
        }
        private async void BackButton_Click(object sender, EventArgs e)
        {
            await Navigation.PopAsync();
        }
    }
}

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

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

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

using System;
using Xamarin.Forms;

namespace HelloApp
{
    public class ModalPage : ContentPage
    {
        public ModalPage()
        {
            Title = "Modal Page";
            Button backButton = new Button
            {
                Text = "Назад",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };
            backButton.Clicked += BackButton_Click;

            Content = backButton;
        }
        private async void BackButton_Click(object sender, EventArgs e)
        {
            await Navigation.PopModalAsync();
        }
    }
}

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

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

using System;
using Xamarin.Forms;

namespace HelloApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            Title = "Main Page";
            Button toCommonPageBtn = new Button
            {
                Text = "На обычную страницу",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand
            };
            toCommonPageBtn.Clicked += ToCommonPage;

            Button toModalPageBtn = new Button
            {
                Text = "На модальную страницу",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand
            };
            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 и изменим код установки главной страницы:

using Xamarin.Forms;

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

            MainPage = new NavigationPage(new MainPage());
        }

        protected override void OnStart() { }

        protected override void OnSleep() { }

        protected override void OnResume() { }
    }
}

И чтобы использовать механизм навигации в приложении, необходимо обернуть объект 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.