Перевод.

«Введение в Metro», Мигель Кастро

Журнал «CoDe» (Июль/Август 2012)

Введение в Metro

Спустя десять лет после выхода .NET Framework Microsoft в очередной раз удивляет своей новой платформой для разработки, которая направит Ваши таланты на мобильные устройства, за которыми стоит будущее, а именно – на планшеты. Windows Runtime или WinRT является основой для разработки приложений, предназначенных для сенсорных устройств на базе Windows 8, но что же это означает для .NET разработчиков и имеющихся у них навыков?

Переход от VB6, на котором многие из нас выросли, к .NET имел большое значение. Впервые Microsoft-ориентированные не C++ разработчики увидели настоящую ориентированность объектов, а также многие другие новые концепции и функции. Даже характеристики, связанные с IDE, претерпели серьёзные изменения: код файлов больше не зависит от классов, появилось множество новых шаблонов проектов и независимость от языка (конечно, от того, который начал новую войну). Переход к WinRT и Metro приложениям не будет таким уж стремительным. Ваши навыки .NET разработчиков, будь то VB или C#, пригодятся Вам гораздо сильнее, чем десять лет назад.

Что такое Metro и WinRT?

WinRT – сокращение от Windows Runtime и новая модель программирования, которая придёт на смену Win32. Metro – это новый UX стиль приложений от компании Microsoft. По большей части, Metro создавалась для сенсорных устройств, таких как планшет или телефон. Но не исключена возможность разработки настольных приложений с применением концепции Metro. Metro программы делают ставку на контент. Это означает, что они завораживают своей простотой. Лучшее определение, которое я однажды прочитал для «захватывающего приложение», было приложение, которое полностью захватывает внимание пользователя. Это означает, что такое приложение интуитивно понятно, привлекательно и требует очень мало или вообще не требует какой-либо подготовки, чтобы быстро начать его использовать. Metro UI добивается этого, делая ставку на контент и удобную навигацию с помощью плиток. Простота, по сути, является антитезой приложений всех видов, которые мы разрабатывали на протяжении многих лет.

То есть нельзя сказать, что Metro сделал наши старые приложения плохими или уродливыми. Metro приложения с их отсутствием границ у окна, группировкой страниц, лентами, панелями инструментов, простым меню и пользовательским интерфейсом, который они формируют, прекрасно вписывается в целевое оборудование. Я работал и разрабатывал приложения с лентами, закреплёнными окнами инструментов и MDI вкладками, которые выглядели красивыми и были интуитивно понятны. Стиль, который многие теперь считают устаревшим, служил очень хорошо на протяжении многих лет и, скорее всего, на некоторое время ему ещё найдётся место в будущем. Возьмите, например, любое из офисных приложений не в стиле Metro, и Вы будете чувствовать себя прекрасно, работая в них. На самом деле, честно говоря, я не могу себе представить, как будут выглядеть и вести себя Metro-версии Word или Excel.

Я говорю это, потому что слишком часто вижу, как разработчики принимают что-то новое и автоматически маркируют старые технологии, дизайн или платформу, плохими и неправильными. Это не тот случай, когда приложения Metro и следующая версия .NET Framework (4.5) не будут поддержать и применять технологии, которые мы используем сегодня. И, как Вы скоро узнаете, .NET жив и здоров в приложениях в стиле Metro. Кроме того, следует отметить, что разработка Metro и Visual Studio 11 ещё не закончена, и мы все ещё можем видеть изменения, как в стиле пользовательского интерфейса, так и в среде разработки.

Среда разработки приложений в стиле Metro

Для разработки приложений в стиле Metro потребуется Visual Studio 11 и Windows 8. На момент написания этой статьи Microsoft выпустила демонстрационную версию Windows 8 для пользователей (бету), а также бета-версию Visual Studio 11.

Диалоговое окно «Новый проект» 11-ой Visual Studio разбивается на языки, подобно тому, как это делает Visual Studio 2010; для Visual Basic и Visual C# появился новый тип проекта под названием «Windows приложение в стиле Metro». В этой статье я сосредоточу своё внимание на этом типе проекта. Выбор «Windows приложение в стиле Metro» в любом из этих двух языков позволит Вам создать приложение в стиле Metro с использованием C# или VB в сочетании с .NET API для Metro-приложений. Этот API-интерфейс содержит набор управляемых типов, используемых для построения Metro-приложений на XAML. Так что навыки WPF и Silverlight разработчиков (таких же, как и я) далеко не утратят свою значимость и будут иметь решающее значение в будущем при выборе этого пути разработки. .NET API для приложений в стиле Metro можно рассматривать как подмножество целого .NET Framework, но на самом деле, это разные вещи. .NET API для приложений в стиле Metro также служит уровнем абстракции между Вашим кодом и Windows Runtime (WinRT).

