2. Дронов В.А. Windows 8. Разработка Metro

Казачкова А.А., Кудрина Е.В.
МОДУЛЬ 3
ОСНОВЫ РАЗРАБОТКИ ПРИЛОЖЕНИЙ
НА ЯЗЫКЕ С# ПОД WINDOWS 8
2014
СОДЕРЖАНИЕ
Предисловие .............................................................................................................................. 2
Среда разработки ...................................................................................................................... 3
Введение .................................................................................................................................... 4
Платформа Windows 8 .......................................................................................................... 4
Windows Store – приложения ............................................................................................... 5
Программная платформа ...................................................................................................... 8
Создание первого Windows Store – приложения ................................................................ 10
Инструментарий .................................................................................................................. 10
Лицензия разработчика ...................................................................................................... 10
Создание проекта ................................................................................................................ 12
Структура проекта приложения ........................................................................................ 13
Добавляем функциональность приложению .................................................................... 15
Отладка приложения на имитаторе (симуляторе) ........................................................... 18
Страницы и навигация ........................................................................................................... 21
Задание начальной страницы приложения ....................................................................... 21
Создание новой страницы .................................................................................................. 23
Передача параметров между страницами......................................................................... 27
Панель приложения ................................................................................................................ 30
Создание панелей приложения .......................................................................................... 30
Свойство IsSticky ................................................................................................................ 33
Отображение всплывающих окон и меню ....................................................................... 33
«Живые» плитки ..................................................................................................................... 35
Настройка плиток для приложения ................................................................................... 35
Изменение плитки ............................................................................................................... 37
Задания для проверки знаний ................................................................................................ 42
Заключительное слово ........................................................................................................... 44
Литература .............................................................................................................................. 45
1
ПРЕДИСЛОВИЕ
Модуль «Основы разработки приложений на языке С# под Windows 8» дает
уникальную возможность широкому кругу школьников и студентов, обладающих
минимальными знаниями в области программирования на языке C#, с нуля научиться
создавать свои собственные приложения для портативных устройств, работающих под
управлением операционной системы Windows 8.
Особенность данного модуля заключается в том, что он помогает учащимся
познать удивительный мир программирования через изучение современных
информационных технологий, создаваемых компанией Microsoft. В ходе освоения
модуля учащиеся создадут свое первое Windows Store – приложение.
Модуль может быть успешно интегрирован в школьный учебный курс
«Информатика и ИКТ» (или факультатив по программированию), а также
использоваться в процессе изучения дисциплин, посвященных изучению современных
технологий программирования, для студентов начальных курсов вузов и колледжей.
2
СРЕДА РАЗРАБОТКИ
Главный инструмент для создания приложений для платформы .Net является
Microsoft Visual Studio, которая имеет множество редакций.
Необходимое программное обеспечение можно получить, став участником
программы DreamSpark.
DreamSpark — это программа Майкрософт по поддержке технического
образования путем предоставления доступа к программному обеспечению Майкрософт
для учебных, преподавательских и исследовательских целей.
Цель программы — бесплатный доступ к профессиональным средствам
разработки и проектирования для учащихся, который позволит им воплотить свои
мечты, подготовить новый прорыв в технологиях или, по крайней мере, раньше начать
профессиональную деятельность.
Программа DreamSpark помогает преподавателям знакомить учащихся с самыми
современными технологиям и проводить исследования. Майкрософт сознает, что для
того, чтобы стимулировать современный процесс обучения и сделать его более
актуальным и увлекательным, учащимся необходим доступ к разнообразным ресурсам.
Программа DreamSpark предоставляет преподавателям все необходимые ресурсы,
благодаря которым они всегда будут иметь доступ к самым современным технологиям,
которые позволят по-новому увлечь и мотивировать учащихся.
DreamSpark — это также подписка для учебных заведений. Эта программа
предлагает экономичный способ оснащения лабораторий и аудиторий, а также
компьютеров учащихся и преподавателей инструментальными средствами разработки
и программным обеспечением для персональных компьютеров и серверов Майкрософт
в учебных и исследовательских целях. Она позволяет сократить расходы на обучение и
содержание лабораторий.
Как возможно получить программное обеспечение DreamSpark?
Если вы учащийся. Просто создайте учетную запись и пройдите проверку
учебного статуса, а потом бесплатно загружайте программное обеспечение с этого
сайта. Если ваше учебное заведение подписано на эту программу, то вы также получите
больший выбор программного обеспечения.
Если вы преподаватель. Вы получите доступ к программе, если ваше учебное
заведение оформит подписку. Предложите администрации своего учебного заведения
подписаться на программу DreamSpark и оформите подписку сегодня же!
Если вы представляете учебное заведение. Оформите подходящий вариант
подписки. Программа DreamSpark Standard подходит для любого типа учебных
заведений — от начального до высшего образования. Программа DreamSpark Premium
способна предложить более широкий выбор программного обеспечения (более 500
программных продуктов) и доступна лишь для технических факультетов.
Узнать
больше про программу DreamSpark можно по ссылке
https://www.dreamspark.com.
Если вы не можете стать участником программы DreamSpark, то Microsoft
предлагает вам воспользоваться бесплатной Express-редакцией Visual Studio.
Установить требуемую версию программного продукта можно по ссылке:
http://www.microsoft.com/visualstudio/rus/downloads.
Также вам будут полезны информационно-образовательные ресурсы,
расположенные на сайте MSDN (Microsoft Software Development Network)
http://msdn.microsoft.com/ru-ru/.
3
ВВЕДЕНИЕ
Платформа Windows 8
Широкое и быстрое распространение портативных устройств, таких как
ноутбуки и планшеты, диктует новые приоритеты в создании операционных систем и
приложений. Особую важность приобретает экономное использование всех доступных
ресурсов, в том числе заряда батареи, а также интерфейсные изменения, связанные с
распространением сенсорного ввода. Отличительные особенности операционной
системы Windows 8 напрямую следуют из задач, которые ставили перед собой её
разработчики:
1. Увеличить время автономной работы устройств.
2. Оптимизировать операционную систему под сенсорный ввод (тач-управление).
3. Создать механизмы по продаже и продвижению приложений.
В результате Windows 8 кардинально отличается от предыдущих версий
операционных систем семейства Windows как с точки зрения пользователя (что заметно
уже при первом взгляде на интерфейс), так и для разработчиков.
Рис. 1.Начальный экран Windows 8.1.
Замечание. В зависимости от версии операционной системы и от того, как в данный
момент она настроена, начальный экран может немного отличаться. Здесь и далее мы
приводим примеры с использованием Windows 8.1.
На экране располагаются «плитки» некоторых установленных приложений.
Запуск приложения происходит по нажатию на плитку. Приложения могут отображать
и обновлять на плитках различную информацию, как текстовую, так и графическую, в
том числе, загружаемую из интернета. У каждого приложения может быть несколько
плиток. Пользователь может добавлять и убирать плитки приложений, выбирать размер
из числа доступных. Также имеется общий список всех установленных приложений
(см. рис. 2).
4
Рис. 2. Общий список всех установленных приложений.
Все приложения, разработанные под Windows 7 или совместимые с Windows 7,
функционируют и в Windows 8. Однако в Windows Store можно загрузить только
приложения, использующие новую программную платформу Windows Runtime.
Windows Runtime – это фактически новый Windows API.
Замечания
1. Windows Store — это магазин приложений для Windows 8, установленное приложение для
покупки и загрузки приложений для платформы Windows 8 и Windows RT.
2. Windows Runtime или WinRT — это модель программирования от Microsoft, являющаяся
основой для разработки для Windows 8. WinRT поддерживает разработку на C++ (с
использованием расширения языка Component Extensions, C++/CX), C#, Visual Basic.NET и
JavaScript.
3. Windows RT (не путать с WinRT) — редакция операционной системы Windows 8 для
планшетных и других компьютеров на базе ARM-процессоров. Windows RT не совместима с
существующими Windows-приложениями и поставляется с новыми планшетами Microsoft
Surface в качестве предустановленной системы.
4. API (application programming interface) - интерфейс программирования приложений
(иногда интерфейс прикладного программирования) — набор готовых классов, процедур,
функций, структур и констант, предоставляемых приложением (библиотекой, сервисом)
для использования во внешних программных продуктах.
В данном модуле мы рассмотрим основы разработки так называемых Windows
Store – приложений на языке С# под Windows 8.1. Windows Store – приложения
характеризуются в первую очередь новым подходом к созданию интерфейса и
использованием нового API – WinRT.
Задание. Используя дополнительные источники информации:
1) узнайте, чем Windows 8.1 принципиально отличается от Windows 8;
2) изучите функциональные возможности Windows 8.1.
Windows Store – приложения
В отличие от классических Windows-приложений, Windows Store – приложения
состоят из одного окна без обрамления, а также без заголовка, кнопок «Закрыть»,
«Развернуть» и «Свернуть». По умолчанию Windows Store – приложение занимает весь
5
экран. Такое изменение призвано, с одной стороны, освободить пространство,
занимаемое ранее интерфейсными элементами окна (положительный результат такого
подхода наиболее заметен на устройствах с небольшим экраном), с другой стороны,
сконцентрировать внимание пользователя на содержимом. Windows Store –
приложения могут работать в книжной или альбомной ориентации экрана, что
особенно актуально для планшетов и мобильных устройств.
Windows Store – приложения заполняют экран по высоте. Ширина окна
приложения зависит от количества одновременно открытых приложений. В Windows
8.1 по умолчанию минимальная ширина приложения – 500 пикселей, но может быть
уменьшена до минимального значения ширины в Windows 8 – 320 пикселей.
Минимальная высота приложения составляет 768 пикселей.
Замечания.
1. При книжной ориентации (Portrait) – высота экрана больше его ширины, при альбомной
ориентации (Landscape) – ширина экрана больше его высоты.
2. В Windows 8 Windows Store – приложения могут работать только в трех режимах:
 приложение развернуто на весь экран (Full Screen);
 приложение закреплено сбоку экрана (слева или справа) (Snapped). Ширина приложения
