Стандартные шаблоны Visual Studio в WinRT

WinRT --- Стандартные шаблоны Visual Studio

Признаюсь: я уже много лет занимаюсь программированием логики страничной навигации для различных Windows-сред и мне никогда не приходило в голову реализовать служебные команды перехода по комбинациям клавиш и кнопкам мыши. Код, приведенный ранее, был позаимствован из сгенерированного Visual Studio класса с именем LayoutAwarePage, производного от Page и реализующего ряд полезных возможностей.

LayoutAwarePage и другие вспомогательные классы автоматически включаются в проекты Visual Studio, когда вы вызываете диалоговое окно Add New Item и добавляете шаблон Basic Page (вместо Blank Page). Эти файлы также являются частью шаблонов Grid App и Split App. Класс страницы, создаваемый по шаблону Basic Page, является производным от LayoutAwarePage вместо Page. Класс LayoutAwarePage определяет виртуальные методы с именами SaveState и LoadState, при помощи которых экземпляр страницы сохраняет и загружает свое состояние; эти методы в сочетании с другим сгенерированным классом SuspensionManager выполняют за вас большую часть работы.

LayoutAwarePage также взаимодействует с SuspensionManager для сохранения состояния (включая стек возврата) при приостановке приложения и его восстановления при перезапуске. Выбор имени класса LayoutAwarePage объясняется тем, что он использует метод SizeChanged для проверки свойства ApplicationView.Value и вызова VisualStateManager.GoToState со строками, соответствующими значениям перечисления ApplicationViewState: FullScreenLandscape, FullScreenPortrait, Filled и Snapped. Эти состояния позволяют файлам XAML самостоятельно реализовать изменения в состоянии представления через разметку VisualStateManager.

Решайте сами, хотите ли вы использовать эти классы, или предпочтете реализовать их функциональность (или ее аналог) самостоятельно. Даже если вы не собираетесь использовать эти классы, изучить их все равно стоит - вероятно, вы получите немало полезной информации.

При создании новых проектов в Visual Studio я использую шаблон Blank App, но существует еще две альтернативы: Grid App и Split App. Эти шаблоны используют классы LayoutAwarePage и SuspensionManager, а также заготовку модели представления в папке DataModel. Эти шаблоны демонстрируют рекомендованный подход к размещению данных на экране. А возможно, самое важное - то, что шаблоны Grid App и Split App демонстрируют простейшее использование двух классов, производных от ItemsControl: GridView и ListView.

И GridView, и ListView наследуют от ItemsControl через промежуточные классы Selector и ListViewBase. Ни GridView, ни ListView не определяют собственных свойств и методов, но используют многие свойства и методы из ListViewBase. Кроме того, заглянув в файл generic.xaml, вы увидите, что шаблоны для GridView, ListView, GridViewItem и ListViewItem различаются. В частности, по умолчанию GridView использует для вывода вариантов WrapGrid, a ListView использует VirtualizingStackPanel.

Классы GridView и ListView также поддерживают группировку вариантов. Вы определяете способ группировки и внешний вид заголовка, разделяющего группы. Примеры будут приведены в шаблонах Grid App и Split App.

Начальный экран Windows 8 использует GridView - или нечто очень похожее на GridView. Как вам, вероятно, известно, для выбора вариантов на начальном экране можно провести пальцем по экрану. Такой тип выделения поддерживается классом ListViewBase (а следовательно, классами GridView и ListView), но он отключен в шаблонах Visual Studio.

Начальный экран Windows 8 позволяет перемещать объекты. Эта возможность также поддерживается классом ListViewBase (но что интересно - только тогда, когда элементы не сгруппированы). Также на начальном экране Windows 8 поддерживается «контекстное масштабирование» (semantic zoom): если выполнить жест сжатия, экран сворачивается, и вы сможете выбирать целые группы. Вы можете использовать эту функциональность в своих приложениях, используя класс SemanticZoom.

Давайте повнимательнее изучим шаблон Grid App (a Split App вы можете рассмотреть самостоятельно). Проект содержит три класса, производных от LayoutAwarePage. Шаблон Grid App инициализируется с отображением страницы GroupedItemsPage.

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

У страницы имеется заголовок и элемент управления GridView с горизонтальной прокруткой. Отдельные пункты списка определяются ресурсом DataTemplate с именем «Standard250x250ItemTemplate», определенным в файле StandardStyles.xaml. Внешний вид заголовков определяется в файле GroupedItemsPage.xaml свойством HeaderTemplate свойства GroupStyle элемента GridView.

Щелкнув на одном из заголовков, переходите к странице GroupDetailPage:

Обратите внимание: кнопка Back реализована в виде кружка со стрелкой в левом верхнем углу. В качестве стиля кнопки задан ресурс «BackButtonStyle», определенный в StandardStyles.xaml. Здесь также используется элемент GridView, хотя заголовок сделан очень большим и выводится слева. Отдельные пункты здесь отображаются с шаблоном ItemTemplate, основанным на ресурсах «Standard500x130ItemTemplate» из файла StandardStyles.xaml.

Co страницы GroupedItemsPage или GroupedDetailPage можно перейти на страницу отдельного варианта списка.

На первый взгляд кажется, что на экране выводится информация об отдельном варианте; однако изображение можно прокрутить по горизонтали, чтобы увидеть другие пункты той же группы. Основную часть страницы занимает элемент FlipView, каждый вариант которого представляет собой элемент ScrollViewer, содержащий набор элементов RichTextBlock. В шаблоне Grid App элементы RichTextBlock генерируются классом RichTextColumns, находящимся в папке Common.