Пример переноса с Windows Phone Silverlight на UWP: Bookstore1

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

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

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

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

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

Скачать приложение Bookstore1WPSL8 для Windows Phone Silverlight.

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

Приложение Windows Phone Silverlight

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

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

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

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

Мы можем сохранить App.xaml и App.xaml.cs, которые Visual Studio создает для нас в проекте Window 10.

Измените исходный код и файлы разметки, которые вы только что скопировали, и измените все ссылки на пространство имен Bookstore1WPSL8 на Bookstore1Universal_10. Эту операцию можно быстро выполнить при помощи функции Заменить в файлах. В императивном коде в исходном файле модели представления необходимо сделать следующие изменения для переноса.

• Измените System.ComponentModel.DesignerProperties на DesignMode, а затем примените к нему команду Разрешить. Удалите свойство IsInDesignTool и используйте функцию IntelliSense, чтобы добавить правильное имя свойства: DesignModeEnabled.
• Примените команду Разрешить к ImageSource.
• Примените команду Разрешить к BitmapImage.
• Удалите использование System.Windows.Media; и using System.Windows.Media.Imaging;.
• Измените значение, возвращаемое свойством Bookstore1Universal_10.BookstoreViewModel.AppName , с BOOKSTORE1WPSL8 на BOOKSTORE1UNIVERSAL.

В файле MainPage.xaml необходимо сделать следующие изменения для переноса.

• Измените phone:PhoneApplicationPage на Page (не забудьте вхождения в синтаксисе элементов свойства).
• Удалите объявления префикса пространства имен phone и shell.
• Измените "clr-namespace" на "using" в остальных объявлениях префикса пространства имен.

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

1. В корневом элементе Page в MainPage.xaml удалите SupportedOrientations="Portrait".
2. В корневом элементе Page в MainPage.xaml удалите Orientation="Portrait".
3. В корневом элементе Page в MainPage.xaml удалите shell:SystemTray.IsVisible="True".
4. В шаблоне данных BookTemplate удалите ссылки на PhoneTextExtraLargeStyle и стили PhoneTextSubtleStyleTextBlock.
5. В TitlePanelStackPanel удалите ссылки на PhoneTextNormalStyle и стили PhoneTextTitle1StyleTextBlock.

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

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

Выплачивание долгов и некоторый начальный стиль

По умолчанию все ориентации поддерживаются. Приложение Windows Phone Silverlight явно ограничивает себя только книжным, поэтому элементы задолженности No 1 и 2 погашены путем входа в манифест пакета приложения в новом проекте и проверки книжной ориентации в разделе Поддерживаемые ориентации.

Для этого приложения элемент 3 не является долгом, так как строка состояния (прежнее название — область задач) отображается по умолчанию. Для элементов 4 и 5 необходимо найти четыре стиля TextBlock универсальная платформа Windows (UWP), которые соответствуют Windows Phone стилям Silverlight, которые мы использовали. Можно запустить приложение Windows Phone Silverlight в эмуляторе и сравнить его непосредственно с иллюстрацией в разделе Текст. По результатам этого обзора и просмотра свойств системных стилей Windows Phone Silverlight мы сможем сделать эту таблицу.

Ключ стиля Windows Phone Silverlight	Ключ стилей UWP
PhoneTextExtraLargeStyle	TitleTextBlockStyle
PhoneTextSubtleStyle	SubtitleTextBlockStyle
PhoneTextNormalStyle	CaptionTextBlockStyle
PhoneTextTitle1Style	HeaderTextBlockStyle

Чтобы установить эти стили, можно просто ввести их в редактор разметки или использовать средства XAML в Visual Studio и установить их не введя ни единого знака. Для этого щелкните правой кнопкой мыши TextBlock, затем щелкните Изменить стиль>Применить ресурс. Чтобы сделать это с TextBlock в шаблоне элементов, щелкните правой кнопкой мыши ListBox и выберите Изменить дополнительные шаблоны>Изменить созданные элементы (ItemTemplate).

За элементами присутствует на 80% непрозрачный белый фон, так как стиль по умолчанию элемента управления ListBox устанавливает фон для системного ресурса ListBoxBackgroundThemeBrush. Установите для параметра Background="Transparent" значение ListBox, чтобы очистить этот фон. Чтобы выровнять TextBlock по левому краю в шаблоне элементов, отредактируйте его еще раз выше описанным способом и установите для Margin значение "9.6,0" на обоих TextBlock.

После этого из-за изменений, связанных с пикселями представления необходимо идти дальше и умножить все фиксированные измерения размеров, которые мы еще не изменили (поля, ширина, высота и т. д.) на 0,8. Например, изображения должны измениться с 70x70 пикселей на 56x56 пикселей.

Однако давайте сначала заставим эти изображения отрисовываться, прежде чем покажем результаты оформления.

Привязка изображения к модели представления

В Bookstore1WPSL8 мы сделали это:

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(this.CoverImagePath, UriKind.Relative));

В Bookstore1Universal мы используем ms-appx Схема URI. Чтобы сохранить остальную часть кода такой же, можно использовать другую перегрузку конструктора System.Uri, чтобы поместить схему URI ms-appx в базовый URI и добавить в него оставшуюся часть пути. Пример:

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(new Uri("ms-appx://"), this.CoverImagePath));

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

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

• Чтобы сократить расстояние между элементами, найдите шаблон данных BookTemplate в файле MainPage.xaml и удалите атрибут Margin из корневого элемента Grid.
• Если вы хотите предоставить заголовку страницы несколько больше места, можно выполнить сброс нижнего поля -5.6 до 0 в заголовке страницы TextBlock.
• Теперь нам необходимо задать корректное значение по умолчанию для фона LayoutRoot, чтобы приложение выглядело соответствующим образом при запуске на всех устройствах вне зависимости от используемой темы. Измените его с "Transparent" на "{ThemeResource ApplicationPageBackgroundThemeBrush}".

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

Способы управления темой приложения описаны в разделе Изменения тем .

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

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

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

Заключение

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

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