Intro to Metro (Захаров) (Письменные переводы статей (15 000 знаков) с английского на русский), страница 3

Проект «Библиотека классов» является типичной библиотекой для сборки, которую можно использовать для разработки компонентов и ярусов низкого уровня в 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 приложении.