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

В этом примере описывается информация, указанная в Bookstore1, начинается с универсального приложения 8.1, отображающего сгруппированные данные в элементе управления SemanticZoom . В модели представления каждый экземпляр класса Author представляет группу книг, написанных этим автором, и в СемантикЗоом мы можем просмотреть список книг, сгруппированных по автору, или уменьшить, чтобы просмотреть список авторов. Список переходов обеспечивает гораздо более быструю навигацию, чем прокрутка по списку книг. Мы рассмотрим этапы переноса приложения в приложение windows 10 универсальная платформа Windows (UWP).

Обратите внимание , что при открытии Bookstore2Universal_10 в Visual Studio отображается сообщение "Обязательное обновление Visual Studio", а затем выполните действия в TargetPlatformVersion.

Скачиваемые файлы

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

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

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

Вот как выглядит Bookstore2_81 — приложение, которое мы собираемся перенести. Это горизонтально прокручивающая (вертикально прокручивающаяся в Windows Phone) семантика Семантика, показывающая книги, сгруппированные по автору. Вы можете уменьшить масштаб списка переходов и вернуться в любую группу. В этом приложении есть два основных элемента: модель представления, предоставляющая сгруппированные источники данных, и пользовательский интерфейс, который привязывается к этой модели представления. Как мы увидим, оба этих элемента легко переносятся из технологии WinRT 8.1 в Windows 10.

Bookstore2_81 в Windows, увеличенном представлении

Bookstore2_81 в Windows, увеличенное представление

Bookstore2_81 в Windows Phone, увеличенном представлении

Bookstore2_81 в Windows Phone, увеличенном представлении

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

Решение Bookstore2_81 — это проект универсального приложения 8.1. Проект Bookstore2_81.Windows создает пакет приложения для Windows 8.1, а проект Bookstore2_81.WindowsPhone создает пакет приложения для Windows Phone 8.1. Bookstore2_81.Shared — это проект, содержащий исходный код, файлы разметки и другие ресурсы и ресурсы, используемые обеими другими проектами.

Как и в предыдущем примере, вариант мы рассмотрим (из описанных в разделе "Если у вас универсальное приложение 8.1") — перенос содержимого общего проекта в Windows 10, предназначенный для семейства универсальных устройств.

Начните с создания нового проекта пустого приложения (универсального приложения Windows). Назовите его Bookstore2Universal_10. Это файлы для копирования из Bookstore2_81 в Bookstore2Universal_10.

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

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

Из проекта Windows

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

Измените исходный код и файлы разметки, которые вы только что скопировали и изменили все ссылки на пространство имен Bookstore2_81 на Bookstore2Universal_10. Быстрый способ сделать это — использовать функцию "Заменить в файлах ". В модели представления изменения кода не требуются, ни в другом императивном коде. Но, чтобы упростить просмотр версии приложения, измените значение, возвращаемое свойством Bookstore2Universal_10.BookstoreViewModel.AppName с "Bookstore2_81" на "BOOKSTORE2UNIVERSAL_10".

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

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

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

Модель представления и увеличенные и увеличенные представления работают правильно, хотя существуют проблемы, которые делают это немного трудно видеть. Одна из проблем заключается в том, что SemanticZoom не прокручивается. Это связано с тем, что в Windows 10 стиль по умолчанию GridView приводит к вертикальному расположению (и рекомендации по проектированию Windows 10 рекомендуют использовать его таким образом в новых и переносных приложениях). Но параметры горизонтальной прокрутки в шаблоне панели настраиваемых элементов, скопированные из проекта Bookstore2_81 (который был разработан для приложения 8.1), конфликтуют с параметрами вертикальной прокрутки в стиле Windows 10 по умолчанию, который применяется в результате переноса в приложение Windows 10. Во-вторых, приложение еще не адаптирует его пользовательский интерфейс, чтобы обеспечить лучший интерфейс в разных окнах и на небольших устройствах. И, в-третьих, правильные стили и кисти еще не используются, что приводит к тому, что большая часть текста невидима (включая заголовки групп, которые можно щелкнуть, чтобы уменьшить масштаб). Таким образом, в следующих трех разделах (изменения дизайна SemanticZoom и GridView, адаптивный пользовательский интерфейс и универсальный стили) мы исправим эти три проблемы.

