Windows-Runtime 8.x zu UWP-Fallstudie: Bookstore1

In diesem Thema wird eine Fallstudie zum Portieren einer sehr einfachen universellen 8.1-App zu einer Windows 10-Universelle Windows-Plattform-App (UWP) erläutert. Eine universelle 8.1-App ist eine App, die ein App-Paket für Windows 8.1 und ein anderes App-Paket für Windows Phone 8.1 erstellt. Mit Windows 10 können Sie ein einzelnes App-Paket erstellen, das Ihre Kunden auf einer vielzahl von Geräten installieren können, und das tun wir in dieser Fallstudie. Siehe Leitfaden für UWP-Apps.

Die App, die wir portieren, besteht aus einem ListBox-Objekt , das an ein Ansichtsmodell gebunden ist. Das Ansichtsmodell enthält eine Liste von Büchern, die Titel, Autor und Bucheinband anzeigen. Die Bucheinbandbilder haben build action set to Content and Copy to Output Directory set to Do not copy.the book cover images have Build Action set to Content and Copy to Output Directory set to Do not copy.

In den vorherigen Themen in diesem Abschnitt werden die Unterschiede zwischen den Plattformen beschrieben, und sie enthalten Details und Anleitungen zum Portierungsprozess für verschiedene Aspekte einer App von XAML-Markup über die Bindung an ein Ansichtsmodell bis hin zum Zugriff auf Daten. Eine Fallstudie zielt darauf ab, diese Anleitung zu ergänzen, indem sie in einem echten Beispiel gezeigt wird. In den Fallstudien wird davon ausgegangen, dass Sie die Anleitung gelesen haben, die sie nicht wiederholen.

Hinweis: Wenn beim Öffnen von Bookstore1Universal_10 in Visual Studio die Meldung "Visual Studio-Update erforderlich" angezeigt wird, führen Sie die Schritte in TargetPlatformVersion aus.

Downloads

Laden Sie die Bookstore1_81 Universelle 8.1-App herunter.

Laden Sie die Bookstore1Universal_10 Windows 10-App herunter.

Die universelle 8.1-App

So sieht Bookstore1_81 – die App, die wir portieren werden – aus. Es ist nur ein listenfeld mit vertikalem Bildlauf unter der Überschrift des App-Namens und des Seitentitels.

Bookstore1_81 unter Windows

Bookstore1_81 unter Windows Phone

Portieren zu einem Windows 10-Projekt

Die Bookstore1_81-Lösung ist ein universelles 8.1-App-Projekt und enthält diese Projekte.

• Bookstore1_81.Windows. Dies ist das Projekt, das das App-Paket für Windows 8.1 erstellt.
• Bookstore1_81.WindowsPhone. Dies ist das Projekt, das das App-Paket für Windows Phone 8.1 erstellt.
• Bookstore1_81.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. Die Entscheidung hier ist eine einfache: Diese App verfügt über die gleichen Features, und zwar hauptsächlich mit demselben Code, sowohl in windows 8.1- als auch in Windows Phone 8.1-Formularen. Daher portieren wir den Inhalt des freigegebenen Projekts (und alles andere, was wir von den anderen Projekten benötigen) zu einer Windows 10, die auf die universelle Gerätefamilie ausgerichtet ist (eine, die Sie auf der breitesten Palette von Geräten installieren können).

Es ist eine sehr schnelle Aufgabe, ein neues Projekt in Visual Studio zu erstellen, Dateien aus Bookstore1_81 darauf zu kopieren und die kopierten Dateien in das neue Projekt einzuschließen. Erstellen Sie zunächst ein neues Projekt für leere Anwendungen (Universelle Windows-Anwendung). Nennen Sie ihn Bookstore1Universal_10. Dies sind die Dateien, die von Bookstore1_81 in Bookstore1Universal_10 kopiert werden sollen.

Aus dem freigegebenen Projekt

