Freigeben über

Windows-Runtime 8.x zu UWP-Fallstudie: QuizGame-Beispiel-App

  • Artikel

Dieses Thema enthält eine Fallstudie zum Portieren eines funktionierenden Peer-to-Peer-Quizspiels WinRT 8.1-Beispiel-App zu einer Windows 10-Universelle Windows-Plattform-App (UWP).

Eine universelle 8.1-App ist eine App, die zwei Versionen derselben App erstellt: ein App-Paket für Windows 8.1 und ein anderes App-Paket für Windows Phone 8.1. Die WinRT 8.1-Version von QuizGame verwendet eine Universelle Windows-App-Projektanordnung, aber es nimmt einen anderen Ansatz und erstellt eine funktional unterschiedliche App für die beiden Plattformen. Das Windows 8.1-App-Paket dient als Host für eine Quizspielsitzung, während das Windows Phone 8.1-App-Paket die Rolle des Clients für den Host spielt. Die beiden Hälften der Quizspielsitzung kommunizieren über Peer-to-Peer-Netzwerke.

Das Anpassen der beiden Hälften auf PC und Telefon ist sinnvoll. Aber wäre es nicht noch besser, wenn Sie sowohl den Host als auch den Client auf einem beliebigen Gerät ihrer Wahl ausführen könnten? In dieser Fallstudie portieren wir beide Apps zu Windows 10, wo sie jeweils in ein einzelnes App-Paket integriert werden, das Benutzer auf einer vielzahl von Geräten installieren können.

Die App verwendet Muster, die Ansichten und Ansichtsmodelle verwenden. Aufgrund dieser sauberen Trennung ist der Portierungsprozess für diese App sehr einfach, wie Sie sehen werden.

Hinweis In diesem Beispiel wird davon ausgegangen, dass Ihr Netzwerk für das Senden und Empfangen von benutzerdefinierten UDP-Gruppen-Multicastpaketen konfiguriert ist (die meisten Heimnetzwerke sind, obwohl Ihr Arbeitsnetzwerk möglicherweise nicht vorhanden ist). Das Beispiel sendet und empfängt auch TCP-Pakete.

 

Hinweis Beim Öffnen von QuizGame10 in Visual Studio wird die Meldung "Visual Studio-Update erforderlich" angezeigt, und führen Sie die Schritte in TargetPlatformVersion aus.

 

Downloads

Laden Sie die App "QuizGame Universal 8.1" herunter. Dies ist der Anfangszustand der App vor dem Portieren.

Laden Sie die QuizGame10 Windows 10-App herunter. Dies ist der Zustand der App direkt nach dem Portieren.

Sehen Sie sich die neueste Version dieses Beispiels auf GitHub an.

Die WinRT 8.1-Lösung

So sieht QuizGame aus – die App, die wir portieren werden – aus.

die Quizgame-Host-App, die unter Windows ausgeführt wird

Die QuizGame-Host-App, die unter Windows ausgeführt wird

 

die Quizgame-Client-App, die auf Windows Phone ausgeführt wird

Die QuizGame-Client-App, die auf Windows Phone ausgeführt wird

Eine exemplarische Vorgehensweise für QuizGame, die verwendet wird

Dies ist ein kurzes hypothetisches Konto der verwendeten App, bietet aber nützliche Informationen, wenn Sie die App für sich selbst über Ihr Drahtlosnetzwerk ausprobieren möchten.

Ein lustiges Quizspiel findet in einer Bar statt. Es gibt einen großen Fernseher in der Bar, den jeder sehen kann. Der Quizmaster verfügt über einen PC, dessen Ausgabe auf dem Fernsehgerät angezeigt wird. Auf diesem PC wird die Host-App ausgeführt. Jeder, der am Quiz teilnehmen möchte, muss lediglich die "Client-App" auf ihrem Smartphone oder Surface installieren.

Die Host-App befindet sich im Wartebereichsmodus, und auf dem großen Fernsehgerät wird angezeigt, dass sie für Client-Apps bereit ist, eine Verbindung herzustellen. Joan startet die Client-App auf ihrem mobilen Gerät. Sie gibt ihren Namen in das Textfeld "Spielername " ein und tippt auf " Spiel beitreten". Die Host-App erkennt an, dass Joan durch Anzeigen ihres Namens beigetreten ist, und die Client-App von Joan gibt an, dass es auf den Start des Spiels wartet. Als Nächstes durchläuft Maxwell dieselben Schritte auf seinem mobilen Gerät.