Изменения структуры SemanticZoom и GridView

Изменения дизайна в Windows 10 в элементе управления SemanticZoom описаны в разделе "Изменения SemanticZoom". У нас нет работы в этом разделе в ответ на эти изменения.

Изменения в GridView описаны в разделе "Изменения GridView/ListView". У нас есть некоторые незначительные корректировки для адаптации к этим изменениям, как описано ниже.

• В SeZoUC.xaml в , в ZoomedInItemsPanelTemplateнаборе Orientation="Horizontal" и GroupPadding="0,0,0,20".
• В SeZoUC.xaml удалите ZoomedOutItemsPanelTemplate и удалите ItemsPanel атрибут из увеличенного представления.

Вот и все!

Адаптивный пользовательский интерфейс

После этого изменения макет пользовательского интерфейса, который SeZoUC.xaml предоставляет нам отлично, когда приложение работает в широком окне (которое возможно только на устройстве с большим экраном). Если окно приложения является узким, хотя (что происходит на небольшом устройстве, а также может произойти на большом устройстве), пользовательский интерфейс, который у нас был в приложении Магазина Windows Phone, возможно, наиболее подходящий.

Для этого можно использовать адаптивную функцию диспетчера визуальных состояний. Мы настроим свойства визуальных элементов таким образом, чтобы по умолчанию пользовательский интерфейс был размещен в узком состоянии с помощью небольших шаблонов, которые мы использовали в приложении Магазина Windows Phone. Затем мы определим, когда окно приложения шире или равно определенному размеру (измеряется в единицах эффективных пикселей), и в ответ мы изменим свойства визуальных элементов таким образом, чтобы мы получили больший и более широкий макет. Эти изменения свойств будут помещены в визуальное состояние, и мы будем использовать адаптивный триггер для непрерывного мониторинга и определения того, следует ли применять это визуальное состояние, или нет, в зависимости от ширины окна в эффективных пикселях. В этом случае мы активируем ширину окна, но также можно активировать высоту окна.

Минимальная ширина окна в 548 epx подходит для этого варианта использования, так как это размер наименьшего устройства, на которое мы хотели бы отобразить широкий макет. Телефоны, как правило, меньше 548 epx, поэтому на небольшом устройстве, как то, что мы будем оставаться в узком макете по умолчанию. На компьютере окно будет запускаться по умолчанию достаточно широко, чтобы активировать переключатель в широкое состояние. Оттуда вы сможете перетащить окно достаточно узким, чтобы отобразить два столбца элементов размером 250x250. Немного более узкий, чем это, и триггер будет деактивирован, широкое визуальное состояние будет удалено, и узкий макет по умолчанию будет в действии.

Итак, какие свойства необходимо задать ( и изменить) для достижения этих двух разных макетов? Существует два варианта, и каждый из них подразумевает другой подход.

1. Мы можем поместить два элемента управления SemanticZoom в разметку. Одна из них — копия разметки, которую мы использовали в приложении среда выполнения Windows 8.x (с помощью элементов управления GridView внутри него) и свернута по умолчанию. Другим будет копия разметки, которую мы использовали в приложении Магазина Windows Phone (с помощью элементов управления ListView внутри него) и видимых по умолчанию. Визуальное состояние переключит свойства видимости двух элементов управления SemanticZoom . Это потребует очень мало усилий, чтобы достичь, но это не, в целом, высокопроизводительный метод. Таким образом, если вы используете его, необходимо профилировать приложение и убедиться, что оно по-прежнему соответствует вашим целям производительности.
2. Мы можем использовать один СемантикЗоом, содержащий элементы управления ListView. Чтобы достичь двух макетов в широком визуальном состоянии, мы изменим свойства элементов управления ListView, включая шаблоны, применяемые к ним, чтобы привести их к тому же, что и GridView. Это может улучшиться, но существует так много небольших различий между различными стилями и шаблонами GridView и ListView и между их различными типами элементов, что это более сложное решение. Это решение также тесно связано с тем, как стили и шаблоны по умолчанию разработаны на данный момент времени, предоставляя нам решение, которое хрупко и чувствительно к любым будущим изменениям по умолчанию.

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