• Kopieren Sie den Ordner mit den PNG-Dateien für das Bucheinbandbild (der Ordner lautet \Assets\CoverImages). Stellen Sie nach dem Kopieren des Ordners in Projektmappen-Explorer sicher, dass "Alle Dateien anzeigen" aktiviert ist. Klicken Sie mit der rechten Maustaste auf den Ordner, den Sie kopiert haben, und klicken Sie auf "In Project einschließen". Dieser Befehl bedeutet, dass wir Dateien oder Ordner in einem Projekt "einschließen". Jedes Mal, wenn Sie eine Datei oder einen Ordner kopieren, klicken Sie auf "Aktualisieren" in Projektmappen-Explorer und fügen Sie dann die Datei oder den Ordner in das Projekt ein. Dies ist für Dateien, die Sie im Ziel ersetzen, nicht erforderlich.
• Kopieren Sie den Ordner, der die Quelldatei des Ansichtsmodells enthält (der Ordner ist \ViewModel).
• Kopieren Sie "MainPage.xaml", und ersetzen Sie die Datei im Ziel.

Aus dem Windows-Projekt

• Kopieren Sie "BookstoreStyles.xaml". Wir verwenden diesen als guten Ausgangspunkt, da alle Ressourcenschlüssel in dieser Datei in einer Windows 10-App aufgelöst werden. einige dieser Dateien in der entsprechenden WindowsPhone-Datei werden nicht angezeigt.

Bearbeiten Sie den Quellcode und die Markupdateien, die Sie soeben kopiert haben, und ändern Sie alle Verweise auf den Bookstore1_81-Namespace in Bookstore1Universal_10. Eine schnelle Möglichkeit besteht darin, das Feature "In Dateien ersetzen" zu verwenden. Es sind keine Codeänderungen im Ansichtsmodell oder in einem anderen imperativen Code erforderlich. Um jedoch einfacher zu erkennen, welche Version der App ausgeführt wird, ändern Sie den von der eigenschaft Bookstore1Universal_10.BookstoreViewModel.AppName zurückgegebenen Wert von "BOOKSTORE1_81" in "BOOKSTORE1UNIVERSAL_10".

Jetzt können Sie erstellen und ausführen. So sieht unsere neue UWP-App aus, nachdem sie noch keine explizite Arbeit zum Portieren zu Windows 10 ausgeführt hat.

Die Windows 10-App mit Änderungen am ursprünglichen Quellcode auf einem Desktopgerät

Die Windows 10-App mit Änderungen am ursprünglichen Quellcode auf einem mobilen Gerät

Die Ansicht und das Ansichtsmodell arbeiten ordnungsgemäß zusammen, und das ListBox-Steuerelement funktioniert. Wir müssen nur die Formatierung korrigieren. Auf einem mobilen Gerät können wir im hellen Design den Rahmen des Listenfelds sehen, aber das ist einfach auszublenden. Und die Typografie ist zu groß, sodass wir die verwendeten Formatvorlagen ändern. Außerdem sollte die App bei der Ausführung auf einem Desktopgerät hell sein, wenn sie wie der Standard aussehen soll. Das ändern wir also.

Universelle Formatierung

Die Bookstore1_81-App hat zwei verschiedene Ressourcenwörterbücher (BookstoreStyles.xaml) verwendet, um ihre Stile auf die Betriebssysteme Windows 8.1 und Windows Phone 8.1 anzupassen. Keine dieser beiden BookstoreStyles.xaml-Dateien enthält genau die Stile, die wir für unsere Windows 10-App benötigen. Aber die gute Nachricht ist, dass das, was wir wollen, tatsächlich viel einfacher ist als eines der beiden. Daher werden die nächsten Schritte hauptsächlich das Entfernen und Vereinfachen unserer Projektdateien und des Markups umfassen. Die Schritte sind unten aufgeführt. Und Sie können die Links oben in diesem Thema verwenden, um die Projekte herunterzuladen und die Ergebnisse aller Änderungen zwischen hier und am Ende der Fallstudie anzuzeigen.

