Поделиться через

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

  • Статья

В этом разделе описывается перенос работающего однорангового теста игры WinRT 8.1 в приложение windows 10 универсальная платформа Windows (UWP).

Универсальное приложение 8.1 — это приложение, которое создает две версии одного приложения: один пакет приложения для Windows 8.1 и другой пакет приложения для Windows Phone 8.1. В winRT 8.1 версии QuizGame используется структура проекта универсального приложения Для Windows, но он принимает другой подход, и он создает функционально отдельное приложение для двух платформ. Пакет приложения Windows 8.1 служит узлом для сеанса игры теста, а пакет приложения Windows Phone 8.1 играет роль клиента на узле. Два половины игрового сеанса теста взаимодействуют через одноранговую сеть.

Адаптация двух половинок к КОМПЬЮТЕРу и телефону соответственно имеет смысл. Но, не было бы еще лучше, если бы вы могли запустить как узел, так и клиент на любом устройстве вашего выбора? В этом примере мы переносим оба приложения в Windows 10, где каждый из них будет встраиваться в один пакет приложения, который пользователи могут устанавливать на широкий спектр устройств.

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

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

 

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

 

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

Скачайте приложение QuizGame Universal 8.1. Это начальное состояние приложения до переноса.

Скачайте приложение QuizGame10 Для Windows 10. Это состояние приложения сразу после переноса.

См. последнюю версию этого примера на сайте GitHub.

Решение WinRT 8.1

Вот как выглядит приложение QuizGame — приложение, которое мы собираемся перенести.

приложение узла quizgame, работающее в windows

Ведущее приложение QuizGame, работающее в Windows

 

клиентское приложение quizgame, работающее на windows phone

Клиентское приложение QuizGame, работающее на Windows Phone

Пошаговое руководство по использованию QuizGame

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

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

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

Тестмастер нажимает кнопку "Пуск игры ", а ведущее приложение отображает вопрос и возможные ответы (он также отображает список присоединенных игроков в обычном шрифтовом весе, цветной серый). Одновременно ответы отображаются на кнопках на присоединенных клиентских устройствах. Джоан нажимает кнопку с ответом "1975" на нем, где все ее кнопки становятся отключены. На хост-приложении имя Джоана окрашено зеленым цветом (и становится полужирным) в подтверждение получения ее ответа. Максвелл ответы, кроме того. Мастер теста, отметив, что имена всех игроков зеленые, нажмите кнопку "Следующий вопрос".

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

Локальный тестовый режим

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

Чтобы активировать локальный тестовый режим, определите LOCALTESTMODEON (в свойствах проекта) в качестве символа условной компиляции и перестройте.

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

QuizGame содержит следующие части.

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

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

На основе этих параметров мы переносим QuizGame.Windows в новый проект Windows 10 с именем QuizGameHost. И мы будем портировать QuizGame.WindowsPhone в новый проект Windows 10 под названием QuizGameClient. Эти проекты предназначены для универсального семейства устройств, поэтому они будут работать на любом устройстве. И мы будем хранить исходные файлы QuizGame.Shared и т. д. в собственной папке, и мы свяжит эти общие файлы с двумя новыми проектами. Как и раньше, мы будем хранить все в одном решении, и мы будем называть его QuizGame10.

Решение QuizGame10

  • Создайте новое решение (новые>типы проектов>Visual Studio Solutions) и назовите его QuizGame10.

P2PHelper

  • В решении создайте проект библиотеки классов Windows 10 (новая>библиотека универсальных>классов Project Windows (универсальная версия Windows)) и назовите его P2PHelper.
  • Удалите Class1.cs из нового проекта.
  • Скопируйте P2PSession.cs, P2PSessionClient.cs и P2PSessionHost.cs в папку нового проекта и включите скопированные файлы в новый проект.
  • Проект будет построен без дополнительных изменений.

Общие файлы

  • Скопируйте папки Common, Model, View и ViewModel из \QuizGame.Shared\ в \QuizGame10\.
  • Common, Model, View и ViewModel — это то, что мы будем означать, когда мы будем ссылаться на общие папки на диске.