Новым языком в диалоговом окне «Новый проект» Visual Studio 11 является JavaScript. Вы также можете создать приложения в стиле Metro с использованием HTML5/CSS и JavaScript/jQuery. В этом случае Вы будете использовать библиотеку Windows для JavaScript. Это API JavaScript, который служит уровнем абстракции, между языком и WinRT. В этой статье я не буду рассматривать эту платформу.

Выберите «Windows приложение в стиле Metro» во вкладке C# в диалоговом окне «Новый проект». Сейчас в этой категории мне доступно пять новых типов проектов (см. рисунок 1). «Grid» и «Split» приложения предназначены, чтобы помочь Вам начать работу с некоторыми из наиболее часто используемых стилей навигации в Metro приложениях. Это важнее, чем Вы думаете, потому что если Вашей целью, в конечном счёте, является размещение приложения в Windows Marketplace, то оно будет проходить этап проверки, и соблюдение определенных общепринятых стандартов навигации и отображения стилей будет иметь решающее значение. Имейте в виду, на момент написания этой статьи Marketplace ориентирован на Metro-приложения для планшетов, но вскоре он будет расширен, чтобы включить приложения для Windows Phone 8.

Рисунок 1: Metro «Добавление нового проекта».

Проект «Библиотека классов» является типичной библиотекой для сборки, которую можно использовать для разработки компонентов и ярусов низкого уровня в Metro-приложениях. Это не означает, что Вы не сможете взаимодействовать с обычными сборками .NET 4.5 (или старше). Обращение к отличным от Metro сборкам вполне допустимо, но Вы должны будете использовать директивы компилятора, чтобы предотвратить компиляцию несовместимой области кода. Я сделаю это темой другой статьи; чтобы ускорить процесс изучения, в этой статье я буду придерживаться только проектов Metro. Для .NET разработчиков таких, как мы, использование WinRT API не представляет почти никакой опасности благодаря его интеграции с .NET. В самом деле, благодаря .NET API-интерфейсу для WinRT Вам, вероятно, даже не придётся задумываться о том, что Вы обращаетесь к WinRT.

Для этой статьи я буду использовать «Пустой проект», что позволит мне начать с нуля и не обращаться к помощи встроенных страниц.

Особенности Metro приложений

Metro приложения имеют определенные особенности, которые и делают их Metro приложениями. До появления термина «Metro приложение» в платформе Windows Phone 7 был введён «Metro UI». Metro UI определяет стиль компонентов пользовательского интерфейса, шрифтов, методов навигации и анимации, которые в совокупности образуют пользовательский интерфейс, который отличается от всех остальных. Давайте рассмотрим некоторые особенности стиля Metro.

Начнём с понятия плиток. Плитки образуют визуальную метафору для списка типичного пользовательского интерфейса в Metro приложении. Когда необходимо представить пользователю список пунктов на выбор, можно использовать плитки. Иногда их заменяют обычным компонентом ListBox, а иногда – меню. Вы можете использовать сетку плитки Metro для отображения вариантов, по которым пользователь может перемещаться для более детального просмотра. По этой причине, плитки имеют возможность становиться живыми. Вы можете увидеть живые плитки на домашних страницах WP7 и Windows 8. Плитки главного экрана в обеих этих операционных системах имеют возможность не только отображать чуть больше информации о том, что за ними стоит, но и динамически изменять своё содержимое, по мере изменения информации, за которую они несут ответственность. Например, плитка «Почта» в WP7 показывает, сколько непрочитанных писем у Вас есть, и обновляется, как только приходит новое сообщение. Плитка Фото может показать Вам первую фотографию в первом альбоме и так далее. На рисунке 2 показана домашняя страница Windows Phone 7, иллюстрирующая всё вышесказанное.

Рисунок 2: Домашняя страница Windows Phone 7.

Однако, плитки всего лишь признак Metro. На самом деле, последняя версия MSN Messenger утверждает, что имеет «интерфейс Metro» и при этом не содержит плиток. Популярный Twitter клиент MetroTwit также не содержит плиток. Если бы мне пришлось взглянуть на интерфейс, чтобы определить, является ли он интерфейсом в стиле Metro, и попытаться точно выделить то, что делает его уникальным, я бы сказал, что это использование конкретного шрифта, Segoe UI Light. Наблюдение использования этого шрифта во всех его разнообразных размерах зацепляет меня больше, чем что-либо другое. Посмотрите на Windows 8 и WP7, и Вы увидите, что этот шрифт используется повсеместно.

