Пример использования Windows Phone Silverlight для UWP: Bookstore1

В этом разделе описывается перенос очень простого приложения Windows Phone Silverlight в приложение windows 10 универсальная платформа Windows (UWP). В 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). Назовите его Bookstore1Universal_10. Это файлы для копирования из Bookstore1WPSL8 в Bookstore1Universal_10.

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

Мы можем сохранить App.xaml и App.xaml.cs, которые Visual Studio создали для нас в проекте Windows 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 необходимы следующие изменения переноса:

• Перейдите на Page (не забывайте phone:PhoneApplicationPage о вхождения в синтаксисе элемента свойства).
• 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. TitlePanelВ StackPanel удалите ссылки на PhoneTextNormalStyle стили иPhoneTextTitle1Style стили TextBlock.

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

Представление и модель представления работают правильно, и ListBox работает правильно. В основном нам нужно исправить стили и получить изображения для отображения.

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

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

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

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

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

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

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

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

В Bookstore1WPSL8 мы сделали следующее:

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

В Bookstore1Universal мы используем схему URI ms-appx. Таким образом, чтобы мы могли сохранить остальной код в том же коде, можно использовать другую перегрузку конструктора 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 атрибут из корневой сетки.
• Если вы хотите дать заголовок страницы немного больше дышащих помещений, вы можете сбросить нижнее поле -5.6 0 на заголовок страницы TextBlock.
• Теперь необходимо задать LayoutRootдля параметра "Фон" правильное значение по умолчанию, чтобы приложение выглядело соответствующим образом при выполнении на всех устройствах независимо от того, какая тема имеет значение. Измените его на "Transparent" "{ThemeResource ApplicationPageBackgroundThemeBrush}".

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

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

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

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

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

Заключение

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

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