Der Quizmaster klickt auf das Startspiel , und die Host-App zeigt eine Frage und die möglichen Antworten an (es zeigt auch eine Liste der verbundenen Spieler in normalem Schriftgewicht, farbiges Grau). Gleichzeitig werden die Antworten auf Schaltflächen auf verbundenen Clientgeräten angezeigt. Joan tippt auf die Schaltfläche mit der Antwort "1975" darauf, wo alle ihre Schaltflächen deaktiviert werden. Auf der Host-App wird Joans Name grün (und wird fett) in Anerkennung des Empfangs ihrer Antwort bemalt. Maxwell antworte auch. Der Quizmaster, der angibt, dass alle Spielernamen grün sind, klickt auf "Nächste Frage".

Fragen werden in diesem Zyklus weiterhin gestellt und beantwortet. Wenn die letzte Frage in der Host-App angezeigt wird, ist "Ergebnisse anzeigen" der Inhalt der Schaltfläche und nicht "Nächste Frage". Wenn auf "Ergebnisse anzeigen" geklickt wird, werden die Ergebnisse angezeigt. Wenn Sie auf "Zurück zum Wartebereich" klicken, kehren Sie zum Anfang des Spiellebenszyklus zurück, mit der Ausnahme, dass verbundene Spieler beigetreten sind. Aber zurück in den Wartebereich gibt neuen Spielern die Möglichkeit, teilzunehmen, und sogar eine bequeme Zeit für verbundene Spieler zu verlassen (obwohl ein beigetretener Spieler jederzeit verlassen kann, indem er auf "Spiel verlassen" tippt).

Lokaler Testmodus

Um die App und deren Interaktionen auf einem einzelnen PC auszuprobieren, anstatt sie geräteübergreifend zu verteilen, können Sie die Host-App im lokalen Testmodus erstellen. In diesem Modus wird die Verwendung des Netzwerks vollständig umgangen. Stattdessen zeigt die Benutzeroberfläche der Host-App den Hostteil links neben dem Fenster an und rechts zwei Kopien der Client-App-UI vertikal gestapelt (beachten Sie, dass in dieser Version die lokale Testmodus-UI für eine PC-Anzeige festgelegt ist; sie passt sich nicht an kleine Geräte an). Diese Benutzeroberflächensegmente, alle in derselben App, kommunizieren miteinander über einen simulierten Client communicator, der die Interaktionen simuliert, die sonst über das Netzwerk stattfinden würden.

Um den lokalen Testmodus zu aktivieren, definieren Sie LOCALTESTMODEON (in Projekteigenschaften) als Symbol für die bedingte Kompilierung, und erstellen Sie es erneut.

Portieren zu einem Windows 10-Projekt

QuizGame enthält die folgenden Teile.

  • P2PHelper. Dies ist eine portable Klassenbibliothek, die die Peer-to-Peer-Netzwerklogik enthält.
  • QuizGame.Windows. Dies ist das Projekt, das das App-Paket für die Host-App erstellt, das auf Windows 8.1 ausgerichtet ist.
  • QuizGame.WindowsPhone. Dies ist das Projekt, das das App-Paket für die Client-App erstellt, das auf Windows Phone 8.1 ausgerichtet ist.
  • QuizGame.Shared. Dies ist das Projekt, das Quellcode, Markupdateien und andere Ressourcen und Ressourcen enthält, die von beiden anderen Projekten verwendet werden.

In dieser Fallstudie haben wir die üblichen Optionen, die unter "Wenn Sie über eine universelle 8.1-App in Bezug auf die zu unterstützenden Geräte verfügen" beschrieben.

