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

Введение

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

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

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

 png;base64f337208b0611aa7f

В ОС 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: возможность использовать компактный режим

png;base64cbda0703f18f5918

Результат

png;base647b937f0096b229fc

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

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

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

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

png;base6415e899e969c7f6dd

png;base642cc48e25182acc0e

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

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

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

png;base643896b88330ac23d

BitmapIcon:

png;base643467f9ede1a00b68

PathIcon:

png;base6435bf87f84cbf9b7d

AppBarToggleButton

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

png;base64a3dd3f3c292f8f26

AppBarSeparator

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

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

png;base64dbe2c5f766faaa9e

Результат

png;base6452ba3dd16d18f5df

CommandBar

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

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

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

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

png;base6467c557d9c7af4a6a

Результат:

png;base6453b0e2e246f11cb5

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

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

png;base64a787366c7c97e78d

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

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

Theme

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

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

png;base64f67a3c2d0a60a206

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

png;base649b0ce2a08930933b

Тема вашего приложения теперь может быть обновлена на лету благодаря новому расширению — 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:

png;base64b1faa2a379bf28b1

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

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

Что дальше?

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

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

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

Tagged with: , , , , , ,
Опубликовано в Development, Windows 8.1
3 comments on “Разработка Windows 8.1 приложений. AppBar, Theme и навигация
  1. Kapitalnie się czyta twoje wpisy. Czekam na więcej!

  2. Ekstra się czyta twoje artykuły. nie mogę się doczekać kolejnych!

Добавить комментарий для Разработка Windows 8.1 приложений. Windowing. Часть 1 | Меняя мир Windows ... Отменить ответ

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google photo

Для комментария используется ваша учётная запись Google. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s

%d такие блоггеры, как: