Пример переноса со среды выполнения Windows 8.x на UWP: Bookstore1

В этом разделе рассматривается пример переноса очень простого универсального приложения для версии 8.1 в приложение Windows 10 универсальной платформы Windows (UWP). Универсальное приложение версии 8.1 создает один пакет приложения для Windows 8.1, а другой – для Windows Phone 8.1. На Windows 10 можно создавать единый пакет приложения, который покупатели могут установить на широкий спектр устройств. Именно этим мы и займемся в этом примере. См. раздел Руководство по приложениям UWP.

Приложение, которое мы будем портировать, состоит из элемента ListBox, привязанного к модели представления. Модель представления содержит список книг, в котором отображается заголовок, имя автора и обложка книги. У изображений обложки книги Действие при сборке установлено на Содержимое, а Копировать в выходной каталог установлено на Не копировать.

Предыдущая тема в этом разделе описывает различия между платформами. Это описание содержит подробные сведения и руководство по переносу различных элементов приложения из разметки XAML через привязку к модели представления и далее к доступу к данным. Цель этого практического примера — дополнить это руководство, показывая его в действии на реальном примере. Предполагается, что вы ознакомились с этим руководством, которое в данных примерах не повторяется.

Примечание Если при открытии Bookstore1Universal_10 в Visual Studio отображается сообщение "Требуется обновление Visual Studio", выполните действия, описанные в разделе TargetPlatformVersion.

Файлы для загрузки

Скачайте приложение Bookstore1_81 Universal 8.1.

Скачайте приложение Bookstore1Universal_10 Windows 10.

Универсальное приложение для версии 8.1

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

Bookstore1_81 в Windows

Bookstore1_81 Windows Phone

Перенос в проект Windows 10

Решение Bookstore1_81 является проектом универсального приложения версии 8.1 и содержит эти проекты.

• Bookstore1_81.Windows. Этот проект создает пакет приложения для Windows 8.1.
• Bookstore1_81.WindowsPhone. Этот проект создает пакет приложения для Windows Phone 8.1.
• Bookstore1_81.Shared. Этот проект содержит исходный код, файлы разметки и другие ресурсы, которые используются обоими приложениями.

В этом примере мы выберем обычные параметры, описанные в разделе Если у вас универсальное приложение для версии 8.1, которые относятся к поддержке устройств. Выбор здесь прост: это приложение обладает теми же самыми функциями и по большей части содержит один и тот же код как для Windows 8.1, так и для Windows Phone 8.1. Итак, мы будем переносить содержимое общего проекта (и все необходимое из других проектов) в Windows 10, которая ориентирована на семейство универсальных устройств (приложение, которое можно установить на самый широкий спектр устройств).

Очень быстро создать проект в Visual Studio, скопировать в него файлы из Bookstore1_81 и включить скопированные файлы в новый проект. Начните с создания нового проекта пустого приложения (Windows Universal). Назовите его Bookstore1Universal_10. Это файлы для копирования из Bookstore1_81 в Bookstore1Universal_10.

Из общего проекта

• Скопируйте папку, содержащую PNG-файлы с изображением обложки книги (папка \Assets\CoverImages). После копирования убедитесь, что в Обозревателе решений включена функция Показать все файлы. Щелкните правой кнопкой мыши на скопированной папке и выберите Включить в проект. Под выполнением этой команды мы и понимаем включение файлов или папок в проект. Каждый раз, копируя файл или папку, нажимайте Обновить в Обозревателе решений, а затем включайте этот файл или папку в проект. Для тех файлов, которые вы заменяете в конечном местоположении, выполнять эту операцию не нужно.
• Скопируйте папку, содержащую исходный файл модели представления (папка \ViewModel).
• Скопируйте файл MainPage.xaml и замените на него файл в конечной папке.

Из проекта Windows

• Скопируйте файл BookstoreStyles.xaml. Мы будем использовать этот файл как отправную точку, так как приложение для Windows 10 сможет обработать все ключи ресурсов из этого файла. Некоторые ключи ресурсов, содержащиеся в аналогичном файле для WindowsPhone, не смогут быть обработаны.

