Windows-Runtime 8.x zu universeller Windows-Plattform (UWP) – Fallstudie: QuizGame-Beispiel-AppWindows Runtime 8.x to UWP case study: QuizGame sample app

In diesem Thema wird eine Fallstudie zum Portieren einer funktionsfähigen Peer-to-Peer Quiz Game-WinRT 8,1-Beispiel-app in eine Windows 10 universelle Windows-Plattform-app (UWP) vorgestellt.This topic presents a case study of porting a functioning peer-to-peer quiz game WinRT 8.1 sample app to a Windows 10 Universal Windows Platform (UWP) app.

Eine universelle 8,1-App erstellt zwei Versionen derselben App: ein App-Paket für Windows 8.1 und ein anderes app-Paket für Windows Phone 8,1.A Universal 8.1 app is one that builds two versions of the same app: one app package for Windows 8.1, and a different app package for Windows Phone 8.1. Für die WinRT 8.1-Version von QuizGame wird eine Anordnung mit einem Projekt für eine universelle Windows-App verwendet. Dabei wird aber ein anderer Ansatz gewählt und für die beiden Plattformen jeweils eine App mit unterschiedlicher Funktionalität erstellt.The WinRT 8.1 version of QuizGame uses a Universal Windows app project arrangement, but it takes a different approach and it builds a functionally distinct app for the two platforms. Das App-Paket Windows 8.1 dient als Host für eine Quiz Spielsitzung, während das Windows Phone 8,1-App-Paket die Rolle des Clients auf dem Host wieder gibt.The Windows 8.1 app package serves as the host for a quiz game session, while the Windows Phone 8.1 app package plays the role of the client to the host. Die beiden Hälften der Quizspielsitzung kommunizieren per Peer-zu-Peer-Netzwerkverbindung.The two halves of the quiz game session communicate via peer-to-peer networking.

Die individuelle Anpassung der beiden Hälften für PC bzw. Telefone ist sinnvoll.Tailoring the two halves to PC, and phone, respectively makes good sense. Aber wäre es nicht sogar noch besser, wenn Sie sowohl den Host als auch den Client auf nahezu jedem beliebigen Gerät ausführen könnten?But, wouldn't it be even better if you could run both the host and the client on just about any device of your choosing? In dieser Fallstudie portieren wir beide apps auf Windows 10, wo Sie jeweils in einem einzelnen App-Paket erstellt werden, das Benutzer auf einer Vielzahl von Geräten installieren können.In this case study, we'll port both apps to Windows 10 where they will each build into a single app package that users can install onto a wide range of devices.

Für die App werden Muster verwendet, bei denen Ansichten und Ansichtsmodelle genutzt werden.The app uses patterns that make use of views and view models. Sie werden sehen, dass der Portiervorgang für diese App aufgrund dieser klaren Trennung sehr einfach ist.As a result of this clean separation, the porting process for this app is very straightforward, as you'll see.