QuizGameHost

  • Создайте проект приложения Windows 10 (добавьте>новое универсальное приложение Project>Windows>(универсальное приложение Windows)) и назовите его QuizGameHost.
  • Добавьте ссылку на P2PHelper (добавление эталонных>проектов>решения>P2PHelper).
  • В Обозреватель решений создайте новую папку для каждой из общих папок на диске. В свою очередь щелкните правой кнопкой мыши каждую созданную папку и нажмите кнопку "Добавить>существующий элемент" и перейдите по папке. Откройте соответствующую общую папку, выберите все файлы и нажмите кнопку "Добавить как ссылку".
  • Скопируйте MainPage.xaml из \QuizGame.Windows\ в \QuizGameHost\ и измените пространство имен на QuizGameHost.
  • Скопируйте App.xaml из \QuizGame.Shared\ в \QuizGameHost\ и измените пространство имен на QuizGameHost.
  • Вместо перезаписи app.xaml.cs мы будем хранить версию в новом проекте и просто внести в него одно целевое изменение для поддержки локального тестового режима. В app.xaml.cs замените эту строку кода:
rootFrame.Navigate(typeof(MainPage), e.Arguments);

следующим кодом:

#if LOCALTESTMODEON
    rootFrame.Navigate(typeof(TestView), e.Arguments);
#else
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
#endif
  • В символах условной компиляции Properties>Build>добавьте LOCALTESTMODEON.
  • Теперь вы сможете вернуться к коду, который вы добавили в app.xaml.cs и разрешить тип TestView.
  • В package.appxmanifest измените имя возможности с internetClient на internetClientServer.

QuizGameClient

  • Создайте проект приложения Windows>10 (добавьте>новое универсальное приложение Windows Project>(универсальное приложение Windows)) и назовите его QuizGameClient.
  • Добавьте ссылку на P2PHelper (добавление эталонных>проектов>решения>P2PHelper).
  • В Обозреватель решений создайте новую папку для каждой из общих папок на диске. В свою очередь щелкните правой кнопкой мыши каждую созданную папку и нажмите кнопку "Добавить>существующий элемент" и перейдите по папке. Откройте соответствующую общую папку, выберите все файлы и нажмите кнопку "Добавить как ссылку".
  • Скопируйте MainPage.xaml из \QuizGame.WindowsPhone\ в \QuizGameClient\ и измените пространство имен на QuizGameClient.
  • Скопируйте App.xaml из \QuizGame.Shared\ в \QuizGameClient\ и измените пространство имен на QuizGameClient.
  • В package.appxmanifest измените имя возможности с internetClient на internetClientServer.

Теперь вы сможете создавать и запускать.

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

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

Мы можем использовать функцию адаптивного диспетчера визуальных состояний для устранения этой проблемы, как описано в примере: Bookstore2. Сначала задайте свойства визуальных элементов таким образом, чтобы пользовательский интерфейс был размещен в узком состоянии. Все эти изменения происходят в файле \View\HostView.xaml.

  • В главной сетке измените высоту первого объекта RowDefinition с "140" на "Auto".
  • В сетке, содержащей textBlock с именем pageTitle, set x:Name="pageTitleGrid" и Height="60". Эти первые два шага — это сделать так, чтобы мы могли эффективно контролировать высоту этого объекта RowDefinition с помощью метода задания в визуальном состоянии.
  • В pageTitle, установите Margin="-30,0,0,0".
  • В сетке, указанной примечания<!-- Content -->, задайте x:Name="contentGrid" иMargin="-18,12,0,0".
  • В TextBlock сразу над комментарием <!-- Options -->установите.Margin="0,0,0,24"
  • В стиле TextBlock по умолчанию (первый ресурс в файле) измените значение параметра FontSize на "15".
  • В OptionContentControlStyleполе "ШрифтSize setter" измените значение "20". Этот шаг и предыдущий даст нам хороший тип пандус, который будет работать хорошо на всех устройствах. Это гораздо более гибкие размеры, чем "30", которые мы использовали для приложения Windows 8.1.
  • Наконец, добавьте соответствующую разметку Visual State Manager в корневую сетку.
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="WideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="548"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="pageTitleGrid.Height" Value="140"/>
                <Setter Target="pageTitle.Margin" Value="0,0,30,40"/>
                <Setter Target="contentGrid.Margin" Value="40,40,0,0"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

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

Вы заметите, что в Windows 10 кнопки не имеют одинаковых сенсорных накладок в шаблоне. Это исправит два небольших изменения. Сначала добавьте эту разметку в app.xaml в QuizGameHost и QuizGameClient.

<Style TargetType="Button">
    <Setter Property="Margin" Value="12"/>
</Style>

А во-вторых, добавьте этот метод OptionButtonStyle задания в файл \View\ClientView.xaml.

<Setter Property="Margin" Value="6"/>

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

Заключение

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