Измените исходный код и файлы разметки, которые вы только что скопировали, и измените все ссылки на пространство имен Bookstore1_81 на Bookstore1Universal_10. Эту операцию можно быстро выполнить при помощи функции Заменить в файлах. В модель представления или любой другой императивный код вносить изменений не надо. Но чтобы было проще узнать, какая версия приложения запущена, измените значение, возвращаемое свойством Bookstore1Universal_10.BookstoreViewModel.AppName , с "BOOKSTORE1_81" на "BOOKSTORE1UNIVERSAL_10".

Сейчас вы можете собрать и запустить приложение. Хотя для его переноса в Windows 10 еще не было ничего выполнено, вот как выглядит наше новое приложение UWP:

Работа приложения для Windows 10 с начальными изменениями исходного кода на настольном компьютере

Работа приложения для Windows 10 с начальными изменениями исходного кода на мобильном устройстве

Представление и модель представления правильно работают друг с другом, а элемент ListBox выполняет свои функции. Нам необходимо только подкорректировать оформление. На мобильном устройстве при выборе светлой темы заметна граница списка. Ее нетрудно скрыть. Кроме того, текст слишком велик, поэтому мы изменим используемый стиль. Также приложение должно отображаться в светлых тонах при запуске на ПК, если мы хотим, чтобы оно выглядело так же, как и по умолчанию. Мы изменим цвет.

Универсальное оформление

Приложение Bookstore1_81 использовало два разных словаря ресурсов (BookstoreStyles.xaml) для адаптации стилей к операционным системам Windows 8.1 и Windows Phone 8.1. Ни один из этих двух файлов BookstoreStyles.xaml не содержит стилей, необходимых для работы приложения для Windows 10. Но, к счастью, то, что нам нужно, на самом деле, намного проще любого из них. Поэтому далее мы в основном будем заниматься удалением и упрощением файлов и разметки нашего проекта. Порядок действий описан ниже. Вы можете использовать ссылки в верхней части данного раздела, чтобы загрузить проекты и сравнить результаты всех изменений на данном этапе и в конце примера.

• Чтобы сократить расстояние между элементами, найдите шаблон данных BookTemplate в файле MainPage.xaml и удалите Margin="0,0,0,8" из корневого элемента Grid.
• Также в BookTemplate есть ссылки на BookTemplateTitleTextBlockStyle и BookTemplateAuthorTextBlockStyle. Bookstore1_81 использовали эти ключи в качестве косвенного обращения, чтобы один ключ имел разные реализации в двух приложениях. Мы более не нуждаемся в этом методе обхода и можем ссылаться на стили системы напрямую. Замените эти ссылки на TitleTextBlockStyle и SubtitleTextBlockStyle соответственно.
• Теперь нам необходимо задать корректное значение по умолчанию для фона LayoutRoot, чтобы приложение выглядело соответствующим образом при запуске на всех устройствах вне зависимости от используемой темы. Измените его с "Transparent" на "{ThemeResource ApplicationPageBackgroundThemeBrush}".
• В TitlePanel замените ссылку на TitleTextBlockStyle (который сейчас слишком велик) ссылкой на CaptionTextBlockStyle. PageTitleTextBlockStyle это еще один Bookstore1_81 косвенное обращение, которое нам больше не нужно. Используйте вместо него ссылку на HeaderTextBlockStyle.
• Нам более не нужно задавать специальные значения для свойств Background, Style или ItemContainerStyle для ListBox, поэтому просто удалите эти три атрибута и их значения из файла разметки. Но мы хотим скрыть границу элемента ListBox, поэтому добавьте сюда свойство BorderBrush="{x:Null}".
• Мы не ссылаемся на какие либо ресурсы в ResourceDictionary файла BookstoreStyles.xaml. Вы можете удалить все эти ресурсы. Однако не удаляйте сам файл BookstoreStyles.xaml. Как будет видно в следующем разделе, он нам еще понадобится.