в таком режиме составляет 320 пикселов;
 приложение работает совместно с другим закрепленным сбоку приложением и
занимает все оставшееся пространство (Filled).
Таким образом, в Windows 8 на экране одновременно могут находиться не более двух
Windows Store – приложений.
В Windows 8.1 на экране может отображаться сразу несколько Windows Store –
приложений (количество ограничивается шириной самого экрана и минимальной
шириной каждого из запущенных приложений), в том числе, может быть открыто
несколько окон одного и того же приложения. Также приложение может запустить
другое приложение.
Раньше программный API был нацелен фактически исключительно на работу с
мышью и клавиатурой. Windows Store – приложения работают с разнообразными
устройствами ввода, включая перо, мышь, клавиатуру и сенсорный ввод. В
программной модели приложений для всех этих устройств используется единый набор
стилей работы с элементами управления, например, экраном. Также имеется набор
стилей
по
умолчанию,
гарантирующий
нормальную
работу
элементов
пользовательского интерфейса с сенсорным вводом.
Помимо привычных элементов управления, Windows Store – приложения
содержат несколько новых элементов, к ним в первую очередь можно отнести панель
приложения (App Bar) и «чудо-кнопки» (Charms).
Панель приложения впервые появилась в операционной системе Windows Phone,
но в Windows 8 претерпела существенные изменения. Она размещается вне окна
приложения, появляется при необходимости и служит основным командным
интерфейсом (на странице может быть две панели: панель навигации сверху и панель
приложения снизу). Панели приложения носят, хотя и важный, но вторичный характер
и, соответственно, появляются только по запросу пользователя — явному (жестом или
щелчком правой кнопки мыши) или неявному (выделению элемента, к которому можно
применить какие-то действия).
6
Другой новый элемент управления, реализованный в Windows 8, – это «чудокнопки» (Charms) – фиксированный набор кнопок, используемый во всех приложениях.
Панель всплывает из-за правого края сенсорного экрана. Также отобразить её можно с
помощью сочетания клавиш WINKEY + C (где «C» = «Charms»). Другой способ –
переместить курсор мыши в верхний или нижний правый угол экрана (при этом
отобразится прозрачная версия панели «чудо-кнопок»), затем переместить курсор
мыши вдоль правого края экрана к середине. С помощью «чудо-кнопок» пользователи
могут:
1. искать контент, размещенный в текущем или в каком-либо ином приложении;
2. открывать доступ к данным выбранного приложения из других приложений;
3. подключаться к устройствам, выполнять потоковую передачу мультимедийных
данных, а также печатать документы;
4. настраивать приложения;
5. переключаться на начальный вид экрана по нажатию кнопки «Пуск»
7
Программная платформа
Создавая Windows 8, компания Microsoft разработала новый интерфейс
программирования приложений (API) – Windows Runtime (WinRT). Windows Runtime
— это не только новая модель разработки приложений, но и объектноориентированный, не зависящий от языка программный интерфейс.
Рис. 3. Архитектура платформы Windows 8
Windows Store – приложения могут создаваться на различных языках
программирования: C#, JavaScript, Visual Basic и C++. Невизуальные компоненты,
созданные на любом из перечисленных языков (кроме JavaScript), можно встраивать в
приложения, написанные на других языках. Все программные интерфейсы WinRT
выглядят «родными» для каждого из поддерживаемых языков программирования,
поэтому для взаимодействия с WinRT не придется предпринимать никаких
дополнительных усилий. Для разработчика управляемые типы .NET Framework и типы
WinRT выглядят одинаково.
Пользовательский интерфейс приложений, написанных на JavaScript, создается с
помощью HTML 5, в остальных случаях применяется XAML (eXtensible Application
Markup Language — расширяемый язык разметки приложений). XAML стал частью
Windows Runtime, а значит, и одним из базовых компонентов операционной системы
Windows 8.
В общем случае, Windows Store – приложения изолированы друг от друга. Это
обеспечивает стабильность и безопасность как самих приложений, так и системы в
целом. Разработчики приложений должны объявить, какие потенциально небезопасные
возможности они будут использовать. Например, если приложению может
понадобиться работать с камерой, об этом должно быть объявлено заранее (при
установке), а при первом обращении к камере система спросит у пользователя
разрешение на данное действие. Аналогично обстоит дело и, например, с определением
местоположения. Пользователь может явно разрешить или запретить предоставление
приложению такой информации (см. рис. 4).
8
Рис. 4. Запрос приложения Weather (Погода) об использовании
информации о местоположении пользователя
Задание.
Воспользовавшись
ресурсами
порталов
DreamSpark
(https://www.dreamspark.com) и MSDN (http://msdn.microsoft.com/ru-ru/) установите на
свой компьютер необходимое программное обеспечение. Вам потребуется: Windows
8.1 и Visual Studio 2013.
Замечания.
1. Если на вашем компьютере установлена операционная система, отличная от Windows 8,
и вы хотите ее сохранить, то можно установить вторую операционную систему на
другой жёсткий диск или в другой раздел, или использовать виртуальную машину,
например, VirtualBox (свободно распространяемое программное обеспечение).
2. Если вы не являетесь участником программы DreamSpark, то вы можете установить
Express-редакцию Visual Studio.
9
СОЗДАНИЕ ПЕРВОГО
WINDOWS STORE – ПРИЛОЖЕНИЯ
Инструментарий
Главный инструмент для создания приложений на платформе Microsoft — это
Visual Studio.
Замечание. Для удобства мы будем приводить название команд и пунктов меню
Visual Studio на двух языках – английском и русском.
Быстро найти ссылку на загрузку Visual Studio можно через Windows Store. Для
этого во встроенном приложении Store (Магазин) нужно воспользоваться поиском для
перехода на страницу Visual Studio, а затем нажать на ссылку Go to publisher’s website
(Получение приложения от издателя).
Запустим установленную версию Visual Studio.
Рис. 5.Visual Studio 2013
в списке приложений
Лицензия разработчика
Прежде чем приступить к созданию приложения, потребуется получить
лицензию разработчика (Get a developer license).
Замечание. В коммерческих версиях Visual Studio лицензию предлагается получить
после создания проекта Windows Storе–приложения, а не при запуске Visual Studio.
Рис. 6. Запрос на получение лицензии разработчика
10
Лицензия разработчика позволяет создавать и тестировать Windows Store –
приложения на конкретной копии операционной системы Windows 8 до их
сертификации в Windows Store. Без такой лицензии приложения, в том числе
разрабатываемые в данный момент, работать не будут. Лицензию необходимо
периодически обновлять, т. к. она выдается на фиксированный период.
Замечание. Если у вас есть учетная запись для выкладывания приложений в Windows
Store (платная), лицензия разработчика будет выдана на более длительный срок.
Лицензия разработчика привязывается к учетной записи Microsoft (Microsoft
account, ранее известный как Windows LiveID). В открывшемся диалоговом окне
введите данные своей учетной записи и нажмите кнопку Sign in.
После этого лицензия будет получена и откроется диалоговое окно, сообщающее
дату истечения срока действия лицензии.
При желании можно получить новую лицензию, не дожидаясь срока истечения
текущей. Для этого выберите в меню Visual Studio пункт МАГАЗИН – Получить
лицензию разработчика… (STORE – Acquire Developer Licence...)
11
Создание проекта
Теперь мы можем приступить к созданию проекта Windows Store – приложения.
Выберем пункт меню ФАЙЛ – Создать проект… (File – New Project).
В левой части открывшегося диалогового окна Создание проекта (New Project) в
разделе Установленные – Шаблоны (Installed – Templates) выберем сначала опцию
Visual C#, а затем — Магазин Windows (Windows Store). В центральной части окна
будут доступны несколько шаблонов проектов. Выберем самый простой из них Пустое приложение XAML (Blank App (XAML)).
В поле Имя (Name) введём название приложения (например, «TestApp») и
укажем в поле Расположение (Location) папку, в которой будут размещаться файлы
проекта приложения. После этого подтвердим создание приложения, нажав кнопку OK.
В результате будет создан новый проект Windows Store – приложения, и откроется C#код файла App.xaml.
У нас есть готовое работающее приложение, которое пока ничего не делает.
Убедимся в этом, запустив его на отладку. Для этого нажмём клавишу F5 на клавиатуре
либо кнопку с зеленой стрелкой на панели инструментов, либо выберем пункт меню
ОТЛАДКА – Начать отладку (Debug – Start Debugging). Приложение запустится,
результатом его работы будет черный экран.
Заметим, что созданное нами приложение было встроено в операционную
систему, и появилось в списке установленных приложений.
12
Замечание. В Windows 8 также произойдёт автоматическое добавление плитки
приложения на начальный экран в конец списка. В Windows 8.1 автоматического добавления
плитки не происходит: пользователь сам выбирает, какие из установленных приложений
добавить на начальный экран.
Структура проекта приложения
Рассмотрим наиболее важные файлы созданного нами проекта Windows Store –
приложения. Для этого обратим внимание на окно Обозревателя решений (Solution
Explorer).
MainPage.xaml — это разметка главной страницы приложения на языке XAML.
К названию страницы не предъявляется никаких требований, важно только указать в
файле App.xaml.cs, какую страницу считать главной (её пользователь увидит первой).
По умолчанию в качестве такой страницы используется MainPage.xaml. Сейчас это
единственная страница нашего приложения, но, как правило, приложения для
Windows 8 состоят из нескольких страниц, объединённых с помощью элементов
навигации.
MainPage.xaml.cs — это файл кода (code-behind) на языке C# страницы
MainPage.xaml. Здесь, как правило, находится основная часть кода, относящегося к
логике работы соответствующей страницы.
13
App.xaml — это разметка объекта Windows Store – приложения на языке XAML.
Данная разметка не имеет визуального представления и не является страницей
приложения. В файле App.xaml можно хранить данные и настройки для всего
приложения. Кроме того, в данном файле удобно определять стили и подключать
ресурсы, используемые на нескольких страницах приложения, хотя это и не
обязательно. Также в данном файле можно указать тему оформления приложения
(светлую или темную).
App.xaml.cs — это файл кода (code-behind) на языке C# для App.xaml. В данном
файле обрабатываются события уровня приложения, такие как запуск, активация, в том
числе активация по поисковому запросу, и деактивация приложения. Кроме того, в
App.xaml.cs можно перехватывать необработанные исключения и отлавливать ошибки
навигации между страницами.
Package.appxmanifest — это манифест приложения. Он содержит множество
настроек, таких как заголовок, пути к картинкам для плиток (Tiles) и экрана заставки
(Splash Screen), задание поддерживаемых ориентаций экрана, определение
необходимых приложению системных возможностей и т. д. Несмотря на то, что это
XML-файл, он почти всегда редактируется не напрямую, а с помощью встроенного в
Visual Studio графического редактора. Редактор манифеста приложения можно открыть
двойным щелчком мышью по имени соответствующего файла в окне обозревателя
решений (Solution Explorer).
Рис. 7. Редактор манифеста
AssemblyInfo.cs — еще один конфигурационный файл, в котором определяются
некоторые метаданные главной сборки (Assembly) приложения.
TestApp_TemporaryKey.pfx — это криптографический сертификат с закрытым
ключом, которым подписывается приложение.
Logo*.png, SmallLogo*.png, StoreLogo*.png — логотипы для большой и малой
плиток приложения, а также иконка для списка всех приложений. Это очень важные
файлы, т. к. логотипы – первое, что увидит пользователь сразу же после установки
приложения (или до установки в магазине). В процессе работы приложение может
14
программно управлять своими плитками. Логотипы представляют собой картинки с
прозрачным фоном, цвет реального фона задается в манифесте приложения.
SplashScreen*.png — картинка для экрана заставки, отображаемая во время
загрузки приложения до главной страницы. При создании своей картинки необходимо
учитывать, что она служит исключительно для информирования пользователя о
загрузке приложения, не более того.
Кроме перечисленных файлов в проекте присутствует раздел References. В
данном разделе находятся ссылки на сборки (Assemblies) и фреймворки (Frameworks),
подключенные приложением. В нашем примере подключены два фреймворка: .NET for
Windows Store apps и Windows, включающие все необходимые сборки из .NET
Framework и Windows Runtime соответственно.
Замечание. В Visual Studio 2012 присутствует также файл StandardStyles.xaml — файл
ресурсов стилей для графических элементов управления. Этот файл подключается в App.xaml
и позволяет применять содержащиеся в нём стили и их модификации к элементам на всех
страницах приложения. Начиная с версии 2013 данный файл не используется, а большинство
содержащихся в нём стилей теперь предоставляются фреймворком (некоторые были
объединены, переименованы или удалены).
Добавляем функциональность приложению
Добавим на страницу нашего приложения кнопку, текст на которой будет
меняться на «Hello, world!» после её нажатия. Для этого откроем редактор
пользовательского интерфейса главной страницы приложения с помощью двойного
щелчка мышью по файлу MainPage.xaml в окне Solution Explorer.
Рис. 8 . Окно редактора пользовательского интерфейса.
15
Пользовательский интерфейс Windows Store – приложений, написанный на
языке C#, описывается декларативным образом на языке XAML. Visual Studio
позволяет редактировать XAML-код не только напрямую, но также и в графическом
редакторе WYSIWYG (What You See Is What You Get, «что видишь, то и получишь»).
Окно редактора пользовательского интерфейса Windows Store – приложений по
умолчанию разделено по горизонтали на две половины. Вверху находится графический
редактор WYSIWYG, схематически выполненный в виде планшета, а внизу редактор
XAML-разметки. Посередине располагается панель, с помощью которой можно
поменять редакторы местами, изменить размер каждого из них, переключиться в
режим, когда редакторы располагаются горизонтально справа налево, а не сверху вниз,
а также скрыть один из редакторов и работать, например, только с XAML-разметкой.
Замечание. С подробными комментариями к XАML-документации можно
познакомиться по ссылке http://msdn.microsoft.com/ru-ru/library/b2s063f7.aspx.
Добавим кнопку, перетащив соответствующий элемент (Button) из панели
элементов (Toolbox) в графический редактор. Зададим кнопке имя (свойство Name),
например, «myButton», и изменим то, что написано на кнопке (свойство Content),
например, на «Нажми меня».
Рис. 9. Кнопка с заданными свойствами
Изменим положение кнопки так, чтобы она находилась в центре экрана, для
этого отредактируем элемент XAML-разметки, связанный с кнопкой, заменив способ
расположения элемента по вертикали (VerticalAlignment) и горизонтали
(HorizontalAlignment) на выравнивание по центру (Center) и убрав отступы (Margin):
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="MyButton" Content="Нажми меня"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
16
С XAML-разметкой связан код на языке C#, располагающийся в файле
MainPage.xaml.cs. Перейти к нему можно щёлкнув по соответствующему файлу в
обозревателе решений или выбрав пункт Перейти к коду (View Code) в контекстном
меню при редактировании XAML-разметки. Также к С#-коду можно перейти при
добавлении обработчика какого-либо события.
Добавим обработчик нажатия на кнопку, щёлкнув по ней два раза в графическом
интерфейсе. Другой способ создания обработчика – задать событие Click в свойствах
элемента или XAML-разметке.
Рис. 10. Код страницы с обработчиком нажатия кнопки
Страница представляет собой класс MainPage, в конструкторе которого
инициализируется графический интерфейс (метод this.InitializeComponent). В классе
переопределен метод OnNavigatedTo, вызываемый при переходе на страницу. Для
обработки события нажатия на кнопку был автоматически сгенерирован пустой метод
MyButton_Click. Добавим в него изменение текста кнопки на «Hello, world!».
MyButton.Content = "Hello, world!";
И запустим новую версию приложения.
17
Рис. 11. Приложение до нажатия кнопки
Рис. 12. Приложение после нажатия кнопки
Отладка приложения на имитаторе (симуляторе)
Помимо запуска и отладки приложения непосредственно на локальной машине,
мы можем воспользоваться имитатором. Имитатор позволяет протестировать работу
приложения в различных условиях, например, при большем разрешении, чем доступно
на локальной машине, или протестировать отдельные аспекты работы сенсорного ввода
при отсутствии сенсорного экрана. С другой стороны, имитатор – это не эмулятор.
Имитатор не является виртуальной машиной: внутри него работает та же копия
18
Windows, на той же машине и под тем же пользователем, что и при отладке на
локальной машине.
Для запуска приложения в имитаторе нужно изменить в выпадающем списке
кнопки запуска пункт Локальный компьютер (Local Machine) на Имитатор (Simulator), а
затем нажать кнопку запуска.
Рис. 2.13 Переход в режим Имитатор
После нажатия кнопки запуска на имитаторе откроется окно имитатора и
запустится приложение.
Рис. 2.14. Отладка приложения в имитаторе
В имитаторе для удобства можно изменить размер окна, это никак не отразится
на виртуальном разрешении экрана.
По центру внизу имитатора располагается кнопка Start ( ), функциональность
которой аналогична программной кнопке на панели «чудо-кнопок» или аппаратной
кнопке на клавиатуре. В правой части окна имитатора находятся 14 кнопок управления:
 Свернуть имитатор (Minimize).
 Располагать имитатор поверх других окон (Always on top).
19
 Режим работы, при котором физическая мышь является мышью в имитаторе (Mouse
mode).
 Режим работы, при котором физическая мышь эмулирует сенсорный ввод (касание
пальцем) в имитаторе (Basic touch mode).
 Эмуляция сенсорного зуммирования с помощью мыши (Pinch/zoom touch mode).
 Эмуляция сенсорного вращения (двумя пальцами) с помощью мыши (Rotation touch
mode).
 Поворот экрана по часовой стрелке на 90° (Rotate clockwise (90 degrees)).
 Поворот экрана против часовой стрелки на 90° (Rotate counterclockwise (90
degrees)).
 Изменение разрешения экрана (Change resolution).
 Установка местоположения (Set location).
 Получение снимка экрана (Copy screenshot).
 Настройки снятия снимков экрана (Screenshot settings).
 Имитация свойств сетевых подключений (Network connection properties).
 Помощь (Help).
Поворот имитатора эмулирует поворот реального устройства. Для изменения
разрешения экрана имитатора нажмите на соответствующую кнопку. Откроется меню с
выбором размера диагонали экрана и разрешения. При одной и той же диагонали
экрана, например, 10,6 дюймов, можно задать разное разрешение. Это связано с тем,
что экраны могут иметь различную плотность пикселов (точек на дюйм — PPI, Pixels
Per Inch). Для растровых рисунков, используемых в приложении, желательно иметь
несколько вариантов для экранов с разной плотностью пикселов.
Один из наиболее интересных аспектов использования симулятора — эмуляция
сенсорного ввода с использованием мыши.
Задание. Изучите все кнопки управления отладки Windows Store – приложения в
режиме Имитатора.
20
СТРАНИЦЫ И НАВИГАЦИЯ
Созданное нами ранее приложение состоит всего из одной страницы. Как
правило, реальные приложения состоят из набора страниц с возможностью удобного
перемещения (навигации) между ними. С точки зрения пользователя, работа с Windows
Store – приложениями очень похожа на работу в Web-браузере. Для разработчика
различия более существенны, так как в отличие от Web-страниц одного Web-сайта
страницы одного и того же Windows Store – приложения разделяют состояние
приложения. Тем не менее, прослеживается явная аналогия: разметка страниц + код +
стили (это может быть как html + JavaScript + CSS, так и XAML + C# + стили XAMLразметки).
Задание начальной страницы приложения
По умолчанию начальной страницей нашего приложения является единственная
его страница MainPage.xaml. Начальная страница задаётся в файле App.xaml.cs.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// Шаблон пустого приложения задокументирован по адресу
//http://go.microsoft.com/fwlink/?LinkId=234227
namespace TestApp
{
/// <summary>
/// Обеспечивает зависящее от конкретного приложения поведение, дополняющее
/// класс Application по умолчанию.
/// </summary>
sealed partial class App : Application
{
/// <summary>
/// Инициализирует одноэлементный объект приложения. Это первая
/// выполняемая строка разрабатываемого кода; поэтому она является
/// логическим эквивалентом main() или WinMain().
/// </summary>
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
/// <summary>
/// Вызывается при обычном запуске приложения пользователем. Будут
21
/// использоваться другие точки входа, will be used such as when the application is
/// launched to open a specific file.
/// </summary>
/// <param name="e">Сведения о запросе и обработке запуска.</param>
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
#if DEBUG
if (System.Diagnostics.Debugger.IsAttached)
{
this.DebugSettings.EnableFrameRateCounter = true;
}
#endif
Frame rootFrame = Window.Current.Content as Frame;
// Не повторяйте инициализацию приложения, если в окне уже имеется
// содержимое, только обеспечьте активность окна
if (rootFrame == null)
{
// Создание фрейма, который станет контекстом навигации, и переход к
// первой странице
rootFrame = new Frame();
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
//TODO: Загрузить состояние за ранее приостановленного приложения
}
// Размещение фрейма в текущем окне
Window.Current.Content = rootFrame;
}
if (rootFrame.Content == null)
{
// Если стек навигации не восстанавливается для перехода к первой
// странице, настройка новой страницы путем передачи необходимой
// информации в навигации качестве параметра
if (!rootFrame.Navigate(typeof(MainPage), e.Arguments))
{
throw new Exception("Failed to create initial page");
}
}
// Обеспечение активности текущего окна
Window.Current.Activate();
}
/// <summary>
/// Вызывается при приостановке выполнения приложения. Состояние приложения
/// сохраняется без учета информации о том, будет ли оно завершено или
/// возобновлено с неизменным содержимым памяти.
/// </summary>
/// <param name="sender">Источник запроса приостановки.</param>
/// <param name="e">Сведения о запросе приостановки.</param>
private void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
//TODO: Сохранить состояние приложения и остановить все фоновые операции
deferral.Complete();
}
}
}
22
Класс App наследуется от класса Application, он установлен в манифесте
приложения Package.appmanifest в качестве входной точки. Таким образом, его
конструктор выполняется первым из всего несистемного кода приложения (того кода,
который пишется нами). Его можно рассматривать как своеобразный аналог функции
Main() в традиционных .NET-приложениях.
При обычном запуске приложения (нажатием на плитку приложения)
вызывается метод OnLaunched объекта класса приложения. Приложение состоит из
одного окна, занимающего по умолчанию всё пространство на экране. Содержимое
приложения будет находиться в этом окне. В методе OnLaunched создаётся объект
класса Frame для организации загрузки страниц и переходов между ними. Далее во
фрейм, занимающий в свою очередь всё пространство окна приложения, загружается
главная страница приложения.
rootFrame.Navigate(typeof(MainPage), e.Arguments)
Для этого вызывается функция Navigate объекта фрейма с типом страницы, на
которую будет осуществляться переход, в качестве первого аргумента. В нашем случае
класс главной страницы – MainPage. Соответственно, чтобы при запуске приложения
открывалась другая страница, надо вместо MainPage указать её класс. Второй аргумент
функции Navigate – параметры, передаваемые загружаемой странице.
Создание новой страницы
Создадим ещё одну страницу нашего приложения. Для этого в окне
обозревателя решений щёлкнем правой кнопкой мыши по названию проекта и в
появившемся контекстном меню выберем Добавить – Создать элемент… (Add – New
Item…)
Откроется окно, в котором можно выбрать тип добавляемого элемента и имя
файла для него:
23
Выберем в этот раз шаблон Основная страница (Basic Page), придумаем
название для страницы (например, «Page2.xaml») и нажмём кнопку Добавить (Add). В
появившемся диалоговом окне согласимся с предложением добавить в проект
дополнительные зависимости:
В шаблоне Основная страница (Basic Page) есть заголовок страницы и кнопка
«Назад», отображаемая в том случае, если возможен переход на предыдущую страницу.
24
XAML-разметка страницы Page2.xaml выглядит следующим образом:
<Page
x:Name="pageRoot"
x:Class="TestApp.Page2"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:common="using:TestApp.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">My Application</x:String>
</Page.Resources>
<!-This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
25
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding
NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}"
Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom"
Margin="0,0,30,40"/>
</Grid>
</Grid>
</Page>
Заголовок страницы («My Application») определен в XAML-ресурсах страницы и
отображается в текстовом блоке с именем pageTitle с помощью механизма связывания
данных. Кнопка перехода на предыдущую страницу (backButton) использует стиль
NavigationBackButtonNormalStyle, поэтому выглядит как круг со стрелкой, а не как
стандартная прямоугольная кнопка.
Помимо самой страницы были добавлены файлы, которые можно увидеть в
папке Common проекта приложения. Поскольку эти файлы используются рядом
шаблонов (в том числе шаблоном Basic Page), их не рекомендуется перемещать,
переименовывать или удалять.
Добавим на страницу MainPage.xaml возможность перехода на страницу
Page2.xaml. Для этого создадим новый элемент управления, выглядящий как ссылка, гипертекстовую кнопку (HyperlinkButton).
Укажем название (свойство Name) гипертекстовой кнопки, например,
«HyperlinkButtonToPage2», заменим содержимое (свойство Content) текстом
«Страница 2», также зададим расположение кнопки с помощью выравнивания и
26
отступов (свойства HorizontalAlignment, VerticalAlignment и Margin: выровняем по
центру как и первую кнопку, но поднимем выше на 200 пикселей)
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="MyButton" Content="Нажми меня"
HorizontalAlignment="Center" VerticalAlignment="Center"
Click="MyButton_Click"/>
<HyperlinkButton x:Name="HyperlinkButtonToPage2" Content="Страница 2"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="0,-200,0,0"/>
</Grid>
Затем добавим обработчик нажатия на кнопку (Click) и воспользуемся
предложением автоматически создать для этого новый метод.
Код обработчика будет содержать переход на вторую страницу, выполняемый с
помощью известного нам метода Navigate (аргумент - тип страницы - Page2).
private void HyperlinkButtonToPage2_Click(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(Page2));
}
Передача параметров между страницами
Теоретически странице, на которую осуществляется переход, можно передать
объект любого типа. Для этого данный объект следует указать вторым аргументом
функции Navigate объекта класса Frame. Однако на практике в качестве параметров
следует передавать только простые типы, такие как int, string, char, Guid и т. д.
Замечание. GUID (Globally Unique Identifier) — статистически уникальный 128битный идентификатор. Вероятность дублирования такого идентификатора очень мала. В
тексте GUID обычно записывается в виде строки из тридцати двух шестнадцатеричных
цифр, разбитой на группы дефисами и окружённой фигурными скобками: {6F9619FF-8B86D011-B42D-00CF4FC964FF}
Это связано с тем, что ссылка на объект, переданный в качестве параметра,
будет храниться в стеке навигации фрейма, занимая память. Кроме того, в случае
приостановки приложения, фрейм сможет сериализовать только простые типы.
Замечание. Сериализация — процесс перевода какой-либо структуры данных в
последовательность битов. Обратной к операции сериализации является операция
десериализации (структуризации) — восстановление начального состояния структуры данных
из битовой последовательности. Сериализация используется для передачи объектов по сети и
для сохранения их в файлы.
Передадим второй странице в качестве параметра строковый литерал (например,
«(<- MainPage) Это Страница 2»).
27
private void HyperlinkButtonToPage2_Click(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(Page2), "(<- MainPage) Это Страница 2");
}
Для того чтобы обработать переданный параметр, необходимо переопределить
метод OnNavigatedTo на странице, на которую осуществляется переход. В нашем
случае это вторая страница Page2.xaml. Установим параметр-строку в качестве
заголовка страницы.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
string param = e.Parameter as string;
pageTitle.Text = param;
navigationHelper.OnNavigatedTo(e);
}
В методе OnNavigatedTo параметр приводится к нужному типу (в нашем случае
к строке). Затем свойству Text заголовка страницы (pageTitle) устанавливается значение
переданной строки. Теперь мы можем запустить приложение. Проверим его работу,
перейдя на вторую страницу и затем вернувшись обратно на начальную.
Рис.15 Страница Page2
28
Рис. 16 Страница MainPage
При желании стандартную анимацию
EntranceThemeTransition можно сменить:
появления
элементов
страницы
Задание. Добавьте в приложение третью страницу. Организуйте возможность
переходов между тремя страницами приложения.
29
ПАНЕЛЬ ПРИЛОЖЕНИЯ
Панель приложения (Application Bar) — один из ключевых элементов
управления в Windows Store – приложениях. На странице могут быть максимум две
панели приложения, одна из которых открывается снизу, другая сверху. Несмотря на
то, что название панели содержит слово Application, из-за которого оно и переводится,
как «панель приложения», задается она индивидуально для каждой страницы, а не на
уровне приложения в целом. Поэтому на различных страницах могут быть разные
панели приложения, а на каких-то страницах их может не быть вовсе. Хотя также
можно создать и такие панели приложения, которые будут отображаться на нескольких
страницах.
Панели приложения по умолчанию скрыты и открываются в случае
необходимости. Они находятся как бы «вне страницы» и при открытии «наплывают» на
ее содержимое. Верхняя и нижняя панели приложения открываются и закрываются
вместе. Пользователь может открыть панели приложения щелчком правой кнопкой
мыши на странице, либо нажав комбинацию клавиш Windows + Z, либо проведя
пальцем в направлении от верхнего или нижнего края сенсорного экрана. Панели
приложения можно открывать и закрывать также программным образом. Например,
при выделении какого-либо элемента в приложении можно открыть панель
приложения с контекстными командами, применимыми к выделенному элементу.
Внутри панелей приложения могут находиться любые элементы управления, их
можно использовать для размещения элементов навигации, команд и инструментов для
пользователей. Однако базовые команды должны находиться в основном окне
приложения, а не в панелях. Нижнюю панель приложения обычно используют для
команд, а верхнюю — для навигации. Верхняя панель используется реже. На
большинстве страниц присутствует только нижняя панель приложения, в которой
размещаются кнопки различных действий. Некоторые из этих кнопок могут открывать
дополнительные меню.
Создание панелей приложения
Для добавления панелей приложения необходимо установить свойство
BottomAppBar (для нижней панели приложения) или TopAppBar (для верхней
соответственно) страницы. Сама панель приложения представляет собой элемент
управления AppBar.
<Page ...>
...
<Page.TopAppBar>
<AppBar>
<!-- Содержимое верхней панели приложения -->
</AppBar>
</Page.TopAppBar>
<Page.BottomAppBar>
<AppBar>
<!-- Содержимое нижней панели приложения -->
</AppBar>
</Page.BottomAppBar>
...
</Page>
Разместим в нижней панели приложения две кнопки панели приложения
(AppBarButton), разделитель (AppBarSeparator) и одну кнопку-переключатель
(AppBarToggleButton) слева и одну кнопку (AppBarButton) справа.
30
Для последовательного расположения и выравнивания элементов панели
используем StackPanel.
Замечание. StackPanel - контейнер, располагающий дочерние элементы в одну строку,
которую можно ориентировать по горизонтали или по вертикали.
Следует отметить, что перетаскиванием из панели инструментов элементы
можно добавлять не только в визуальную часть редактора страницы, но и сразу в
XAML-разметку.
<AppBar Name="bottomAppBar">
<Grid>
<StackPanel Orientation="Horizontal">
<AppBarButton Label="AppBarButton" />
<AppBarButton Label="AppBarButton" />
<AppBarSeparator />
<AppBarToggleButton />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<AppBarButton Label="AppBarButton" />
</StackPanel>
</Grid>
</AppBar>
Кнопки круглые, так как это стандартный вид кнопок панели приложения.
Кнопкам можно назначить вид (Icon) и подпись (Label).
Выбрать вид кнопки можно по названию с помощью подсказки (IntelliSense)
непосредственно в XAML-разметке или в окне редактирования свойств (Properties)
элемента:
31
Зададим кнопкам подписи и иконки:
<Page.BottomAppBar>
<AppBar Name="bottomAppBar">
<Grid>
<StackPanel Orientation="Horizontal">
<AppBarButton Label="Кнопка 1" Icon="Favorite"></AppBarButton>
<AppBarButton Label="Кнопка 2" Click="AppBarButton_Click" >
<AppBarButton.Icon>
<SymbolIcon/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarSeparator></AppBarSeparator>
<AppBarToggleButton Label="Переключатель" Icon="Audio" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<AppBarButton Label="Кнопка 3" Icon="ClosePane"></AppBarButton>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
Запустим приложение, щёлкнем правой кнопкой мыши, чтобы открыть панели
приложения. Посмотрим, какая панель приложений у нас получилась:
Замечание
В Windows 8 отсутствует специальный вид кнопок AppBarButton, нужный вид кнопкам
придаётся с помощью стилей:
Button Style="{StaticResource PlayAppBarButtonStyle}"
вместо
AppBarButton Icon="Play" Label="Play"
Стили находятся в StandardStyles.xaml в закомментированном виде, перед их
применением нужные стили следует раскомментировать. Некоторые стили задают подписи
32
к
кнопкам
автоматически,
AutomationProperties.Name.
также
подпись
можно
задать
с
помощью
Свойство IsSticky
По умолчанию панель приложения закрывается при любом взаимодействии
пользователя со страницей вне панели приложения. Для того чтобы панель приложения
закрывалась только при щелчке правой кнопкой мыши или другом явном действии
пользователя, необходимо задать свойство IsSticky.
<AppBar Name="bottomAppBar" IsSticky="True">
Кроме того, панель приложения предоставляет и другие полезные свойства,
например IsOpen, регулирующее открытие и закрытие панели приложения.
Задание. Самостоятельно изучите свойство IsOpen.
Отображение всплывающих окон и меню
При нажатии на кнопку панели приложения часто бывает необходимо
отобразить меню или интерфейс для ввода дополнительных данных. Для этого можно
использовать механизм всплывающих окон. Экземпляры класса Popup отображаются в
заданных координатах поверх содержимого страницы, внутри могут находиться любые
элементы управления.
Отобразим всплывающее окно по нажатию на одну из кнопок панели
приложения. Графический интерфейс всплывающего окна определим в коде, это будет
прямоугольная панель на основе элемента Grid с цветом фона как у самой панели и
кнопкой посередине.
private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
Popup popup = new Popup();
popup.IsLightDismissEnabled = true;
Grid panel = new Grid();
panel.Background = bottomAppBar.Background;
panel.Height = 250;
panel.Width = 150;
Button btnMain = new Button();
btnMain.Content = "Кнопка";
btnMain.VerticalAlignment = VerticalAlignment.Center;
btnMain.HorizontalAlignment = HorizontalAlignment.Center;
panel.Children.Add(btnMain);
popup.Child = panel;
var button = (Button)sender;
var transform = button.TransformToVisual(this);
var point = transform.TransformPoint(new Point());
popup.HorizontalOffset = point.X;
popup.VerticalOffset = Window.Current.CoreWindow.Bounds.Bottom –
bottomAppBar.ActualHeight - panel.Height - 4;
popup.IsOpen = true;
}
Для отображения всплывающего окна необходимо задать его содержимое Child,
у нас это панель panel (которая в свою очередь содержит кнопку btnMain), а также
местоположение (HorizontalOffset и VerticalOffset) и установить свойство IsOpen в
значение true.
33
Запустим приложение, откроем панель приложения и нажмём кнопку, для
которой добавили всплывающее окно:
С помощью всплывающего окна можно создать любой графический интерфейс,
в том числе меню. Но для отображения всплывающего меню предназначен
специальный класс PopupMenu. Всплывающие окна и меню можно использовать и
отдельно от панелей приложения. Например, во всплывающих окнах часто
отображаются настройки приложения.
Задание. Поэкспериментируйте с кнопкой-переключателем AppBarToggleButton
так, чтобы её подпись изменялась в зависимости от состояния.
34
«ЖИВЫЕ» ПЛИТКИ
Плитки (Tiles) приложений – одно из основных нововведений интерфейса
Windows 8. Основное отличие плиток от привычных иконок состоит в том, что их
можно «оживлять» (Live Tile), то есть на плитках можно отображать меняющуюся
информацию для пользователя независимо от того, запущено ли приложение. Также
приложения могут создавать дополнительные плитки (Secondary Tiles), с помощью
которых пользователь получает доступ в какой-то определённый раздел или экран
приложения и дополнительную тематическую информацию на самой плитке.
Плитки бывают двух видов - квадратные и прямоугольные (широкие) - и разных
размеров. Например, в Windows 8.1:
 Большая плитка (310 x 310 пикселей);
 Широкая плитка (310 x 150 пикселей);
 Средняя плитка (150 x 150 пикселей);
 Маленькая плитка (30 x 30 пикселей).