Beachten Sie  in diesem Beispiel wird davon ausgegangen, dass Ihr Netzwerk für das Senden und empfangen von benutzerdefinierten Multicast Paketen für UDP-Gruppen konfiguriert ist (die meisten Heimnetzwerke sind, auch wenn Ihr Arbeitsnetzwerk möglicherweise nichtNote  This sample assumes your network is configured to send and receive custom UDP group multicast packets (most home networks are, although your work network may not be). Im Beispiel werden auch TCP-Pakete gesendet und empfangen.The sample also sends and receives TCP packets.

 

Beachten Sie   Wenn Sie QuizGame10 in Visual Studio öffnen, wenn die Meldung "Visual Studio-Update erforderlich" angezeigt wird, führen Sie die Schritte in " targetplatformversion" aus.Note   When opening QuizGame10 in Visual Studio, if you see the message "Visual Studio update required", then follow the steps in TargetPlatformVersion.

 

DownloadsDownloads

Laden Sie die universelle 8.1-App „QuizGame“ herunter.Download the QuizGame Universal 8.1 app. Dies ist der ursprünglichen Zustand der App vor dem Portieren.This is the initial state of the app prior to porting.

Laden Sie die QuizGame10 Windows 10-APP herunter.Download the QuizGame10 Windows 10 app. Dies ist der Zustand der App direkt nach dem Portieren.This is the state of the app just after porting.

Die aktuelle Version dieses Beispiels finden Sie auf GitHub.See the latest version of this sample on GitHub.

WinRT 8.1-ProjektmappeThe WinRT 8.1 solution

So sieht QuizGame aus. Dies ist die App, die wir portieren werden.Here’s what QuizGame—the app that we're going to port—looks like.

QuizGame-Host-App – Ausführung unter Windows

QuizGame-Host-App – Ausführung unter WindowsThe QuizGame host app running on Windows

QuizGame-Client-App – Ausführung unter Windows Phone

QuizGame-Client-App – Ausführung unter Windows PhoneThe QuizGame client app running on Windows Phone

Exemplarische Vorgehensweise für die Nutzung von QuizGameA walkthrough of QuizGame in use

Dies ist eine kurze hypothetische Beschreibung der App-Nutzung. Sie enthält aber nützliche Informationen, falls Sie die App selbst per WLAN ausprobieren möchten.This is a short hypothetical account of the app in use, but it provides useful info should you want to try out the app for yourself over your wireless network.

In einer Bar wird ein lustiges Quizspiel veranstaltet.A fun quiz game is taking place in a bar. Es gibt in der Bar einen großen Fernseher, der für alle Gäste sichtbar ist.There's a big TV in the bar that everyone can see. Der Quizmaster nutzt einen PC, dessen Ausgabe auf dem Fernseher zu sehen ist.The quizmaster has a PC whose output is being shown on the TV. Auf diesem PC wird die „Host-App“ ausgeführt.That PC has "the host app" running on it. Alle Personen, die am Quiz teilnehmen möchten, müssen lediglich die „Client-App“ auf Ihrem Telefon oder Surface-Gerät installieren.Anyone who wants to take part in the quiz just needs to install "the client app" on their phone or Surface.

Die Host-App befindet sich im Lobbymodus, und auf dem großen Fernseher wird angezeigt, dass sie bereit für die Verbindung mit Client-App ist.The host app is in lobby mode, and on the big TV, it's advertising that it's ready for client apps to connect. Joan startet die Client-App auf ihrem Mobilgerät.Joan launches the client app on her mobile device. Sie gibt ihren Namen in das Textfeld Spielername ein und tippt dann auf Spiel beitreten.She types her name into the Player name text box and taps Join game. Die Host-App bestätigt, dass Joan beigetreten ist. Ihr Name wird angezeigt, und in der Client-App von Joan wird angegeben, dass auf den Beginn des Spiels gewartet wird.The host app acknowledges that Joan has joined by displaying her name, and Joan’s client app indicates that it's waiting for the game to begin. Als Nächstes führt Maxwell auf seinem mobilen Gerät die gleichen Schritte aus.Next, Maxwell goes through those same steps on his mobile device.

Der Quizmaster klickt auf Spiel starten, und in der Host-App werden eine Frage und die möglichen Antworten angezeigt (sowie eine Liste mit den verbundenen Spielern in normaler Schriftbreite und grauer Farbe).The quizmaster clicks Start game and the host app shows a question and the possible answers (it also shows a list of the joined players in normal fontweight, colored gray). Gleichzeitig werden die Antworten auf den Clientgeräten als Schaltflächen angezeigt.Simultaneously, the answers appear displayed on buttons on joined client devices. Joan tippt auf die Schaltfläche mit der Antwort „1975“. Daraufhin werden alle Schaltflächen deaktiviert.Joan taps the button with the answer "1975" on it whereupon all her buttons become disabled. In der Host-App wird Joans Name grün (und fett) angezeigt, um zu bestätigen, dass ihre Antwort eingegangen ist.On the host app, Joan’s name is painted green (and becomes bold) in acknowledgment of the receipt of her answer. Maxwell antwortet ebenfalls.Maxwell answers, also. Der Quizmaster sieht, dass die Namen aller Spieler grün sind, und klickt auf Nächste Frage.The quizmaster, noting that all players' names are green, clicks Next question.

Nach diesem Muster werden weitere Fragen gestellt und beantwortet.Questions continue to be asked and answered in this same cycle. Nachdem die letzte Frage in der Host-App angezeigt wurde, lautet der Text der Schaltfläche nicht mehr Nächste Frage, sondern Ergebnisse anzeigen.When the last question is being shown on the host app, Show results is the content of the button, and not Next question. Nach dem Klicken auf Ergebnisse anzeigen werden die Ergebnisse angezeigt.When Show results is clicked, the results are shown. Wenn auf Zurück zur Lobby geklickt wird, beginnt der Spielzyklus von vorne. Spieler, die bereits beigetreten sind, sind jetzt aber schon angegeben.Clicking Return to lobby returns to the beginning of the game lifecycle with the exception that joined players remain joined. Nach dem Zurücksetzen auf den Lobbymodus können neue Spieler beitreten. Dies ist ein guter Zeitpunkt für Spieler, das Spiel zu verlassen (obwohl dies jederzeit durch Tippen auf Spiel verlassen möglich ist).But, going back to the lobby gives new players a chance to join, and even a convenient time for joined players to leave (although a joined player can leave at any time by tapping Leave game).

Lokaler TestmodusLocal test mode

Wenn Sie die App und ihre Interaktionen auf einem einzelnen PC ausprobieren möchten, anstatt verteilt über mehrere Geräte, können Sie die Host-App im lokalen Testmodus erstellen.To try out the app and its interactions on a single PC instead of distributed across devices, you can build the host app in local test mode. In diesem Modus entfällt die Nutzung der Netzwerkverbindung vollständig.This mode completely bypasses use of the network. Stattdessen zeigt die Benutzeroberfläche der Host-App den Hostteil links im Fenster an, und auf der rechten Seite sind zwei Kopien der Client-App-UI vertikal übereinander zu sehen (beachten Sie, dass in dieser Version die UI des lokalen Testmodus für eine PC-Anzeige festgelegt ist, sie passt sich nicht an kleine Geräte an).Instead, the UI of the host app displays the host portion to the left of the window and, to the right, two copies of the client app UI stacked vertically (note that, in this version, the local test mode UI is fixed for a PC display; it does not adapt to small devices). Diese UI-Segmente, die alle Teil derselben App sind, kommunizieren untereinander über einen so genannten Client Communicator. Damit werden die Interaktionen simuliert, die sonst über das Netzwerk erfolgen würden.These segments of UI, all in the same app, communicate with one another via a mock client communicator, which simulates the interactions that would otherwise take place over the network.

Legen Sie zum Aktivieren des lokalen Testmodus den Eintrag LOCALTESTMODEON (in den Projekteigenschaften) als Symbol für die bedingte Kompilierung fest, und führen Sie eine Neuerstellung durch.To activate local test mode, define LOCALTESTMODEON (in project properties) as a conditional compilation symbol, and rebuild.

Portieren auf ein Windows 10-ProjektPorting to a Windows 10 project

QuizGame verfügt über die folgenden Bestandteile:QuizGame has the following pieces.

  • P2PHelperP2PHelper. Dies ist eine portable Klassenbibliothek, in der die Peer-zu-Peer-Netzwerklogik enthalten ist.This is a portable class library that contains the peer-to-peer networking logic.
  • QuizGame.WindowsQuizGame.Windows. Dies ist das Projekt, mit dem das App-Paket für die Host-App erstellt wird, die Windows 8.1 als Ziel hat.This is the project that builds the app package for the host app, which targets Windows 8.1.
  • QuizGame.WindowsPhoneQuizGame.WindowsPhone. Dies ist das Projekt, mit dem das App-Paket für die Client-App für Windows Phone 8.1 erstellt wird.This is the project that builds the app package for the client app, which targets Windows Phone 8.1.
  • QuizGame.SharedQuizGame.Shared. Dies ist das Projekt, das den Quellcode, die Markupdateien und andere Assets und Ressourcen enthält, die von den beiden anderen Projekten verwendet werden.This is the project that contains source code, markup files, and other assets and resources, that are used by both of the other two projects.

Für diese Fallstudie verwenden wir die üblichen Optionen, die unter Bei einer Universal 8.1-App in Bezug auf die zu unterstützenden Geräte beschrieben sind.For this case study, we have the usual options described in If you have a Universal 8.1 app with respect to what devices to support.

Basierend auf diesen Optionen wird "Quiz Game. Windows" in ein neues Windows 10-Projekt mit dem Namen "quizgamehost" portieren.Based on those options, we'll port QuizGame.Windows to a new Windows 10 project called QuizGameHost. Und wir portieren "Quiz Game. windowsphone" in ein neues Windows 10-Projekt mit dem Namen "quizgameclient".And, we'll port QuizGame.WindowsPhone to a new Windows 10 project called QuizGameClient. Diese Projekte sind für die universelle Gerätefamilie bestimmt, damit sie auf jedem Gerät ausgeführt werden können.These projects will target the universal device family, so they will run on any device. Wir belassen die QuizGame.Shared-Quelldateien usw. in ihrem eigenen Ordner und verknüpfen diese freigegebenen Dateien mit den beiden neuen Projekten.And, we'll keep the QuizGame.Shared source files, etc, in their own folder, and we'll link those shared files into the two new projects. Wir verwenden wieder eine einzelne Projektmappe und nennen sie QuizGame10.Just like before, we'll keep everything in one solution and we'll name it QuizGame10.

Die QuizGame10-LösungThe QuizGame10 solution

  • Erstellen Sie eine neue Projekt Mappe (Neues Projekt > andere Projekttypen > Visual Studio-Projektmappen), und nennen Sie Sie QuizGame10.Create a new solution (New Project > Other Project Types > Visual Studio Solutions) and name it QuizGame10.

P2PHelperP2PHelper

  • Erstellen Sie in der Projekt Mappe ein neues Windows 10-Klassen Bibliotheksprojekt (Neues Projekt > Windows Universal >- Klassenbibliothek (universelle Windows-Klassenbibliothek) , und nennen Sie es P2PHelper.In the solution, create a new Windows 10 class library project (New Project > Windows Universal > Class Library (Windows Universal)) and name it P2PHelper.
  • Löschen Sie „Class1.cs“ aus dem neuen Projekt.Delete Class1.cs from the new project.
  • 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.Copy P2PSession.cs, P2PSessionClient.cs, and P2PSessionHost.cs into the new project's folder and include the copied files in the new project.
  • Das Projekt kann dann ohne weitere Änderungen erstellt werden.The project will build without needing further changes.

Freigegebene DateienShared files

  • Kopieren Sie die Ordner "Common", "Model", "View" und "ViewModel" aus \quizgame. Shared\ in \QuizGame10-\.Copy the folders Common, Model, View, and ViewModel from \QuizGame.Shared\ to \QuizGame10\.
  • „Common“, „Model“, „View“ und „ViewModel“ sind die Ordner, die gemeint sind, wenn es um die freigegebenen Ordner auf dem Datenträger geht.Common, Model, View, and ViewModel are what we'll mean when we refer to the shared folders on disk.

QuizgamehostQuizGameHost

  • Erstellen Sie ein neues Windows 10-App-Projekt (fügen Sie > Neues Projekt > Windows Universal > leere Anwendung (universelle Windows-Anwendung) hinzu , und nennen Sie es Quiz Host.Create a new Windows 10 app project (Add > New Project > Windows Universal > Blank Application (Windows Universal)) and name it QuizGameHost.
  • Fügen Sie einen Verweis auf P2PHelper hinzu (Verweis > Projekte Hinzufügen > Lösung > P2PHelper).Add a reference to P2PHelper (Add Reference > Projects > Solution > P2PHelper).
  • Erstellen Sie im Projektmappen-Explorer für jeden freigegebenen Ordner auf dem Datenträger einen neuen Ordner.In Solution Explorer, create a new folder for each of the shared folders on disk. Klicken Sie mit der rechten Maustaste auf jeden Ordner, den Sie gerade erstellt haben, und klicken Sie auf > Vorhandenes Element Hinzufügen und dann auf einen OrdnerIn turn, right-click each folder you just created and click Add > Existing Item and navigate up a folder. Öffnen Sie den entsprechenden freigegebenen Ordner, wählen Sie alle Dateien aus, und klicken Sie anschließend auf Link hinzufügen.Open the appropriate shared folder, select all files, and then click Add As Link.
  • Kopieren Sie die Datei "MainPage. XAML" aus \"Quiz Game. Windows"-\ in \"quizgamehost"-\ und ändern Sie den Namespace in "QuizCopy MainPage.xaml from \QuizGame.Windows\ to \QuizGameHost\ and change the namespace to QuizGameHost.
  • Kopieren Sie die Datei "App. XAML" aus \"Quiz Game. Shared"-\ in \"quizgamehost"-\, und ändern Sie den Namespace in "Copy App.xaml from \QuizGame.Shared\ to \QuizGameHost\ and change the namespace to 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.Instead of overwriting app.xaml.cs, we'll keep the version in the new project and just make one targeted change to it to support local test mode. Ersetzen Sie in „app.xaml.cs“ die folgende Codezeile:In app.xaml.cs, replace this line of code:
rootFrame.Navigate(typeof(MainPage), e.Arguments);

durch diese Codezeile:with this:

#if LOCALTESTMODEON
    rootFrame.Navigate(typeof(TestView), e.Arguments);
#else
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
#endif
  • Fügen Sie in den Eigenschaften > > bedingte Kompilierungs Symbole Erstellen die Zeichen localtestmudeon hinzu.In Properties > Build > conditional compilation symbols, add LOCALTESTMODEON.
  • Jetzt können Sie wieder auf den Code zurückgreifen, den Sie der Datei „app.xaml.cs“ hinzugefügt haben, und den TestView-Typ auflösen.You'll now be able to go back to the code you added to app.xaml.cs and resolve the TestView type.
  • Ändern Sie in „package.appxmanifest“ den capability-Namen von „internetClient“ in „internetClientServer“.In package.appxmanifest, change the capability name from internetClient to internetClientServer.

Quiz ClientQuizGameClient

  • Erstellen Sie ein neues Windows 10-App-Projekt (fügen Sie > Neues Projekt > Windows Universal > leere Anwendung (universelle Windows-Anwendung) hinzu , und nennen Sie es quizgameclient.Create a new Windows 10 app project (Add > New Project > Windows Universal > Blank Application (Windows Universal)) and name it QuizGameClient.
  • Fügen Sie einen Verweis auf P2PHelper hinzu (Verweis > Projekte Hinzufügen > Lösung > P2PHelper).Add a reference to P2PHelper (Add Reference > Projects > Solution > P2PHelper).
  • Erstellen Sie im Projektmappen-Explorer für jeden freigegebenen Ordner auf dem Datenträger einen neuen Ordner.In Solution Explorer, create a new folder for each of the shared folders on disk. Klicken Sie mit der rechten Maustaste auf jeden Ordner, den Sie gerade erstellt haben, und klicken Sie auf > Vorhandenes Element Hinzufügen und dann auf einen OrdnerIn turn, right-click each folder you just created and click Add > Existing Item and navigate up a folder. Öffnen Sie den entsprechenden freigegebenen Ordner, wählen Sie alle Dateien aus, und klicken Sie anschließend auf Link hinzufügen.Open the appropriate shared folder, select all files, and then click Add As Link.
  • Kopieren Sie die Datei "MainPage. XAML" aus \Quiz Game. windowsphone\ in \Quiz Client-\ und ändern Sie den Namespace in "quizgameclient".Copy MainPage.xaml from \QuizGame.WindowsPhone\ to \QuizGameClient\ and change the namespace to QuizGameClient.
  • Kopieren Sie die Datei "App. XAML" aus \"Quiz Game. Shared"-\ in \"Quiz Client"-\ und ändern Sie den Namespace in "quizgameclientCopy App.xaml from \QuizGame.Shared\ to \QuizGameClient\ and change the namespace to QuizGameClient.
  • Ändern Sie in „package.appxmanifest“ den capability-Namen von „internetClient“ in „internetClientServer“.In package.appxmanifest, change the capability name from internetClient to internetClientServer.

Nun können Sie die Erstellung durchführen und die App ausführen.You'll now be able to build and run.

Adaptive UIAdaptive UI

Die quizgamehost Windows 10-App sieht problemlos aus, wenn die app in einem breiten Fenster ausgeführt wird (Dies ist nur auf einem Gerät mit einem großen Bildschirm möglich).The QuizGameHost Windows 10 app looks fine when the app is running in a wide window (which is only possible on a device with a large screen). Aber wenn das Fenster der App schmal ist (auf kleinen und großen Geräten möglich), wird die UI so gestaucht, dass die Lesbarkeit nicht mehr gewährleistet ist.When the app's window is narrow, though (which happens on a small device, and can also happen on a large device), the UI is squashed so much that it's unreadable.

Wir können das adaptive Visual State-Manager-Feature nutzen, um dies zu beheben. Dies ist unter Fallstudie: Bookstore2 beschrieben.We can use the adaptive Visual State Manager feature to remedy this, as we explained in Case study: Bookstore2. Zuerst legen wir die Eigenschaften für visuelle Elemente so fest, dass für die UI standardmäßig das schmale Layout gewählt wird.First, set properties on visual elements so that, by default, the UI is laid out in the narrow state. Alle diese Änderungen erfolgen in \Ansicht\Hostview. XAML.All of these changes take place in \View\HostView.xaml.

  • Ändern Sie im Grid-Hauptelement den Height-Wert des RowDefinition-Elements von „140“ in „Auto“.In the main Grid, change the Height of the first RowDefinition from "140" to "Auto".
  • Legen Sie im Grid-Element, in dem das TextBlock-Element mit dem Namen pageTitle enthalten ist, x:Name="pageTitleGrid" und Height="60" fest.On the Grid that contains the TextBlock named pageTitle, set x:Name="pageTitleGrid" and Height="60". Diese ersten beiden Schritte dienen dazu, dass wir die Höhe des RowDefinition-Elements über einen Setter in einem visuellen Zustand effektiv steuern können.These first two steps are so that we can effectively control the height of that RowDefinition via a setter in a visual state.
  • Geben Sie unter pageTitle den Code Margin="-30,0,0,0" an.On pageTitle, set Margin="-30,0,0,0".
  • Legen Sie für das Grid-Element, das mit dem Kommentar <!-- Content --> angegeben wird, x:Name="contentGrid" und Margin="-18,12,0,0" fest.On the Grid indicated by the comment <!-- Content -->, set x:Name="contentGrid" and Margin="-18,12,0,0".
  • Geben Sie für das TextBlock-Element direkt oberhalb des Kommentars <!-- Options --> den Code Margin="0,0,0,24" an.On the TextBlock immediately above the comment <!-- Options -->, set Margin="0,0,0,24".
  • Ändern Sie im standardmäßigen TextBlock-Stil (erste Ressource in der Datei) den Wert des FontSize-Setters in „15“.In the default TextBlock style (the first resource in the file), change the FontSize setter's value to "15".
  • Ändern Sie unter OptionContentControlStyle den Wert des FontSize-Setters in „20“.In OptionContentControlStyle, change the FontSize setter's value to "20". Durch diesen und den vorherigen Schritt erhalten wir eine gute Typhierarchie, die auf allen Geräten einwandfrei funktioniert.This step and the previous one will give us a good type ramp that will work well on all devices. Diese Größen sind viel flexibler als die "30", die wir für die Windows 8.1-App verwendet haben.These are much more flexible sizes than the "30" we were using for the Windows 8.1 app.
  • Fügen Sie dem Grid-Stammelement schließlich den geeigneten Visual State-Manager-Markupcode hinzu.Finally, add the appropriate Visual State Manager markup to the root Grid.
<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 FormatierungUniversal styling

Sie werden feststellen, dass die Schaltflächen in Windows 10 nicht die gleiche Auffüll Ziel-Auffüll Option in ihrer Vorlage haben.You'll notice that in Windows 10, the buttons don't have the same touch-target padding in their template. Dies lässt sich mit zwei kleinen Änderungen beheben.Two small changes will remedy that. Fügen Sie diesen Markupcode zuerst in QuizGameHost und QuizGameClient jeweils der Datei „app.xaml“ hinzu.First, add this markup to app.xaml in both QuizGameHost and QuizGameClient.

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

Und zweitens fügen Sie diesen Setter OptionButtonStyle in \Ansicht\clientview. XAML hinzu.And second, add this setter to OptionButtonStyle in \View\ClientView.xaml.

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

Dank dieser letzten Optimierung verhält sich die App genauso wie vor dem Portieren und sieht auch genauso aus. Der entscheidende Vorteil ist aber, dass sie jetzt auf allen Geräten ausgeführt werden kann.With that last tweak, the app will behave and look just the same as it did before the port, with the additional value that it will now run everywhere.

FazitConclusion

Die App, die wir im Rahmen dieser Fallstudie portiert haben, war eine relativ komplexe App mit mehrere Projekten, einer Klassenbibliothek und einer größeren Menge an Code und UI-Elementen.The app that we ported in this case study was a relatively complex one involving several projects, a class library, and quite a large amount of code and user interface. Trotzdem war der Portiervorgang einfach.Even so, the port was straightforward. 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.Some of the ease of porting is directly attributable to the similarity between the Windows 10 developer platform and the Windows 8.1 and Windows Phone 8.1 platforms. Ein anderer Grund ist der Entwurf der ursprünglichen App, bei dem darauf geachtet wurde, dass die Modelle, Ansichtsmodelle und Ansichten separat gehalten wurden.Some is due to the way the original app was designed to keep the models, the view models, and the views separate.