После описанных выше действий приложение будет выглядеть так.

Практически перенесенное приложение для Windows 10, запущенное на настольном компьютере

Практически перенесенное приложение для Windows 10, запущенное на мобильном устройстве

Дополнительная настройка списка для мобильных устройств

При запуске на мобильном устройстве у списка по умолчанию светлый фон при использовании обеих тем. Возможно, вы отдадите предпочтение именно этому стилю. Если это так, то вам более не нужно делать ничего, кроме небольшой уборки. Удалите файл словаря ресурсов BookstoreStyles.xaml из проекта и удалите разметку, которая включает его в MainPage.xaml.

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

То изменение, которое мы вносим, должно влиять на приложение только в том случае, если оно запускается на мобильных устройствах. Поэтому мы будем использовать слегка измененный стиль списка при запуске приложения на семействе мобильных устройств и стиль по умолчанию на остальных устройствах. Для этого мы создадим копию файла BookstoreStyles.xaml и присвоим ему специальное, пригодное для MRT имя, благодаря которому она будет загружаться только на мобильных устройствах.

Добавьте новый элемент проекта ResourceDictionary и назовите его BookstoreStyles.DeviceFamily-Mobile.xaml. Теперь у вас есть два файла, оба логических имени которых — BookstoreStyles.xaml (и именно это имя вы используете в разметке и коде). Тем не менее физические имена у файлов разные, поэтому они могут содержать различную разметку. Вы можете использовать эту MRT-совместимую систему именования с любым файлом в формате XAML, но имейте в виду, что все файлы этого формата с одним и тем же логическим именем используют один и тот же файл кода программной части xaml.cs (там где это применимо).

Отредактируйте копию шаблона списка и сохраните ее вместе с ключом BookstoreListBoxStyle в новом словаре ресурсов BookstoreStyles.DeviceFamily-Mobile.xaml. Теперь внесем несложные изменения в три метода задания свойств.

• В методе задания свойств Foreground измените значение на "{x:Null}". Обратите внимание, что изменение значения свойства на "{x:Null}" непосредственно для элемента равносильно его изменению на null в коде. Однако использование значения "{x:Null}" в методе присваивания значения приводит к своеобразному эффекту: оно переопределяет метод присваивания значения в стиле по умолчанию (для одного и того же свойства) и восстанавливает значение по умолчанию для целевого элемента.
• В методе присваивания значения Background измените значение на "Transparent", чтобы убрать этот светлый фон.
• В методе присваивания значения Template найдите визуальное состояние Focused и удалите его раскадровку, оставив пустой тег.
• Удалите из разметки все остальные методы присваивания значения.

Наконец, скопируйте BookstoreListBoxStyle в файл BookstoreStyles.xaml и удалите три метода присваивания значения, оставив пустой тег. Мы делаем это для того, чтобы на всех устройствах, кроме мобильных, наша ссылка на BookstoreStyles.xaml и BookstoreListBoxStyle обрабатывалась, но не применялась.

Перенесенное приложение для Windows 10, запущенное на мобильном устройстве

Заключение

В этом примере показан процесс переноса очень простого приложения, вероятно, нереально простого. Например, список можно использовать для выбора или задания контекста для навигации; приложение переходит на страницу с дополнительной информацией об элементе, которого коснулся пользователь. Данное приложение не выполняет никаких действий с выбором пользователя и не поддерживает ни навигацию. Но даже в этом случае данный пример помог вам познакомиться с процессом портирования и продемонстрировал важные методики, которые вы можете использовать с реальными приложениями UWP.

Мы также убедились в том, что перенос моделей представления обычно происходит без затруднений. Пользовательский интерфейс и поддержка форм-факторов — это те аспекты, которые наиболее вероятно потребуют нашего внимания при переносе.

Следующий пример — Bookstore2, где мы рассмотрим доступ к сгруппированным данным и их и отображение.