Basierend auf diesen Optionen portieren wir QuizGame.Windows zu einem neuen Windows 10-Projekt namens QuizGameHost. Und wir portieren QuizGame.WindowsPhone zu einem neuen Windows 10-Projekt namens QuizGameClient. Diese Projekte zielen auf die universelle Gerätefamilie ab, sodass sie auf jedem Gerät ausgeführt werden. Und wir behalten die QuizGame.Shared-Quelldateien usw. in ihrem eigenen Ordner bei, und wir verknüpfen diese freigegebenen Dateien mit den beiden neuen Projekten. Genau wie zuvor behalten wir alles in einer Lösung, und wir nennen es QuizGame10.

Die QuizGame10-Lösung

  • Erstellen Sie eine neue Projektmappe (New Project Other Project>Types>Visual Studio Solutions), und nennen Sie sie QuizGame10.

P2PHelper

  • Erstellen Sie in der Projektmappe ein neues Windows 10-Klassenbibliotheksprojekt (Neue Windows>Universal Class Library (Windows Universal>Class Library) und nennen Sie es P2PHelper.
  • Löschen Sie Class1.cs aus dem neuen Projekt.
  • Kopieren Sie P2PSession.cs, P2PSessionClient.cs und P2PSessionHost.cs in den Ordner des neuen Projekts, und fügen Sie die kopierten Dateien in das neue Projekt ein.
  • Das Projekt wird erstellt, ohne weitere Änderungen zu benötigen.

Freigegebene Dateien

  • Kopieren Sie die Ordner "Common", "Model", "View" und "ViewModel" aus "\QuizGame.Shared\" in "\QuizGame10\".
  • Allgemeine, Modell-, Ansichts- und ViewModel-Elemente sind das, was wir bedeuten, wenn wir auf die freigegebenen Ordner auf dem Datenträger verweisen.

QuizGameHost

  • Erstellen Sie ein neues Windows 10-App-Projekt (Add New Project>Windows Universal>Blank Application (Windows Universal)), und nennen Sie>es QuizGameHost.
  • Fügen Sie einen Verweis auf P2PHelper hinzu (Add Reference>Projects>Solution>P2PHelper).
  • Erstellen Sie in Projektmappen-Explorer einen neuen Ordner für jeden freigegebenen Ordner auf dem Datenträger. Klicken Sie wiederum mit der rechten Maustaste auf jeden soeben erstellten Ordner, und klicken Sie auf "Vorhandenes Element hinzufügen>", und navigieren Sie zu einem Ordner. Öffnen Sie den entsprechenden freigegebenen Ordner, wählen Sie alle Dateien aus, und klicken Sie dann auf "Als Link hinzufügen".
  • Kopieren Sie "MainPage.xaml" von "\QuizGame.Windows\" in "\QuizGameHost\", und ändern Sie den Namespace in "QuizGameHost".
  • Kopieren Sie "App.xaml" von "\QuizGame.Shared\" in "\QuizGameHost\", und ändern Sie den Namespace in "QuizGameHost".
  • Anstatt app.xaml.cs zu überschreiben, behalten wir die Version im neuen Projekt bei und nehmen nur eine gezielte Änderung vor, um den lokalen Testmodus zu unterstützen. Ersetzen Sie in app.xaml.cs diese Codezeile:
rootFrame.Navigate(typeof(MainPage), e.Arguments);

durch diesen:

#if LOCALTESTMODEON
    rootFrame.Navigate(typeof(TestView), e.Arguments);
#else
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
#endif
  • Fügen Sie in properties>Build>conditional compilation symbols, localTESTMODEON hinzu.
  • Sie können nun zum Code zurückkehren, den Sie app.xaml.cs hinzugefügt haben, und den TestView-Typ auflösen.
  • Ändern Sie in "package.appxmanifest" den Funktionsnamen von "internetClient" in "internetClientServer".

QuizGameClient

  • Erstellen Sie ein neues Windows 10-App-Projekt (Add New Project>Windows Universal>Blank Application (Windows Universal)), und nennen Sie>es QuizGameClient.
  • Fügen Sie einen Verweis auf P2PHelper hinzu (Add Reference>Projects>Solution>P2PHelper).
  • Erstellen Sie in Projektmappen-Explorer einen neuen Ordner für jeden freigegebenen Ordner auf dem Datenträger. Klicken Sie wiederum mit der rechten Maustaste auf jeden soeben erstellten Ordner, und klicken Sie auf "Vorhandenes Element hinzufügen>", und navigieren Sie zu einem Ordner. Öffnen Sie den entsprechenden freigegebenen Ordner, wählen Sie alle Dateien aus, und klicken Sie dann auf "Als Link hinzufügen".
  • Kopieren Sie "MainPage.xaml" von "\QuizGame.WindowsPhone\" in "\QuizGameClient\", und ändern Sie den Namespace in "QuizGameClient".
  • Kopieren Sie "App.xaml" von "\QuizGame.Shared\" in "\QuizGameClient\", und ändern Sie den Namespace in "QuizGameClient".
  • Ändern Sie in "package.appxmanifest" den Funktionsnamen von "internetClient" in "internetClientServer".

Sie können jetzt erstellen und ausführen.

Adaptive UI

Die QuizGameHost Windows 10-App sieht gut aus, wenn die App in einem breiten Fenster ausgeführt wird (was nur auf einem Gerät mit großem Bildschirm möglich ist). Wenn das Fenster der App schmal ist (was auf einem kleinen Gerät geschieht und auch auf einem großen Gerät geschehen kann), wird die Benutzeroberfläche so stark gehandelt, dass sie unlesbar ist.

Wir können das adaptive Visual State Manager-Feature verwenden, um dies zu beheben, wie wir in der Fallstudie: Bookstore2 erläutert haben. Legen Sie zunächst Eigenschaften für visuelle Elemente fest, sodass die Benutzeroberfläche standardmäßig im schmalen Zustand angeordnet ist. Alle diese Änderungen erfolgen in \View\HostView.xaml.

  • Ändern Sie im Hauptraster die Höhe der ersten RowDefinition von "140" in "Auto".
  • Im Raster, das den TextBlock-Namen pageTitle enthält, festgelegt x:Name="pageTitleGrid" und festgelegt.Height="60" Diese ersten beiden Schritte sind so möglich, dass wir die Höhe dieser RowDefinition über einen Setter in einem visuellen Zustand effektiv steuern können.
  • Ein pageTitle, set Margin="-30,0,0,0".
  • Im Raster, das durch den Kommentar <!-- Content -->angegeben ist, legen und Margin="-18,12,0,0".x:Name="contentGrid"
  • Legen Sie auf dem TextBlock unmittelbar über dem Kommentar <!-- Options -->Margin="0,0,0,24"fest.
  • Ändern Sie im Standardformat "TextBlock " (die erste Ressource in der Datei) den Wert des FontSize-Setters in "15".
  • OptionContentControlStyleÄndern Sie in , ändern Sie den FontSize-Setterwert in "20". Dieser Schritt und der vorherige Schritt geben uns eine gute Typhierarchie, die auf allen Geräten gut funktioniert. Dies sind viel flexiblere Größen als die "30", die wir für die Windows 8.1-App verwendet haben.
  • Fügen Sie schließlich das entsprechende Visual State Manager-Markup zum Stammraster hinzu.
<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>

Universelle Formatierung

Sie werden feststellen, dass die Schaltflächen in Windows 10 nicht über den gleichen Abstand für Toucheingabeziele in ihrer Vorlage verfügen. Zwei kleine Änderungen beheben dies. Fügen Sie zunächst dieses Markup in "app.xaml" sowohl in "QuizGameHost" als auch in "QuizGameClient" hinzu.

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

Fügen Sie diesen Setter OptionButtonStyle anschließend in \View\ClientView.xaml hinzu.

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

Mit dieser letzten Optimierung verhält sich die App genauso wie vor dem Port, mit dem zusätzlichen Wert, der jetzt überall ausgeführt wird.

Zusammenfassung

Die App, die wir in dieser Fallstudie portiert haben, war eine relativ komplexe App, die mehrere Projekte, eine Klassenbibliothek und eine ziemlich große Menge an Code und Benutzeroberfläche umfasst. Trotzdem war der Port einfach. Einige der einfachen Portierung sind direkt auf die Ähnlichkeit zwischen der Windows 10-Entwicklerplattform und den Windows 8.1- und Windows Phone 8.1-Plattformen zurückzuführen. Einige sind darauf zurückzuführen, wie die ursprüngliche App so konzipiert wurde, dass die Modelle, die Ansichtsmodelle und die Ansichten getrennt bleiben.