Поделиться через

Сводка по главе 25. Виды страниц

  • Статья

Примечание.

Эта книга была опубликована весной 2016 года и с тех пор не обновлялась. Многое в этой книге остается ценным, но некоторые материалы устарели, а некоторые разделы перестали быть полностью верными или полными.

До сих пор вы видели два класса, производных от Page: ContentPage и NavigationPage. В этой главе представлены два других:

  • MasterDetailPage управляет двумя страницами — Главная и Детали
  • TabbedPage управляет несколькими дочерними страницами, доступными через вкладки

Эти типы страниц предоставляют более сложные параметры навигации, чем NavagationPage обсуждаемые в главе 24. Навигация по страницам.

Главная и Детали

MasterDetailPage определяет два свойства типа Page: Master и Detail. Обычно каждому из этих свойств присваивается ContentPage. MasterDetailPage отображает эти две страницы и переключается между ними.

Существует два фундаментальных способа переключения между этими двумя страницами:

  • разбиение, где главные и детальные данные находятся рядом друг с другом
  • всплывающее окно — страница сведений частично перекрывает главную страницу.

Существует несколько разновидностей подхода для всплывающих окон (слайд, перекрывающее и переключающее), но обычно они зависят от платформы. Свойству MasterDetailBehavior объекта MasterDetailPage можно присвоить значение одного из элементов перечисления MasterBehavior:

Однако это свойство не влияет на телефоны. Телефоны всегда имеют режимы работы с всплывающим окном. Режим работы с разделением имеют только планшеты и компьютеры (Windows).

Изучение этих режимов работы

Образец MasterDetailBehaviors позволяет экспериментировать с режимом по умолчанию на различных устройствах. Программа содержит две отдельные производные ContentPage, которые являются производными для основных и детальных данных (со свойством Title, установленным в обоих), и другим классом, который является производной от MasterDetailPage, объединяющего их. Страница деталей заключена в NavigationPage, так как программа UWP не будет работать без нее.

Для платформ Windows 8.1 и Windows Phone 8.1 требуется, чтобы растровое изображение было установлено в свойство Icon главной страницы.

Снова за учебу

Пример SchoolAndDetail использует несколько другой подход к созданию программы для показа учащихся из библиотеки SchoolOfFineArt.

Свойства Master и Detail определяются с помощью визуальных деревьев в файле SchoolAndDetailPage.xaml, который является производным от MasterDetailPage. Это расположение позволяет устанавливать привязки данных между главной страницей и страницами деталей.

Этот файл XAML также задает для свойства IsPresented из MasterDetailPage значение True. В результате главная страница будет отображаться при запуске; по умолчанию отображается страница деталей. Файл SchoolAndDetailPage.xaml.cs задает значение IsPresented для false при выборе элемента из ListView на главной странице. Затем отобразится страница деталей:

Тройной снимок экрана школы и деталей

Собственный пользовательский интерфейс

Несмотря на то, что Xamarin.Forms предоставляет пользовательский интерфейс для переключения между представлениями "Главная" и "Детали", вы можете указать собственное представление. Для этого:

  • Задайте для свойства IsGestureEnabled значение false, чтобы отключить прокрутку.
  • Переопределите метод ShouldShowToolbarButton и возвратите false, чтобы скрыть кнопки на панели инструментов в Windows 8.1 и Windows Phone 8.1.

Затем необходимо предоставить средства для переключения между главной страницей и страницами деталей, например с помощью примера ColorsDetail.

В примере MasterDetailTaps демонстрируется другой подход, использующий TapGestureRecognizer на главной странице и на страницах деталей.

TabbedPage

TabbedPage — это коллекция страниц, которые можно переключать с помощью вкладок. Она является производной от MultiPage<Page> и не определяет открытые свойства или методы самостоятельно. MultiPage<T>, однако, определяет свойство:

  • свойство Childrenс типом IList<T>.

Эту коллекцию нужно заполнять Children объектами страницы.

Другой подход позволяет определять дочерние элементы TabbedPage так же, как и ListView, используя эти два свойства, которые автоматически создают страницы с вкладками:

Однако этот подход плохо работает в iOS, когда коллекция содержит более нескольких элементов.

MultiPage<T> определяет два дополнительные свойства, которые позволяют отслеживать текущую просматриваемую страницу:

  • CurrentPage типа T, который ссылается на страницу
  • SelectedItem типа Object, который ссылается на объект в коллекции ItemsSource

MultiPage<T> также определяет два события:

  • PagesChanged при изменении коллекции ItemsSource
  • CurrentPageChanged при изменении просматриваемой страницы

Дискретные страницы вкладок

Пример DiscreteTabbedColors состоит из трех страниц с вкладками, отображающие цвета тремя разными способами. Каждая вкладка является производной ContentPage, а затем производная TabbedPage DiscreteTabbedColorsPage.xaml объединяет три страницы.

Для каждой страницы, отображаемой в TabbedPage, свойство Title является обязательным для указания текста на вкладке, а в Apple Store требуется также использовать значок, поэтому для iOS установлено свойство Icon:

Тройной снимок экрана дискретных вкладок с разными цветами

В примере StudentNotes есть домашняя страница со списком всех учащихся. При касании учащийся переходит на производную TabbedPage, StudentNotesDataPage, которая включает три объекта ContentPage в своем визуальном дереве, один из которых позволяет вводить некоторые примечания для этого учащегося.

Использование ItemTemplate

В примере MultiTabbedColor используется класс NamedColor из библиотеки Xamarin.FormsBook.Toolkit. Файл MultiTabbedColorsPage.xaml устанавливает свойство DataTemplate от TabbedPage в визуальное дерево, начинающееся с ContentPage, которое содержит привязки к свойствам NamedColor (включая привязку к свойству Title).

Однако это проблематично для iOS. С помощью этого метода можно отобразить только несколько элементов, к тому же в нем отсутствует правильный способ для присвоения значков.