• Um den Abstand zwischen Elementen zu straffen, suchen Sie die BookTemplate Datenvorlage in "MainPage.xaml", und löschen Sie den Margin="0,0,0,8" Abstand aus dem Stammraster.
• Außerdem gibt es in BookTemplate, gibt es Verweise auf BookTemplateTitleTextBlockStyle und BookTemplateAuthorTextBlockStyle. Bookstore1_81 diese Schlüssel als Dereferenzierung verwendet, sodass ein einzelner Schlüssel unterschiedliche Implementierungen in den beiden Apps hatte. Wir brauchen diese Dereferenzierung nicht mehr; wir können einfach direkt auf Systemstile verweisen. Ersetzen Sie diese Verweise also durch TitleTextBlockStyle bzw SubtitleTextBlockStyle. durch.
• Jetzt müssen wir "Hintergrund" auf den richtigen Standardwert festlegen LayoutRoot, damit die App bei der Ausführung auf allen Geräten unabhängig vom Design angemessen aussieht. Ändern Sie sie von "Transparent" zu "{ThemeResource ApplicationPageBackgroundThemeBrush}".
• TitlePanelÄndern Sie in , ändern Sie den Verweis auf TitleTextBlockStyle (was jetzt ein wenig zu groß ist) in einen Verweis auf CaptionTextBlockStyle. PageTitleTextBlockStyle ist eine weitere Bookstore1_81 Dereferenzierung, die wir nicht mehr benötigen. Ändern Sie dies stattdessen, um auf den Verweis zu verweisen HeaderTextBlockStyle .
• Wir müssen keine speziellen Hintergrund-, Stil- oder ItemContainerStyle-Elemente mehr im ListBox-Steuerelement festlegen. Löschen Sie also einfach diese drei Attribute und deren Werte aus dem Markup. Wir möchten jedoch den Rahmen des ListBox-Steuerelements ausblenden. Fügen Sie ihn also hinzu BorderBrush="{x:Null}" .
• Wir verweisen nicht mehr auf die Ressourcen in der Datei "BookstoreStyles.xaml ResourceDictionary ". Sie können alle diese Ressourcen löschen. Löschen Sie jedoch nicht die Datei "BookstoreStyles.xaml" selbst: Wir haben noch eine letzte Verwendung dafür, wie Sie im nächsten Abschnitt sehen.

Diese letzte Sequenz von Formatierungsvorgängen lässt die App wie folgt aussehen.

Die fast portierte Windows 10-App, die auf einem Desktopgerät ausgeführt wird

Die fast portierte Windows 10-App, die auf einem Mobilen Gerät ausgeführt wird

Optionale Anpassung des Listenfelds für mobile Geräte

Wenn die App auf einem mobilen Gerät ausgeführt wird, ist der Hintergrund eines Listenfelds standardmäßig in beiden Designs hell. Dies kann der von Ihnen bevorzugte Stil sein, und wenn ja, gibt es nichts mehr zu tun, außer aufzuräumen: Löschen Sie die Ressourcenwörterbuchdatei "BookstoreStyles.xaml" aus Ihrem Projekt, und entfernen Sie das Markup, mit dem es in "MainPage.xaml" zusammengeführt wird.

Steuerelemente sind jedoch so konzipiert, dass Sie ihr Aussehen anpassen können, während ihr Verhalten nicht beeinträchtigt wird. Wenn das Listenfeld also dunkel im dunklen Design sein soll – wie die ursprüngliche App aussieht – beschreibt dieser Abschnitt eine Möglichkeit, dies zu tun.