Рис. 17. Виды плиток
Плитка любого формата может содержать текст, изображения или и текст, и
изображения одновременно. На ней также может отображаться индикатор событий и
логотип или краткое название. Индикатор событий отображается в правом нижнем
углу, а логотип или краткое название — в левом нижнем углу.
Настройка плиток для приложения
Настроим плитку для нашего приложения. Для этого выполните следующие
действия:
1. Выберите область «Визуальные активы» (Application UI, Пользовательский
интерфейс приложения) в редакторе манифестов.
2. Замените изображения по умолчанию на пути к вашим изображениям логотипа (или
измените сами картинки).
35
3. Укажите, отображать ли короткое имя приложения на плитке. Длина этого имени не
должна превышать 13 символов. Слишком длинное имя будет усекаться. Для
отображения можно выбрать логотип, имя или ни то, ни другое.
4. В зависимости от цвета фона выберите светлый или темный шрифт текста имени.
5. Примите цвет фона по умолчанию или укажите собственную строку цвета,
например, #FFFFFF.
6. Цвет фона используется для определения цвета других элементов приложения,
например, кнопок в любом диалоговом окне приложения и страницы "Описание
приложения" в Магазине Windows.
Замечание. #FFFFFF – это константа, соответствующая белому цвету в RGB
модели.
После этого в Windows 8 выберите приложение в списке установленных
приложений и закрепите его на начальном экране:
Рис. 18. Закрепление приложения в виде плитки
на начальном экране Windows 8
Теперь на начальном экране отображается плитка нашего приложения с
настроенными нами параметрами:
36
После установки приложения можно также изменять содержимое плитки при
помощи механизма уведомлений, который мы сейчас и рассмотрим.
Изменение плитки
Добавим нашему приложению возможность временной смены плитки по
нажатию на кнопку.
Содержимое плитки определяется в XML на основании набора шаблонов,
предоставляемых Windows.
Каталог шаблонов плиток можно найти по ссылкам:
http://msdn.microsoft.com/ru-ru/library/windows/apps/hh761491.aspx
или
http://msdn.microsoft.com/en-us/library/windows/apps/
windows.ui.notifications.tiletemplatetype.aspx)
Чтобы определить содержимое плитки, нужно заполнить шаблон собственным
текстом и изображениями. Выберем один из шаблонов и ознакомимся с ним подробнее:
Название шаблона в Windows 8 (версия 1): TileSquarePeekImageAndText04
Название шаблона в Windows 8.1 (версия 2): TileSquare150x150PeekImageAndText04
Рис. 19. Пример шаблона плитки
Мы выбрали один из средних (150x150) обзорных шаблонов. Обзорные
37
шаблоны поставляют содержимое плитки, которое прокручивается между двумя
рамками информации в пространстве плитки (такие плитки иногда называют
анимированными или двусторонними). Верхняя рамка — это изображение или
семейство изображений, нижняя рамка — это текст или текст с изображением. В нашем
шаблоне верхний край: квадратное изображение, без текста, нижний край: одна строка
обычного текста с переносом не более чем на четыре строки.
Пример XML-кода для версии 2:
<tile>
<visual version="2">
<binding template="TileSquare150x150PeekImageAndText04"
fallback="TileSquarePeekImageAndText04">
<image id="1" src="image1" alt="alt text"/>
<text id="1">Text Field 1</text>
</binding>
</visual>
Вернёмся к нашему проекту и добавим в разметку главной страницы
MainPage.xaml ещё одну кнопку (назовём её «AppTileButton» и разместим на 200
пикселей ниже центра экрана):
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="MyButton" Content="Нажми меня"
HorizontalAlignment="Center" VerticalAlignment="Center"
Click="MyButton_Click"/>
<HyperlinkButton x:Name="HyperlinkButtonToPage2" Content="Страница 2"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="0,-200,0,0" Click="HyperlinkButtonToPage2_Click"/>
<Button Name="AppTileButton" Content="Изменить плитку"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="0, 200, 0, 0" Click="AppTileButton_Click" />
</Grid>
Также сразу создадим обработчик события нажатия на эту кнопку
(AppTileButton_Click в MainPage.xaml.cs).
Для работы с уведомлениями необходимо подключить соответствующее
пространство имён Windows.UI.Notifications (в MainPage.xaml.cs):
using Windows.UI.Notifications;
Чтобы вручную заполнить XML, подключим также Windows.Data.Xml.Dom
using Windows.Data.Xml.Dom;
Замечание. Модель DOM - это стандартизованный, структурированный способ
представления XML-данных в памяти. Модель DOM позволяет читать, обрабатывать и
изменять XML-документ программным образом: изменять значения атрибута, содержимое
элемента, вставлять и удалять узлы.
Вернёмся к созданному ранее обработчику нажатия на кнопку:
private void AppTileButton_Click(object sender, RoutedEventArgs e)
и начнём строить XML. Получаем шаблон – заготовку нужного нам варианта плитки с
помощью метода GetTemplateContent класса TileUpdateManager.
XmlDocument tileXml =
TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150PeekImageAndText04);
Мы получили структуру выбранной шаблонной схемы, которую предстоит
заполнить нашими данными стандартным для модели DOM образом.
38
Сначала зададим текст для «обратной стороны» плитки. Для этого получим все
элементы с тегом "text" (метод GetElementsByTagName) и возьмём первый из них. Он
будет единственным, так как в нашем шаблоне всего одна строка текста, хотя и
имеющая возможность разместиться на плитке в виде четырёх линий.
XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "Это \"живая\" плитка";
Теперь получим
GetElementsByTagName).
элементы
с
тегом
"image"
(метод
тот
же
–
XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
Для задания картинки можно использовать три источника: пакет приложения,
локальное хранилище или интернет. Вес картинки должен быть менее 200 KB, а размер
не более чем 1024 x 1024 пикселя. Воспользуемся первым вариантом.
Замечание. В проекте есть папка Assets, в ней лежат картинки для плиток и экрана
загрузки по умолчанию. В неё же можно поместить свою картинку, а затем присоединить её
к проекту, щёлкнув правой кнопкой по папке Assets в обозревателе решений (Solution explorer) и
выбрав Добавить – Существующий элемент (Add – Existing Item):
Для получения доступа к картинке, расположенной в пакете приложения,
используется префикс "ms-appx:///". Установим способ доступа к картинке плитки и
добавим альтернативный текст для неё. Используем первый из найденных элементов с
тегом «image», так как мы знаем, что в выбранном шаблоне задаётся всего одна
картинка.
((XmlElement)tileImageAttributes[0]).SetAttribute("src",
"ms-appx:///Assets/NewTile.scale-100.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "new tile image");
Замечание. Также для задания вида плиток можно использовать библиотеку
NotificationsExtensions. Данная библиотека позволяет предоставлять XML-содержимое
шаблонов плитки, индикатора событий и всплывающего уведомления без непосредственного
использования модели DOM XML.
Создадим уведомление на основе построенного и заполненного XML.
39
TileNotification tileNotification = new TileNotification(tileXml);
Добавим время, в течение которого плитка будет оставаться такой, как мы
описали, прежде чем вернуться к исходному состоянию (свойство ExpirationTime).
tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(60);
И, наконец, отправляем готовое уведомление:
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
Код готового обработчика выглядит следующим образом:
private void AppTileButton_Click(object sender, RoutedEventArgs e)
{
XmlDocument tileXml = TileUpdateManager.GetTemplateContent(
TileTemplateType.TileSquare150x150PeekImageAndText04);
XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "Это \"живая\" плитка";
XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src",
"ms-appx:///Assets/NewTile.scale-100.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "new tile image");
TileNotification tileNotification = new TileNotification(tileXml);
tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(60);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}
Теперь нажатием кнопки запускаем приложение и наблюдаем периодическую
анимированную смену текстовой и графической частей новой плитки.
Замечание. Откуда запускать приложение не принципиально – с начального экрана
Windows или из VS. Принципиально нажать кнопку в нём, иначе никакую смену картинок мы
наблюдать не сможем, т.к. уведомление отправляется по нажатию на специально для этого
созданную кнопку в приложении, а не на плитку приложения.
Рис. 20. Первая сторона плитки
40
Рис. 21. Вторая сторона плитки
Через минуту плитка вернётся в исходное состояние:
Рис. 22. Исходный вид плитки
Задание. Сделайте поддержку широкой (wide) плитки (310x150) и её обновление с
помощью одного из шаблонов.
41
ЗАДАНИЯ ДЛЯ ПРОВЕРКИ ЗНАНИЙ
1. На каких языках программирования поддерживает разработку WinRT ?
a. C#
b. C++/CX
c. Delph
d. JavaScript
e. Pascal
f. Visual Basic.NET
2. Операционной системой для планшетных компьютеров является:
a. Windows RT
b. Windows Runtime
3. Пользовательский интерфейс С# приложений создается при помощи:
a. HTML
b. XAML
4. Код на языке C# страницы MainPage.xaml содержится в файле:
a. App.xaml
b. App.xaml.cs
c. MainPage.xaml
d. MainPage.xaml.cs
5. Открыть редактор пользовательского интерфейса главной страницы приложения
можно:
a. с помощью двойного щелчка левой кнопки мыши по файлу MainPage.xaml в
окне Solution Explorer
b. с помощью щелчка левой кнопки мыши по файлу MainPage.xaml в окне Solution
Explorer
c. с помощью щелчка правой кнопки мыши по файлу MainPage.xaml в окне
Solution Explorer
6. Windows Store – приложение может содержать:
a. Не более одной панели приложения
b. Не более двух панелей приложения
c. Не более трех панелей приложения
7. Перевод структуры данных в последовательность битов называется:
a. Детализаций
b. Сериализацией
c. Формализацией
8. При обычном запуске приложения (нажатием на плитку приложения) вызывается
метод
a. OnActivated
b. OnSuspending
42
c. OnLaunched
d. OnStarting
9. Элементы стек-панели (StackPanel) располагаются
a. только горизонтально
b. только вертикально
c. ориентация может быть выбрана
10. Закрепленная (Sticky) панель приложения закроется, если
a. Щёлкнуть правой кнопкой мышки
b. Щёлкнуть левой кнопкой мышки
c. Провести пальцем сверху вниз
№
1
Правильный a, b,
ответ
d, f
2
3
4
5
6
7
8
9
10
а
b
d
a
b
b
с
с
a, c
43
ЗАКЛЮЧИТЕЛЬНОЕ СЛОВО
Дорогой друг, вот ты и сделал свой первый шаг в разработку приложений,
работающих под управлением Windows 8. Это еще только самое начало! Тебе
предстоит многое узнать и многому научиться, если ты хочешь стать программистом. В
этом
тебе
помогут
учебные
курсы
Microsoft
Virtual
Academy
http://www.microsoftvirtualacademy.com.
Что такое Microsoft Virtual Academy (MVA)?
Это обучающий портал, который предлагает несколько сотен интерактивных
курсов обучения на 11 языках под руководством экспертов. Задача портала — помочь
разработчикам, опытным ИТ-специалистам и заинтересованным учащимся освоить
новейшие технологии, получить необходимые навыки и продвинуться по карьерной
лестнице. Участие в программе MVA бесплатно.
Став участником MVA, вы сможете зарабатывать баллы за успехи в обучении,
повышать свой статус по сравнению с коллегами в вашей стране и по всему миру. По
окончании каждого курса выдаются именные сертификаты. В личном кабинете MVA
вы сможете отслеживать свои успехи, сопоставляя их с личными планами обучения.
В рамках MVA вы сможете изучать курсы в собственном темпе и принимать
участие в онлайн-мероприятиях, в рамках которых вы сможете пообщаться с
экспертами и учащимися со всего мира. Преподаватели и эксперты-консультанты
портала ответят на ваши вопросы в режиме реального времени, так что вы сразу
сможете применить полученные знания.
Разработчики, которые хотят научиться создавать web-приложения для
различных устройств под управлением Windows или Windows Phone, могут изучить
курсы по разработке приложений для Windows и Windows Phone, освоить C# и XAML.
ИТ-профессионалам,
которые
планируют
оценку,
развертывание,
администрирование и обновление инфраструктуры в организации, рекомендуется
ознакомиться с нашими интерактивными курсами по Windows Server, Windows 8,
Windows Azure и технологиям виртуализации Microsoft.
Портал MVA разрушает стереотип о том, что программирование только для
«избранных».
44
ЛИТЕРАТУРА
1. Гецман П., Хакфорт С., Новак П. Разработка приложений для Windows Phone.
Архитектура, фреймворки, API. — СПб.: БХВ-Петербург, 2014. – 880 с.
2. Дронов В.А.
Windows 8. Разработка Metro-приложений для мобильных
устройств. — СПб.: БХВ-Петербург, 2012. – 528 с.
3. Ликнесс Дж. Приложения для Windows 8 на C# и XAML. — СПб.: Питер, 2013.
– 368 с.
4. Петцольд Ч. Программирование для Microsoft Windows 8. — СПб.: Питер, 2014.
– 1008 с.
5. Пугачев С., Шериев А., Кичинский К. Разработка приложений для Windows 8 на
языке C#. — СПб.: БХВ-Петербург, 2013. – 416 с.
45