Разработка Windows 8.1 приложений. Новые контролы (часть 1)

Эта вторая статья из серии “Разработка приложений под Windows 8.1” . Эта серия предназначена для разработчиков, желающих узнать о новые возможности ОС Windows 8.1.

  1. Введение.
  2. Новые элементы управления.
  3. AppBar, темы и навигация.
  4. Windowing.
  5. Поиск, люди и контракты.
  6. Тайлы и система уведоления с Azure.
  7. Синтез речи, PDF и PlayTo.
  8. Магазин Windows и упаковка приложений.

Введение

По выходу Windows 8, в WinRT были введены новые элементы управления, такие как GridView, ListView, или SemanticZoom. Тем не менее, с ними было не так просто создавать приложения, с передовым дизайном и богатым содержанием.

Вы никогда не пробовали добавить Bing приложения (путешествия, новости и т.д), простой выбор даты или гиперссылку, всплывающие меню в свое творение?

png;base64d7d9834c5183eb30

В Windows 8.1 вводятся новые элементы управления и возможности, которые помогут вам создавать действительно стоящие приложения. Сделать макет приложения Bing теперь можно в считанные минуты. Выбора даты и гиперссылки теперь полностью интегрированы во фреймворк. Последнее, но не менее важными, стали обновления “старых” контролов, таких как WebView и другие.

Во второй статье, мы рассмотрим каждый из этих новых элементов управления.

Hub

Hub — новый элемент управления. Он позволяет отображать группы содержимого из различных источников данных. Hub состоит из нескольких разделов, что позволяет создать точку входа для приложения, где каждая секция отображает свой контент (текст, изображения и ссылки), который ведет к определенной категории.

В Windows 8, вы, вероятно, привыкли иметь GridView с сгруппированных элементов, чтобы сделать это. Это было сложным и трудоемким.

В принципе, Hub представляет собой набор HubSection. У каждой секции есть три важных свойства:

  1. Header: используется для получения или задания заголовка раздела
  2. Background: используется для получения или установки фона
  3. ContentTemplate: используется для получения или установки содержимого секции

Hub полностью заполняет экран. Чтобы изменить заголовок страницы и кнопку возврата, у него есть свойство Header.

 png;base64275129938742db1e

Результат

png;base64be0b45e6f1b8afa7

У Hub и HubSection также есть свойство HeaderTemplate, который вы можете использовать для задания заголовка.

 png;base6439104d65fdbe515c

Интерактивные заголовки

По умолчанию заголовок раздела — просто текст. Если вы хотите, чтобы пользователь использовал их в качестве ссылки, чтобы перейти к конкретному разделу вашего приложения, вы можете использовать IsHeaderInteractive. Установив его в True, заголовок преобразуется в кнопку, которая выглядит как текст, после чего символ шеврона.

png;base643c773b44ca13b125 (1)

В приведенном выше примере, я установил IsHeaderInteractive в True. Когда пользователь нажимает на него, событие SectionHeaderClick срабатывает и вызывается Hub_SectionHeaderClick. Можно получить выбранный раздел и, в соответствии с его заголовком, перенаправить пользователя на другую страницу.

Hub и SemanticZoom

Так как Hub реализует ISemanticZoomInformation интерфейс, его можно легко использована в паре с SemanticZoom.

Чтобы получить заголовки, у Hub есть свойство SectionHeaders, которые предоставит вам объект типа IObservableVector <object>.

 png;base647ea1fdf868025df5 png;base64665910925dd2789d

Результат

 png;base64eeeecda2d38c4ff1

Вертикальная ориентация

По умолчанию, Hub выровнен по горизонтальной оси. Вы можете использовать свойство Orientation и изменить его на вертикальную ориентацию. Данный вариант может быть очень полезен, когда вы хотите использовать многозадачность.

png;base64300477e6c4ffecc7

В приведенном выше примере, я определил обработчик события SizeChanged. Когда срабатывает событие и если приложение меньше, чем 500px, я изменяю ориентацию Hub control’а для отображения разделов в вертикальной ориентации.

 png;base64196f58492596b140

Наконец, у Hub control’a есть свойство DefaultSectionIndex, которую можно использовать для установки индекса раздела по умолчанию (начиная с 0).

DatePicker, TimePicker

DatePicker

DatePicker это новый элемент управления, который позволяет выбрать дату (месяц, день, год). В основном, он состоит из трех выпадающих списков можно отформатировать как вам угодно по этими трем свойствам: MonthFormat, DayFormat, YearFormat.

Формат строки довольно необычно, но IntelliSense поможет вам выбрать нужный формат.

Если вы хотите скрыть месяц, день или год, вы можете использовать MonthVisible, DayVisible и YearVisible свойствами.

Вы также можете добавить заголовок.

png;base6469ebbea5af0bd11c

png;base64b0b420a36a0e1797

Ниже приведены некоторые другие полезные свойства:

  • CalendarIdentifier: используется для определения календарной системы (григорианский, иврит, японский, …)
  • Orientation: вертикальная или горизонтальная (значение по умолчанию)
  • MinYear / MaxYear: используется для установки минимального и максимального значения года

Также у DatePicker есть событие DateChanged, которое срабатывает при изменении даты.

Наконец, если вы хотите получить или установить дату программно, вы можете использовать свойство Date типа DateTimeOffset.

 png;base641e4ec3383715dcbd

TimePicker

TimePicker так же легко использовать, как и DatePicker. Вот его наиболее важных свойства:

  • Time: объект TimeSpan, используется для получения или установки выбора времени
  • ClockIdentifier: используется для получения или установки системных часов (на 24 или 12 часовой основе)
  • Header: используется для определения заголовка
  • MinuteIncrement: приращение времени. Например, со значением значение 5, минуты будут отображаться в формате: 0, 5, 10,15 …

png;base646ae9bf9201a2139

Также, как и DatePicker, у TimePicker есть событие TimeChanged, которое срабатывает, когда пользователь выбирает новое время.

На этом первая часть статьи о новых контролах заканчивается. Совсем скоро вашему вниманию будет предоставлено вторая часть.

Ссылка на источник: Developing a Windows 8.1 application (2/8): new controls

Advertisements
Tagged with: , , , ,
Опубликовано в Development, Windows 8
One comment on “Разработка Windows 8.1 приложений. Новые контролы (часть 1)

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

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

Логотип WordPress.com

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

Фотография Twitter

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

Фотография Facebook

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

Google+ photo

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

Connecting to %s

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