Разработка 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!

Добавить комментарий

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

Логотип WordPress.com

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

Фотография Twitter

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

Фотография Facebook

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

Google+ photo

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

Connecting to %s

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