Меню также довольно характерны для Metro приложений. С одной стороны, они все используют вышеупомянутый шрифт Segoe UI Light. Но то, что действительно делает их уникальными, это способ приложений в стиле Metro отображать их меню для навигации. Metro меню состоит просто из размещенных рядом друг с другом элементов выбора, один из которых, выбранный, набран жирным шрифтом. Этот стиль передаётся вниз к подменю. На рисунке 3 показан пример того, как приложение MSN Messenger отображает меню теперь.

Рисунок 3: Меню MSN Messenger.

Metro приложения также покончили с концепцией перекрывающихся окон. Эта особенность требует некоторого времени, чтобы к ней привыкнуть, но если Вы WPF и Silverlight разработчик, это не должно Вас удивлять. Отсутствие формы наследования в WPF и Silverlight в сочетании с призывом к архитектуре уровня клиента на базе MVVM подтолкнула WPF / SL разработчиков к созданию страниц по принципу «сдерживания». При таком стиле приложение состоит из первичной страницы или страницы «оболочки», которая открывается при запуске. Оболочка, в свою очередь, разделена на различные области, а их содержимое имеет различное представление, основанное на способе использования приложения. Microsoft в свою очередь так увлёкся развитием этого стиля, что у появился специальный фреймворк Prism для упрощения работы с этим и другими стилями.

Ваше первое Metro приложение

Теперь (я надеюсь) у Вас есть базовые знания для создания Metro приложений, давайте быстро что-нибудь создадим. Имейте в виду, в этой статье всё будет очень просто. Сначала я создам простое приложение, а затем добавлю навигацию и детально рассмотрю процесс отображения информации. О живых плитках и других дополнительных возможностях я расскажу в следующей статье. Сейчас же моя цель состоит в том, чтобы Вы получили удовольствие от создания Metro приложений и узнали, как Вы можете использовать существующие XAML и C# (и даже Visual Basic) навыки, практически игнорируя тот факт, что Вы собираетесь работать с новой средой выполнения.

Для простоты в этой статье я буду использовать традиционный метод вынесения кода. При создании реального приложения Вы должны следовать шаблону Модель-Представление-Модель вида. К счастью, Вы можете применить шаблон MVVM к приложениям Metro точно так же, как в приложениях WPF или Silverlight.

Давайте создадим новое приложение. Выберите Visual C# в диалоговом окне создания проектов Visual Studio 11 Beta и выделите Приложение Windows Metro. Я выберу «Пустое приложение» из списка вариантов справа. Создастся простая страница BlankPage.xaml. Если Вы посмотрите на список ссылок проекта, то Вы увидите два элемента. Элемент Windows – это ссылка на библиотеку WinRT, а .NET для приложений в стиле Metro – .NET API для WinRT.

Во многих отношениях окружающая среда этого проекта похожа на приложения WPF или Silverlight. Например, имеется файл App.xaml для ресурсов приложения, точно такой же, как в WPF / SL. Код для файла App.xaml содержит виртуальный метод OnLaunched. Даже в пустом проекте, здесь находится некий вспомогательный код для создания новых страниц (о которых Вы узнаете чуть позже), перехода на стартовую страницу, и связывания всего этого в ежиное приложение. Смотрите на это, как на начало процесс создания первой страницы Metro приложения, в нашем случае это будет моя страница BlankPage.xaml.

Страница BlankPage.xaml подходит для любых задач и целей (особенно наших), выглядит как обычный XAML и должна быть хорошо знакома любому, кто уже имел дело с XAML. На самом деле, с помощью навыков, которые не должны быть для Вас в новинку, я собираюсь вместе с Вами быстро написать пример.

Чтобы избежать клише, я не собираюсь писать «Привет, Мир», а вместо этого создам приложение, выводящее «Привет-х», где х – это вводимое Вами имя. Это ведь так оригинально и захватывающе?

Код Metro приложений

Как и в приложении WPF, файл App.xaml, позволяет мне хранить в нём ресурсы на уровне приложения. Один из таких ресурсов, StandardStyles.xaml, уже включен в этот файл. Этот файл XAML будет автоматически включается в папку Common и содержит визуальные стили, которые пригодятся для соблюдения принципов и специфики Metro дизайн. Первый из этих принципов принцип относится к фону экрана. Кисть, которая позволяет мне получить правильный фон, включена в статический ресурс и называется ApplicationPage-BackgroundBrush. Я буду использовать этот ресурс в качестве фона для основной панели страницы, Grid.

Моё простое приложение позволит Вам ввести текст в TextBox, нажать кнопку и отобразит этот текст в TextBlock.

Если код из Листинга 1 выглядит Вам знакомым, так и должно быть; особенно, если вы уже разрабатывали на XAML. Он идентичен тому, что можно было бы написать для достижения тех же результатов в WPF или Silverlight. Давайте запустим это приложение и посмотрим на результаты.