• В разметке SemanticZoom в новом проекте задайте x:Name="wideSeZo" и Visibility="Collapsed".
• Вернитесь к проекту Bookstore2_81.WindowsPhone и откройте SeZoUC.xaml. Скопируйте разметку элемента SemanticZoom из этого файла и вставьте его сразу после wideSeZo создания проекта. Задайте x:Name="narrowSeZo" для элемента, который вы только что вставили.
• Но narrowSeZo требуется несколько стилей, которые мы еще не скопировали. Снова в Bookstore2_81.WindowsPhone скопируйте два стиля (AuthorGroupHeaderContainerStyle и ZoomedOutAuthorItemContainerStyle) из SeZoUC.xaml и вставьте их в BookstoreStyles.xaml в новый проект.
• Теперь у вас есть два элемента SemanticZoom в новом файле SeZoUC.xaml. Обтекайте эти два элемента в сетке.
• В BookstoreStyles.xaml в новом проекте добавьте слово Wide к этим трем ключам ресурсов (и к их ссылкам в SeZoUC.xaml, но только к ссылкам внутри wideSeZo): AuthorGroupHeaderTemplateи ZoomedOutAuthorTemplateBookTemplate.
• В проекте Bookstore2_81.WindowsPhone откройте BookstoreStyles.xaml. Скопируйте из этого файла те же три ресурса (упомянутые выше), а два преобразователя элементов списка переходов и объявление префикса пространства имен Windows_UI_Xaml_Controls_Primitives и вставьте их в файл BookstoreStyles.xaml в новом проекте.
• Наконец, в SeZoUC.xaml в новом проекте добавьте соответствующую разметку диспетчера визуальных состояний в сетку, которую вы добавили выше.

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="548"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="wideSeZo.Visibility" Value="Visible"/>
                        <Setter Target="narrowSeZo.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    ...

    </Grid>

Универсальная стилизация

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

• В Файле MainPage.xaml измените LayoutRootфон "{ThemeResource ApplicationPageBackgroundThemeBrush}"на .
• В BookstoreStyles.xaml задайте для ресурса TitlePanelMargin 0 значение (или любое значение выглядит хорошо).
• В SeZoUC.xaml задайте значение Margin of wideSeZo 0 (или что бы ни было хорошо для вас).
• В BookstoreStyles.xaml удалите атрибут Margin из AuthorGroupHeaderTemplateWide.
• Удалите атрибут FontFamily из и из AuthorGroupHeaderTemplate ZoomedOutAuthorTemplateнего.
• Bookstore2_81 использовали BookTemplateTitleTextBlockStyleBookTemplateAuthorTextBlockStyleключи ресурсов и PageTitleTextBlockStyle ключи ресурсов в качестве косвенного обращения, чтобы один ключ имел разные реализации в двух приложениях. Нам больше не нужно это косвенное. мы можем просто ссылаться на стили системы напрямую. Таким образом, замените эти ссылки на приложение на TitleTextBlockStyle, CaptionTextBlockStyleи HeaderTextBlockStyle соответственно. Вы можете использовать функцию "Заменить в файлах" Visual Studio, чтобы быстро и точно сделать это. Затем можно удалить эти три неиспользуемых ресурса.
• В AuthorGroupHeaderTemplate, замените SystemControlBackgroundAccentBrushPhoneAccentBrush его и установите Foreground="White" в TextBlock, чтобы он выглядел правильно при выполнении в семействе мобильных устройств.
• Скопируйте BookTemplateWideатрибут переднего плана из второго TextBlock в первую.
• В ZoomedOutAuthorTemplateWide, измените ссылку на SubheaderTextBlockStyle (которая в настоящее время слишком большая) на ссылку SubtitleTextBlockStyle.
• Увеличенное представление (список переходов) больше не накладывает увеличенное представление на новой платформе, чтобы можно было удалить Background атрибут из увеличенного представления narrowSeZo.
• Поэтому все стили и шаблоны находятся в одном файле, перейдите ZoomedInItemsPanelTemplate из SeZoUC.xaml и в BookstoreStyles.xaml.

Последняя последовательность операций стилизации оставляет приложение похожим на это.

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

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

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

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

Заключение

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

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