Xamarin Forms. Навигация. TabbedPage

TabbedPage
Xamarin.Forms TabbedPage состоит из списка вкладок и большой области сведений, где каждая вкладка загружает содержимое в область сведений.

TabbedPage в iOS
В iOS список вкладок отображается в нижней части экрана, а также в области данных сверху. У каждой вкладки есть заголовок и значок, который должен быть PNG-файлом с альфа-каналом. В книжной ориентации значки панели вкладок отображаются над заголовками вкладок. В альбомной ориентации значки и заголовки отображаются рядом. Кроме того, в зависимости от устройства и ориентации может отображаться обычная или компактная панель вкладок. При наличии более пяти вкладок появляется вкладка Дополнительно, используемая для доступа к дополнительным вкладкам.

TabbedPage в Android
В Android список вкладок отображается в верхней части экрана, а также в области данных ниже. У каждой вкладки есть заголовок и значок, который должен быть PNG-файлом с альфа-каналом. Но эти вкладки можно переместить в нижнюю часть экрана в зависимости от конкретной платформы. При наличии более пяти вкладок, список которых отображается внизу экрана, появляется вкладка Дополнительно, которую можно использовать для доступа к дополнительным вкладкам.

Создание TabbedPage
Создать TabbedPage можно двумя способами:
Заполните TabbedPage коллекцией дочерних объектов Page, например ContentPage. Дополнительные сведения см. в разделе Заполнение TabbedPage коллекцией Page;
Назначьте коллекции свойство ItemsSource, а затем присвойте DataTemplate свойству ItemTemplate для возврата станицы объектов в коллекции. Дополнительные сведения см. в разделе Заполнение TabbedPage с помощью шаблона.
При обоих подходах TabbedPage отображает каждую страницу при выборе пользователем каждой из вкладок.

Важно!
Рекомендуется заполнять TabbedPage только экземплярами NavigationPage и ContentPage. Это позволит обеспечить согласованность пользовательского интерфейса на всех платформах.

Свойства TabbedPage
BarBackgroundColor с типом Color — цвет фона панели вкладок;
BarTextColor с типом Color — цвет текста на панели вкладок;
SelectedTabColor с типом Color — цвет выбранной вкладки.
UnselectedTabColor с типом Color — цвет вкладки, если она не выбрана.
Все эти свойства поддерживаются объектами BindableProperty, то есть к ним можно применить стиль и их можно указывать в качестве целевых для привязки данных

Предупреждение
В TabbedPage каждый объект Page создается при формировании TabbedPage.
Это может повлечь проблемы с произвольностью, особенно если TabbedPage является корневой страницей приложения.
Тем не менее оболочка Xamarin.Forms позволяет по запросу создавать страницы, доступ к которым осуществляется через панель вкладок, в ответ на навигацию.

Заполнение TabbedPage коллекцией Page
TabbedPage можно заполнить коллекцией дочерних объектов Page, например ContentPage. Для этого необходимо добавить объекты Page в коллекцию TabbedPage.Children.

Заполнение TabbedPage коллекцией Page
Эквивалентный код на C#

Перемещение в пределах вкладки
Навигацию можно осуществлять в пределах одной вкладки при условии, что объект ContentPage упакован в объект NavigationPage. Для этого необходимо вызвать метод PushAsync для свойства Navigation объекта ContentPage
Страница, к которой осуществляется переход, указывается в качестве аргумента метода PushAsync. В этом примере страница UpcomingAppointmentsPage принудительно отправляется в стек навигации, где становится активной

Заполнение TabbedPage с помощью шаблона
TabbedPage можно заполнить страницами, назначив коллекцию данных свойству ItemsSource, а также назначив DataTemplate свойству ItemTemplate, которое записывает данные в шаблон в виде объектов Page.

XAML

C#

Заполнение TabbedPage с помощью шаблона
В этом примере каждая вкладка состоит из объекта ContentPage, который использует объекты Image и Label для вывода данных на вкладку
При выборе другой вкладки отображается объект ContentPage, представляющий вкладку