Создание Metro-приложения для Windows 8
WPF — Периферия WPF — Создание Metro-приложения для Windows 8
В данной статье я хочу продемонстрировать создание простого Metro-приложения с использованием IDE-среды Visual Studio. Мы рассмотрим этот процесс шаг за шагом, так, чтобы понять основную концепцию построения приложений данного типа.
Создание проекта
Итак, запустите Visual Studio и создайте новый проект выбрав в меню File — New Project. Из предлагаемых Visual Studio шаблонов проектов по умолчанию выберите тип проекта Blank Application в подразделе Visual C#, как показано на рисунке:
Как видите Visual Studio предлагает на выбор еще несколько типов проектов для создания Metro-приложений, но мы их использовать не будем, т.к. они не используют модель отделенного кода, хорошо знакомую разработчикам WPF и Silverlight. Мы будем использовать пустой проект (Blank Application), в который добавлена минимально необходимая функциональность для работы с Metro.
Нажмите кнопку ОК для создания этого приложения, при этом, Visual Studio потребует лицензию разработчика Windows 8, которую можно получить просто зарегистрировавшись в службе Windows Live и указав email-адрес при активации.
Структура вновь созданного проекта приведена на следующем рисунке:
Metro-приложения используют облегченную версию .NET Framework. Убедиться в этом можно, взглянув на какие сборки ссылается проект (раздел References в Solution Explorer). Давайте более подробно рассмотрим структуру проекта.
Файл App.xaml
Файл App.xaml и его файл отделенного кода App.xaml.cs используются для запуска приложений Metro. В файле App.xaml приводится ссылка на словарь ресурсов StandardStyles.xaml находящийся в папке Common. Он содержит множество ресурсов для стилизации Metro-приложения. Код файлов App.xaml и App.xaml.cs представлен ниже:
Модель жизненного цикла приложений Metro довольно специфична и сильно отличается от приложений WPF и Silverlight. Эту модель я подробно разберу позже, сейчас важно знать только то, что OnLaunched — обработчик события запуска Metro-приложения, а экземпляр класса MainPage используется в качестве основного графического интерфейса для приложения, т.е. при запуске будет загружаться окно MainPage.xaml.
Файл MainPage.xaml
Страницы являются основными строительными блоками для приложений Metro. При создании проекта с использованием шаблона пустого проекта (Blank Application), Visual Studio создает пустую страницу, которую он называет MainPage.xaml. Ниже представлена XAML-разметка для этой страницы, содержащая только элемент компоновки Grid:
Если вы являетесь разработчиком WPF или Silverlight, то изучение создания приложений Metro для вас станет очень легкой задачей, т.к. Metro UI управляет работой приложения в целом также, как и эти архитектуры. Следует только помнить, что Metro использует ограниченную версию .NET Framework (например, нельзя использовать трехмерную графику, поддержка которой полностью реализована в WPF и Silverlight 5), а также использует свою модель приложения.
Файл StandardStyles.xaml
Папка Common содержит файлы, которые включают в себя стили и шаблоны элементов управления. По умолчанию генерируется единственный файл StandardStyles.xaml, но позже вы можете добавить в эту папку собственные словари ресурсов. Использование словарей ресурсов для концентрации ресурсов приложения является еще одной концепцией Metro, позаимствованной из WPF и Silverlight.
MetroGrocer_TemporaryKey.pfx и Package.appxmanifest
Файлы с разрешением .pfx являются сертификатами, использующими стандарт PKCS#12, для трансляции закрытого ключа приложения, благодаря которому, операционная система разрешает запустить это приложение. Выдачей сертификатов приложений занимаются специализированные компании, однако, в случае Metro-приложения Visual Studio генерирует собственный сертификат для каждого приложения. Такие сертификаты называются «самоподписанными».
Package.appxmanifest — является файлом манифеста. Использование манифестов является частой практикой в программировании .NET приложений, эти файлы используются для конфигурирования приложений.
Создание графического интерфейса
В Metro-приложениях графический интерфейс создается в декларативной XAML-разметке, а в коде C# описывается логика работы приложения. Я не буду здесь разбирать основы XAML, скажу только, что этот язык разметки использует правила XML и подробно прочитать о нем вы можете в подразделе «Основы WPF».
На текущий момент главная страница приложения MainPage.xaml является пустой (включает только контейнер Grid). Давайте добавим в нее несколько простых элементов управления, например кнопок:
В этом коде внутрь Grid добавляется элемент компоновки StackPanel, в который добавляются две кнопки. StackPanel это простой контейнер компоновки, который позиционирует дочерние элементы управления в горизонтальной или вертикальной линии (образуя стек).
Кнопки являются простейшими элементами управления, и ожидают щелчка пользователя по ним (обратите внимание на обработчики событий). Обратите внимание, что первая кнопка использует стиль по умолчанию Metro-приложений, стиль второй берется из словаря ресурсов StandardStyles.xaml за счет использования расширения разметки StaticResource.
В Metro (как и в WPF) можно создавать пользовательский интерфейс только на C# без использования XAML (например, так раньше создавались устаревшие уже приложения Windows Forms). Но есть веские причины для использования XAML. Одним из преимуществ является то, что Visual Studio имеет окно дизайнера, позволяющее легко компоновать приложение вообще не набирая код вручную и не компилируя само приложение. При этом пользовательский интерфейс генерируется в XAML-разметке:
Хотя разметка XAML сама по себе простая, при проектировании сложных интерфейсов ее становиться очень много. Visual Studio облегчает задачу проектирования, за счет использования поддержки IntelliSense, возможности создания интерфейса в дизайнере и т.д.
После того, как мы определили графический интерфейс приложения, давайте добавим простую логику его работы в коде C#. В частности используем объявленный в XAML обработчик событий Button_Click:
Приложение видит обработчик события Button_Click, т.к. код, генерируемый из файла XAML сливается с кодом C#, за счет использования механизма частичных классов, которые поддерживаются в C#. Результатом этого взаимодействия является то, что, когда будет нажата кнопка, вызовется обработчик Button_Click и кнопка изменит цвет фона и текст.
Запуск и отладка Metro-приложений
Теперь, когда у нас создано очень простое Metro-приложение, давайте рассмотрим как его можно запустить. Visual Studio предлагает три способа запуска: на локальной машине, на симуляторе и на удаленной машине (на другом компьютере).
Мы будем использовать симулятор, т.к. тестирование на локальной и удаленной машине не всегда позволяет правильно оценить работу приложения:
Для запуска примера приложения, нажмите кнопку Simulator на панели инструментов или выберите в меню Debug —> Start Debugging (F5). Visual Studio запустит симулятор с вашим приложением:
Вы можете использовать кнопки на правой стороне симулятора, чтобы изменить размер и ориентацию экрана, переключиться между мышью и сенсорным вводом, и синтезировать геолокации. Щелкните на первой кнопке и вы увидите результат показанный выше.
Поскольку приложение Metro работает в режиме отладки, любые исключения вызовут остановку отладчика, позволяя вам пошагово выполнять код так же, как и в других приложениях (использование точек останова, слежения за переменными и т.д.) Т.к. процесс отладки приложений Metro не отличается от отладки других типов приложений, подробно рассматривать ее я не буду. Вы можете прочитать про отладку в следующей статье — Отладка кода в Visual Studio.
При работе симулятор создает еще одну сессию на компьютере разработчика. Это означает, что вы можете переключиться с Metro приложения на рабочий стол. Чтобы снова запустить приложение, перезапустите отладчик в Visual Studio.
Разбираемся с разработкой Windows 8 приложений на XAML/С#, реализуя простой RSS Reader. Ч.1
После поста Введение в разработку WinRT-приложений на HTML/JavaScript. От шаблона к приложению с данными вы уже знаете как разрабатывать RSS читалку под Windows 8 с использованием HTML и JavaScript. Пришло время попробовать сделать примерно то же самое, но с использованием XAML/C#. Это первая часть, но мы уже в ней сделаем красиво!
Создание приложения из шаблона
Начнём разработку с также с шаблона Grid приложения, выбрав разработку на XAML/C#
В меню File выберите New Project, далее Visual C#, затем — Windows Store, в центральной части окна New Project выберите шаблон под названием GridApp (XAML). Введите в поле Name название приложения, например, MyReader, если нужно, в поле Location папку, в которой будет размещаться проект приложения и нажмите кнопку OK. 
В результате мы получаем практически полнофункцинальное по навигации и отображению данных приложение, которое отображает пример данных.
Давайте посмотрим, как оно работает, нажав F5, зеленую стрелочку или выбрав Debug ->Start Debugging
Можно убедиться, что это уже практически полнофункциональное приложение:
- нажмите на любую отдельную серую плитку или на заголовок группы;
- воспользуйтесь кнопкой назад на внутренних страницах приложения;
- переведите приложение в Snapped-режим.
Вернитесь в Visual Studio и остановите отладку приложения (Shift+F5, красный квадратик или выберите в меню Debug ->Stop Debugging).
Разберёмся, с основными файлами нашего решения:
- *.xaml — разметка страницы приложения на языке XAML.
- *.xaml.cs — это code-behind файл на языке C# страницы.
- App.xaml — инициализация объекта Windows Store-приложения на языке XAML, не имеет визуального представления и не является страницей приложения.
- App.xaml.cs — это code-behind файл на языке C# для App.xaml. В данном файле обрабатываются события уровня приложения, такие как запуск, активация, в том числе активация по поисковому запросу, и деактивация приложения. Кроме того, в App.xaml.cs вы можете перехватывать необработанные исключения и отлавливать ошибки навигации между страницами.
- папка Common, файл StandardStyles.xaml — файл ресурсов стилей для графических элементов управления, подключается в App.xaml и его стили доступны во всех страницах приложения.
- Package.appxmanifest — это манифест приложения, XML-файл, содержит разнообразные настройки приложения. Есть графического редактора, который открывается двойным щелчком мышью по имени файла Package.appxmanifest в окне Solution Explorer.
- AssemblyInfo.cs — конфигурационный файл, в котором определяются некоторые метаданные главной сборки приложения.
- MyReader_TemporaryKey.pfx — криптографический сертификат с закрытым ключом, которым подписывается приложение.
- папка Asset, файлы Logo.png, SmallLogo.png, StoreLogo.png — логотипы для большой и малой плиток приложения, а также иконка для списка всех приложений.
- SplashScreen.png — картинка для экрана заставки, который отображается во время загрузки приложения.
Также в папке Common, находятся также файлы с общим кодом, который используюется в приложении, в папке DataModel нахдится файл с моделью данных приложения — SampleDataSource.cs.
Меняем данные для отображения
Итак, приложение уже работает и в нём реализован пример источника данных. Поэтому задача номер один – подменить пример источника даных на реальный источник данных.
Начнём с удаления конструктора по умолчанию класса SampleDataSource, в котором происходит инициализация статическими данными.
Дальше, воспользуемся встроенными в Visual Studio возможностями рефакторинга и переименуем SampleDataSource в RSSDataSource, SampleDataGroup в RSSDataGroup, SampleDataItem в RSSDataItem и SampleDataCommon в RSSDataCommon. 
Для создания целостной картины мира можно файл SampleDataSource.cs переименовать в RSSDataSource.cs.
Для упрощения работы с классом данных в этом примере — упростим его. Для этого заменим следующий кусок класса RSSDataSource
На аналогичный по смыслу код, упрощающий восприятие и дальнейшую разработку примера.
В завершение убираем ненужную локальную переменную _sampleDataSource из кода класса.
Итак, мы подготовились к добавлению реальных данных.
Допишем простой метод, который будет брать поток данных RSS или ATOM и представлять его для дальнейшего отображения в интерфейсе приложения.
Код достаточно простой. Используя SyndicationClient, получаем и разбираем данные из RSS/ATOM, после чего создаём группу и добавляем в неё записи. Попутно, очищаем содержимое от HTML тегов, просто, чтобы выглядело лучше, а также предусматриваем добавление картинки, чем займёмся позже.
Не забудте добавить в блок using следующую директивы:
Чтобы сразу проверить, как это работает, двойным щелчком откроем файл GroupedItemsPage.xaml.cs и перейдём к методу LoadState, который инициализирует данные и заменим источник данных sampleDataGroups на RSSDataSource.AllGroups, а также удалим ненужную теперь инициализацию sampleDataGroups. Теперь, код LoadState состоит из одной строчки:
Теперь, чтобы всё заработало, нужно добавить какой-нибудь RSS. Воспользуемся свежесозданной функцией AddGroupForFeedAsync и добавим две строчки в функцию LoadState:
Собираем проект и запускаем. 
Ура — работает!
Но как-то всё не очень красиво… Ну что же, давайте сделаем красиво!
Делаем красиво
Первое с чего надо начать — это картинки в посты и на плитки в сгруппированном отображении.
Перейдём обратно в RSSDataSource.cs и добавим магический метод, добывающий изображения из RSS постов:
В методе, мы, используя регулярные выражения пытаемся найти картинки (с расширениями png, jpg и bmp) в тексте поста или его summary.
Не забудте добавить в блок using следующую директивы:
Теперь добавим вызовы этого метода в заботливо оставленные в методе AddGroupForFeedAsync заглушку. Меняем на
Пересобираем и запускаем приложение. 
Всё стало гораздо лучше, но почему все топики отображаются плитками одного размера? Пожалуй, надо сделать, как в Windows Store!
Это несколько более сложная задача, чем всё то, что мы делали раньше. Но мы не останавливаемся перед трудностями!
Для того, чтобы реализовать подобный функционал, нам придётся создать свой класс, наследник GridView. Добавьте в проект новый файл класса с именем: VariableSizeGridView.cs. В новом файле, добавьте в блок using директиву:, укажите, что класс наследуется от GridView и переопределите в нём метод класса: PrepareContainerForItemOverride. В результате должно получиться что-то вроде этого:
Собственно метод PrepareContainerForItemOverride и будет определять логику, по которой будут отображаться плитки разного размера в сгруппированном представлении. Теперь необходимо подготовить разметку в файле GroupedItemsPage.xaml.
Сначала заменяем GridView на наш класс — local:VariableSizeGridView. Далее в ItemPanelTemplate дополняем свойства VariableSizedWrapGrid указав размер Item-а и максимальное количество срок и колонок, так, что он будет выглядеть следующим образом:
Добавим собственный шаблон Item в ресурсы страницы:
И укажем его в качестве шаблона Item, вместо стандартного в local:VariableSizeGridView::
Запускам приложение. 
Выглядит не очень красиво. Но это пока мы не добавим наш код с логикой в PrepareContainerForItemOverride.
Итак, добавляем код:
Как видно, мы просто руками указываем какую по порядку плитку, как отображать.
Запустим ещё раз. 
Выглядит гораздо лучше, а реализуя шаблоны для Item и логику работы PrepareContainerForItemOverride можем добиться практически любого представления в пределах GridView.
На этом я, пожалуй завершу первую часть. Во второй части, мы продолжим делать красиво: добавим живые плитки, контракты поиска и share, а также вынесем RSS фиды в настройки.
UPD: Да, и ещё сделаем стиль для Title, чтобы он на плитках в группированом отображении отображался по человечески, как на снимке экрана в начале статьи.