Разработка Windows 8.1 приложений. AppBar, Theme и навигация

Введение

В Windows 8 данные представляют основную ценность ваших приложений. Для достижения этой цели, в Windows 8 приложениях команды и призывы к действию отделяются от содержания. Они размещены в панели приложений, которая состоит из группировки команд в единый бар.

В Windows 8 приложений, есть два вида панели приложения: нижней, используется для групповых действий, и верхний, в основном используется, чтобы предоставить пользователям богатый опыт навигации. Магазина Windows и Internet Explorer содержат хорошие примеры полнофункциональных баров в  приложениях.

ОС Windows 8.1 толкает концепцию дальше и вводит CommandBar, новый способ для разработчиков по созданию правильно спроектированного бара.

 

В ОС Windows 8.1 также новые возможности API, которые позволяют применять темы для каждого элемента. До сих пор на Windows 8 приложениях, это было невозможно сделать без написания кода. Теперь это считанные секунды.

Наконец, в Windows 8.1 улучшается навигация. Теперь можно программно управлять навигацией, удаляя или добавляя свои собственные записи.

В третьей статье мы увидим:

1. Реализацию новых возможностей баров
2. Играть с новой системой управления темами
3. Использовать новые API-интерфейсы навигации

AppBar

В принципе, контрол AppBar с располагать группы элементов управления в одном баре, расположенного или в верхней или нижней части страницы. Тем не менее, Windows 8.1 вводит новые элементы управления, которые помогут вам создавать красиво оформленные кнопки с правильным поведением.

AppBarButton

В Windows 8, нужно было создать кнопку и применить определенный стиль, чтобы получить правильно желаемый результат. Теперь вы можете использовать AppBarButton. Этот контрол реализует интерфейс ICommandBarElement и определяет три важных свойства:

• Label: используется для получения или установки подписи
• Icon: позволяет определить иконку кнопки
• IsCompact: возможность использовать компактный режим

Результат

В этом простом примере, я использовал свойства Icon, указав идентификатор значока.

Иконка свойство имеет типа IconElement. От него наследуется 4 класса:

1. SymbolIcon: представляет собой иконку из символа шрифта Segoe UI. Это поведение по умолчанию
2. FontIcon: символ представляет из определенного шрифта
3. BitmapIcon: представляет собой изображение
4. PathIcon: представляет собой path (возможность “нарисовать” иконку)

Вот как можно использовать SymbolIcon:

В FontIcon есть два важных свойства:

• Glyph: используется для получения или установки символьного кода
• FontFamily: используется для получения или задания названия шрифта

Обратите внимание, что вы можете также использовать FontSize, FontStyle и FontWeight.

BitmapIcon:

PathIcon:

AppBarToggleButton

Контроль AppBarToggleButton не что иное как ToggleButton, предназначен для AppBar’а. Это означает, что он имеет два состояния: включен и выключен. Как и AppbarButton есть свойство IsCompact.

AppBarSeparator

AppBarSeparator является очень простым в использовании, которая отделяет управления в AppBar рисуя вертикальную линию. Как и любой другой элемент управления AppBar, он содержит свойством IsCompact.

Ниже приведен пример полного AppBar с каждым из новых элементов управления.

Результат

CommandBar

CommandBar является новым элементом управления, который позволяет создавать основные бары приложения. В отличие от AppBar, который может содержать любой вид контрола, CommandBar может содержать в себе только ICommandBarElement: AppBarButton, AppBarToggleButton и AppBarSeparator. CommandBar автоматически адаптирует его размеры, а это означает, что он уменьшит размеры и поля его дочерних элементов.

Поскольку CommandBar наследуется от AppBar’а, он соответственно перенял и все его возможности. Также он определяет два важных свойства:

1. PrimaryCommands : набор “важных” команд. Эти команды автоматически отображаются на правой стороне CommandBar’а .
2. SecondaryCommands : набор команд, которые менее необходимы. Эти команды автоматически отображаются на левой стороне CommandBar’а.

Вот пример CommandBar’а:

Результат:

Как вы можете увидеть, команды показаны на правой или левой стороне в зависимости от коллекции, к которой они принадлежат.

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

Когда использовать CommandBar?

Когда вам нужно создать бар, который содержит только AppBarButton, AppbarToggleButton и AppBarSeparator, использование CommandBar поможет вам сэкономить время. Когда вам нужно использовать любой другой элемент управления в баре, используйте AppBar. Имейте в виду, что с AppBar’ом, вы должны обрабатывать программным путем изменение размера.

Theme

В Windows 8, тему для вашего приложения можно было установить ​​на уровне приложения. После определения, она была использована каждым элементом приложения. Было невозможно ее изменить, без написания кода. В Windows 8.1 вы можете применить тему на уровне управления. Свойство RequestedTheme теперь определено в FrameworkElement, так что любой элемент управления может использовать его.

Темы, которые вы можете использовать определяются в перечислении ElementTheme. Он содержит следующие значения:  Default, Dark, Light. Вы не можете создать свои собственные темы.

Имущество RequestedTheme распространяется по визуальному дереву, а это означает, что каждый из детей унаследует тему своего родителя. В следующем примере TextBlock наследует светлую тему StackPanel’и.

Тема вашего приложения теперь может быть обновлена на лету благодаря новому расширению — ThemeResource. В принципе, ThemeResource позволяет ссылаться на ресурс и слушать изменения темы. Для тех из вас, кто знает WPF, ThemeResource как и DynamicResource, но обновляется только по изменению темы.

Тема также может быть обновлена ​​программно. По умолчанию, темная тема применяется к каждому элементу управления.

Новое API навигации

В ОС Windows 8.1 введены новые навигационные интерфейсы, которые позволяют управлять навигацией. Теперь Вы можете программно добавлять, удалять или обновлять страницы из истории навигации.

Напомним, что в Windows 8, сохраняется история вашей навигации, сберегая каждую посещаемую страницу.

У Frame теперь есть два новых свойства:

• BackStack: дает Вам List<PageStackEntry>, представляющий список страниц, которые вы посетили, и на которые вы можете вернуться.
• ForwardStack: дает Вам List<PageStackEntry>, что представляет собой список страниц, которые вы посетили, прежде чем вернуться. Например, если вы переходите от P1 до P2 к P3, и вы вернетесь один раз, ваш ForwardStack будет содержать P3.

PageStackEntry предоставляет следующие свойства:

• SourcePageType: тип исходной страницы
• Parameter: параметр, передаваемый на эту страницу
• NavigationTransitionInfo: переход, связанный с записью навигации

BackStack и ForwardStack не только для чтения. Это означает, что вы можете менять их. В следующем примере, я добавить запись в BackStack:

Сейчас, если я нажму на кнопку назад, я не перейду на предыдущую страницу, а на  CommandBarPage. Обратите внимание, что конструктор PageStackEntry принимает три параметра: страница, параметры и NavigationTransitionInfo.

Поскольку BackStack и ForwardStack коллекции, вы можете использовать Clear (), чтобы удалить все записи, которые они содержат.

Что дальше?

В третьей статье, мы увидели, как правильно спроектировать бар с новым элементом управления CommandBar. Мы также видели, как извлечь выгоду из тем и навигации.

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

Ccылка на источник: Developing a Windows 8.1 application (3/8): AppBar, Theme and navigation