Выполнение приложения

Прежде всего, Вы могли заметить, что в Visual Studio 11 исчезла зелёная кнопка запуска (да, я тоже этого не заметил). На самом деле, пропали все оттенки цветов, не так ли? Вместо этого, мы получили новую кнопку «Запуск», действие которой можно изменять с помощью сопутствующего раскрывающегося списка. Имеются три варианта запуска: на локальном компьютере, симуляторе и удаленной машине. В моём случае я не собираюсь подключиться к удалённой машине, а сконцентрируюсь на двух других вариантах.

Перевод кнопки «Запуск» в режим симулятора откроет полноценный эмулятор планшета c запущенным на нём экземпляром Вашей версии Windows. Вы сможете делать почти всё, что можно сделать с настоящим планшетом, в том числе менять ориентацию и открывать другие приложения на стартовом экране. Опцией по умолчанию для кнопки «Запуск» является локальная машина, и больше всего мне нравится то, что Вы привыкли к ней в Visual Studio 2010. Если я запущу моё приложение в этом режиме, моя страница запустится, как показано на Рисунке 4.

Рисунок 4: Запуск простого приложения.

Я хочу, чтобы здесь Вы обратили внимание на несколько моментов. Во-первое, элементы управления имеют плоский вид. Однако, я могу задать этим элементам любой стиль, какой только захочу. Элементы управления Metro имеют характеристики, которые взаимодействуют непосредственно с сенсорной поверхностью, и Вы можете видеть одну из них. Во-второй, когда я начинаю вводить что-либо в текстовом поле, X появляется в поле TextBox справа. Нажатие на X удалит текущий текст. Когда вы используете Metro приложение на сенсорном устройству, это гораздо удобнее просто нажать на этот самый X , чтобы очистить TextBox, чем прикасаться к концу текста и использовать виртуальную клавиатуру для удаления всего текста. За исключением черного и белого, плоского вида, на экране больше нет ничего захватывающего, его поведение полностью соответствует тому, что я запрограммировал. Если я ввожу текст в поле и нажимаю кнопку «Скажи привет», я увижу текст под кнопкой. Теперь мне нужно остановить выполнение.

Это не так-то просто. Metro программы не предусматривают “закрытие” в полном смысле этого слова. Вместо этого они приостанавливают свою работу при обращении к другому приложению или стартовой странице. Я буду обсуждать это гораздо позже. При запуске приложения из Visual Studio, чтобы остановить его выполнение, необходимо вернуться к Visual Studio. Если я наведу мышь чуть ниже верхнего левого угла экрана вдоль левого краю, появится миниатюра окна Visual Studio. Теперь я могу кликнуть (или коснуться экрана, если я использую настоящий планшет) и VS вернётся обратно. Конечно, я могу просто нажать ALT-TAB, чтобы вернуться к VS, где я могу затем нажать кнопку «Стоп». Теперь давайте вернёмся к коду.

Представления

Тег верхнего уровня, которым в данном случае является Page, может выглядеть по-разному в коде XAML, не смотря на то, что большинство страниц WPF, доступных для создания, основаны на Window или UserControl. В приложении Metro, это будет страница.

Идея состоит в том, что приложение отображает информацию либо с помощью переключения между пользовательскими элементами управления, представленных на странице (как в WPF или Silverlight), либо путём перехода на другую страницу, где Вам будет предоставлена ​​возможность легко вернуться назад. Подумайте о планшете или телефоне, которыми Вы пользовались до настоящего времени, и Вы узнаете этот стиль перемещения.

Перекрывание окон невозможно в Metro приложениях, и на самом деле, было бы нежелательным в такой среде Metro. Для добавления новых страниц в приложение Visual Studio предлагает два варианта: Page и UserControl, но не Window. Включение элементов UserControls в страницу ничем не отличается от размещения их в XAML коде окна WPF. Чуть позже я покажу Вам, как легко перемещаться между страницами в Metro приложении.

Листинг 1: Простое Metro приложение

<Page x:Class="IntroToMetro.FirstApp.BlankPage"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   xmlns:local="using:IntroToMetro.FirstApp"   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   mc:Ignorable="d">   <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">     <Grid.RowDefinitions>       <RowDefinition Height="Auto" />       <RowDefinition Height="*" />     </Grid.RowDefinitions>     <StackPanel Grid.Row="0" Orientation="Vertical" HorizontalAlignment="Left">       <TextBox Width="200" Name="txtName" />       <Button Content="Say Hello" Name="btnSayHello" Click="btnSayHello_Click" />       <TextBlock Name="txtGreeting" />     </StackPanel>   </Grid> </Page>