Создание Metro-приложения для Windows 8

120

В данной статье я хочу продемонстрировать создание простого Metro-приложения с использованием IDE-среды Visual Studio. Мы рассмотрим этот процесс шаг за шагом, так, чтобы понять основную концепцию построения приложений данного типа.

Создание проекта

Итак, запустите Visual Studio и создайте новый проект выбрав в меню File --- New Project. Из предлагаемых Visual Studio шаблонов проектов по умолчанию выберите тип проекта Blank Application в подразделе Visual C#, как показано на рисунке:

Создание проекта Blank Application

Как видите Visual Studio предлагает на выбор еще несколько типов проектов для создания Metro-приложений, но мы их использовать не будем, т.к. они не используют модель отделенного кода, хорошо знакомую разработчикам WPF и Silverlight. Мы будем использовать пустой проект (Blank Application), в который добавлена минимально необходимая функциональность для работы с Metro.

Нажмите кнопку ОК для создания этого приложения, при этом, Visual Studio потребует лицензию разработчика Windows 8, которую можно получить просто зарегистрировавшись в службе Windows Live и указав email-адрес при активации.

Структура вновь созданного проекта приведена на следующем рисунке:

Структура Metro-проекта в Visual Studio

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 представлен ниже:

<Application
    x:Class="MetroGrocer.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MetroGrocer">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Common/StandardStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>
    </Application.Resources>
</Application>
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
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;

namespace MetroGrocer
{
    sealed partial class App : Application
    {
        // Конструктор базового класса App
        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        // Этот обработчик срабатывает при запуске приложения конечным пользователем
        protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            Frame rootFrame = Window.Current.Content as Frame;

            if (rootFrame == null)
            {
                rootFrame = new Frame();

                if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    // Загрузка состояния приложения из ранее использованных приложений
                }

                Window.Current.Content = rootFrame;
            }

            if (rootFrame.Content == null)
            {
                if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
                {
                    throw new Exception("Failed to create initial page");
                }
            }
            Window.Current.Activate();
        }

        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            // Сохранить состояние приложения и остановить любую фоновую активность
            deferral.Complete();
        }
    }
}

Модель жизненного цикла приложений Metro довольно специфична и сильно отличается от приложений WPF и Silverlight. Эту модель я подробно разберу позже, сейчас важно знать только то, что OnLaunched - обработчик события запуска Metro-приложения, а экземпляр класса MainPage используется в качестве основного графического интерфейса для приложения, т.е. при запуске будет загружаться окно MainPage.xaml.

Файл MainPage.xaml

Страницы являются основными строительными блоками для приложений Metro. При создании проекта с использованием шаблона пустого проекта (Blank Application), Visual Studio создает пустую страницу, которую он называет MainPage.xaml. Ниже представлена XAML-разметка для этой страницы, содержащая только элемент компоновки Grid:

<Page
    x:Class="MetroGrocer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MetroGrocer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    </Grid>
</Page>

Если вы являетесь разработчиком 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). Давайте добавим в нее несколько простых элементов управления, например кнопок:

<Page
    x:Class="MetroGrocer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MetroGrocer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button x:Name="FirstButton" HorizontalAlignment="Center" Content="Простая кнопка"
                    Click="Button_Click"/>
            <Button x:Name="SecondButton" Style="{StaticResource TextButtonStyle}" HorizontalAlignment="Center" 
                    Content="Еще одна кнопка" FontSize="20"/>
        </StackPanel>
    </Grid>
</Page>

В этом коде внутрь Grid добавляется элемент компоновки StackPanel, в который добавляются две кнопки. StackPanel это простой контейнер компоновки, который позиционирует дочерние элементы управления в горизонтальной или вертикальной линии (образуя стек).

Кнопки являются простейшими элементами управления, и ожидают щелчка пользователя по ним (обратите внимание на обработчики событий). Обратите внимание, что первая кнопка использует стиль по умолчанию Metro-приложений, стиль второй берется из словаря ресурсов StandardStyles.xaml за счет использования расширения разметки StaticResource.

В Metro (как и в WPF) можно создавать пользовательский интерфейс только на C# без использования XAML (например, так раньше создавались устаревшие уже приложения Windows Forms). Но есть веские причины для использования XAML. Одним из преимуществ является то, что Visual Studio имеет окно дизайнера, позволяющее легко компоновать приложение вообще не набирая код вручную и не компилируя само приложение. При этом пользовательский интерфейс генерируется в XAML-разметке:

Окно дизайнера Visual Studio

Хотя разметка XAML сама по себе простая, при проектировании сложных интерфейсов ее становиться очень много. Visual Studio облегчает задачу проектирования, за счет использования поддержки IntelliSense, возможности создания интерфейса в дизайнере и т.д.

После того, как мы определили графический интерфейс приложения, давайте добавим простую логику его работы в коде C#. В частности используем объявленный в XAML обработчик событий Button_Click:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
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;

namespace MetroGrocer
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button button = sender as Button;
            button.Background = new SolidColorBrush(Color.FromArgb(255, 238, 177, 14));
            button.Foreground = new SolidColorBrush(Colors.Black);
            button.Content = "Текст изменился";
        }
    }
}

Приложение видит обработчик события Button_Click, т.к. код, генерируемый из файла XAML сливается с кодом C#, за счет использования механизма частичных классов, которые поддерживаются в C#. Результатом этого взаимодействия является то, что, когда будет нажата кнопка, вызовется обработчик Button_Click и кнопка изменит цвет фона и текст.

Запуск и отладка Metro-приложений

Теперь, когда у нас создано очень простое Metro-приложение, давайте рассмотрим как его можно запустить. Visual Studio предлагает три способа запуска: на локальной машине, на симуляторе и на удаленной машине (на другом компьютере).

Мы будем использовать симулятор, т.к. тестирование на локальной и удаленной машине не всегда позволяет правильно оценить работу приложения:

Выбор режима запуска и отладки

Для запуска примера приложения, нажмите кнопку Simulator на панели инструментов или выберите в меню Debug --> Start Debugging (F5). Visual Studio запустит симулятор с вашим приложением:

Симулятор Metro-приложений

Вы можете использовать кнопки на правой стороне симулятора, чтобы изменить размер и ориентацию экрана, переключиться между мышью и сенсорным вводом, и синтезировать геолокации. Щелкните на первой кнопке и вы увидите результат показанный выше.

Поскольку приложение Metro работает в режиме отладки, любые исключения вызовут остановку отладчика, позволяя вам пошагово выполнять код так же, как и в других приложениях (использование точек останова, слежения за переменными и т.д.) Т.к. процесс отладки приложений Metro не отличается от отладки других типов приложений, подробно рассматривать ее я не буду. Вы можете прочитать про отладку в следующей статье - Отладка кода в Visual Studio.

При работе симулятор создает еще одну сессию на компьютере разработчика. Это означает, что вы можете переключиться с Metro приложения на рабочий стол. Чтобы снова запустить приложение, перезапустите отладчик в Visual Studio.

Пройди тесты
Лучший чат для C# программистов