Die Änderung, die wir vornehmen, muss sich nur auf die App auswirken, wenn sie auf mobilen Geräten ausgeführt wird. Daher verwenden wir einen sehr leicht angepassten Listenfeldstil, wenn wir auf der Mobilgerätefamilie ausgeführt werden, und wir verwenden weiterhin den Standardstil, wenn wir überall sonst ausgeführt werden. Dazu erstellen wir eine Kopie von "BookstoreStyles.xaml", und wir geben ihm einen speziellen MRT-qualifizierten Namen, der dazu führt, dass es nur auf mobilen Geräten geladen wird.

Fügen Sie ein neues ResourceDictionary-Projektelement hinzu, und nennen Sie es "BookstoreStyles.DeviceFamily-Mobile.xaml". Sie haben jetzt zwei Dateien, deren logischer Name "BookstoreStyles.xaml" lautet (und das ist der Name, den Sie in Ihrem Markup und Code verwenden). Die Dateien weisen jedoch unterschiedliche physische Namen auf, sodass sie unterschiedliche Markups enthalten können. Sie können dieses MRT-qualifizierte Benennungsschema für jede XAML-Datei verwenden, beachten Sie jedoch, dass alle XAML-Dateien mit demselben logischen Namen eine einzelne xaml.cs CodeBehind-Datei (sofern zutreffend) gemeinsam verwenden.

Bearbeiten Sie eine Kopie der Steuerelementvorlage für das Listenfeld, und speichern Sie sie mit dem Schlüssel BookstoreListBoxStyle im neuen Ressourcenwörterbuch BookstoreStyles.DeviceFamily-Mobile.xaml. Jetzt nehmen wir einfache Änderungen an drei der Setter vor.

• Ändern Sie im Vordergrund-Setter den Wert in "{x:Null}". Beachten Sie, dass das Direkte Festlegen einer Eigenschaft "{x:Null}" für ein Element mit dem Festlegen null in Code identisch ist. Die Verwendung eines Werts "{x:Null}" in einem Setter hat jedoch einen eindeutigen Effekt: Er überschreibt den Setter im Standardstil (für dieselbe Eigenschaft) und stellt den Standardwert der Eigenschaft für das Zielelement wieder her.
• Ändern Sie im Setter "Hintergrund" den Wert, um "Transparent" diesen hellen Hintergrund zu entfernen.
• Suchen Sie im Vorlagensetter den visuellen Zustand namens und Focused löschen Sie das Storyboard, sodass er zu einem leeren Tag wird.
• Löschen Sie alle anderen Setter aus dem Markup.

Kopieren Sie BookstoreListBoxStyle schließlich in "BookstoreStyles.xaml", und löschen Sie die drei Setter, wodurch sie zu einem leeren Tag werden. Wir tun dies so, dass auf anderen Geräten als mobile Geräte unser Verweis auf BookstoreStyles.xaml aufgelöst BookstoreListBoxStyle wird, aber keine Auswirkungen hat.

Die portierte Windows 10-App, die auf einem Mobilen Gerät ausgeführt wird

Zusammenfassung

In dieser Fallstudie wurde gezeigt, wie eine sehr einfache App portiert wird – wohl eine unrealistisch einfache App. Beispielsweise kann ein Listenfeld für die Auswahl oder zum Einrichten eines Kontexts für die Navigation verwendet werden. die App navigiert zu einer Seite mit weiteren Details zum Element, auf das getippt wurde. Diese bestimmte App führt nichts mit der Auswahl des Benutzers durch und hat keine Navigation. Dennoch diente die Fallstudie dazu, das Eis zu brechen, den Portierungsprozess einzuführen und wichtige Techniken zu veranschaulichen, die Sie in echten UWP-Apps verwenden können.

Wir haben auch Beweise dafür gesehen, dass das Portieren von Ansichtsmodellen im Allgemeinen ein reibungsloser Prozess ist. Benutzeroberflächen und Formfaktorunterstützung sind Aspekte, die bei der Portierung eher unsere Aufmerksamkeit erfordern.

Die nächste Fallstudie ist Bookstore2, in der wir auf gruppierte Daten zugreifen und diese anzeigen.