У даній статті я хочу продемонструвати створення простого Metro-додатки з використанням IDE-середовища Visual Studio. Ми розглянемо цей процес крок за кроком, так, щоб зрозуміти основну концепцію побудови додатків даного типу.
створення проекту
Отже, запустіть Visual Studio і створіть новий проект вибравши в меню File --- New Project. З пропонованих Visual Studio шаблонів проектів, виберіть тип проекту Blank Application в підрозділі Visual C #, як показано на малюнку:
Як бачите Visual Studio пропонує на вибір ще кілька типів проектів для створення Metro-додатків, але ми їх використовувати не будемо, тому що вони не використовують модель відокремленого коду, добре знайому розробникам WPF і Silverlight. Ми будемо використовувати порожній проект (Blank Application), в який додана мінімально необхідна функціональність для роботи з Metro.
Структура новоствореного проекту наведена на наступному малюнку:
Metro-додатки використовують полегшену версію .NET Framework. Переконатися в цьому можна, поглянувши на які збірки посилається проект (розділ References в Solution Explorer). Давайте більш детально розглянемо структуру проекту.
файл App.xaml
Модель життєвого циклу програм 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.