Windows Runtime 8.x zu UWP – Fallstudie, Bookstore1Windows Runtime 8.x to UWP case study: Bookstore1

In diesem Thema wird eine Fallstudie zum Portieren einer sehr einfachen Universal 8,1-app in eine Windows 10 universelle Windows-Plattform-app (UWP) vorgestellt.This topic presents a case study of porting a very simple Universal 8.1 app to a Windows 10 Universal Windows Platform (UWP) app. Eine Universal 8,1-App erstellt 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 one app package for Windows 8.1, and a different app package for Windows Phone 8.1. Mit Windows 10 können Sie ein einzelnes App-Paket erstellen, das Ihre Kunden auf einer großen Bandbreite von Geräten installieren können, und das ist das, was wir in dieser Fallstudie tun werden.With Windows 10, you can create a single app package that your customers can install onto a wide range of devices, and that's what we'll do in this case study. Weitere Informationen finden Sie unter Anleitung für UWP-Apps.See Guide to UWP apps.

Die portierte App besteht aus einem ListBox-Element, das an ein Ansichtsmodell gebunden ist.The app we'll port consists of a ListBox bound to a view model. Das Ansichtsmodell verfügt über eine Liste mit Büchern, für die Titel, Autor und Bucheinband angezeigt werden.The view model has a list of books that shows title, author, and book cover. Für die Bucheinbandbilder ist Buildvorgang auf Inhalt und In Ausgabeverzeichnis kopieren auf Nicht kopieren festgelegt.The book cover images have Build Action set to Content and Copy to Output Directory set to Do not copy.

Die vorherigen Themen in diesem Abschnitt beschreiben die Unterschiede zwischen den Plattformen und bieten umfassende Informationen und Anleitungen zum Portierungsprozess für verschiedene Aspekte einer App, vom XAML-Markup über die Bindung an ein Ansichtsmodell bis hin zum Zugreifen auf Daten.The previous topics in this section describe the differences between the platforms, and they give details and guidance on the porting process for various aspects of an app from XAML markup, through binding to a view model, down to accessing data. Dieser Leitfaden soll anhand einer Fallstudie ergänzt werden, indem ein praktisches Beispiel vorgestellt wird.A case study aims to complement that guidance by showing it in action in a real example. Bei den Fallstudien wird davon ausgegangen, dass Sie die Anleitung gelesen haben. Sie wird nicht wiederholt.The case studies assume you've read the guidance, which they do not repeat.

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

DownloadsDownloads

Laden Sie die app "Bookstore1_81 Universal 8,1" herunter.Download the Bookstore1_81 Universal 8.1 app.

Laden Sie die Bookstore1Universal_10 Windows 10-APP herunter.Download the Bookstore1Universal_10 Windows 10 app.

Die universelle 8.1-AppThe Universal 8.1 app

Im folgenden sehen Sie, was Bookstore1_81 – die APP, die wir portieren werden – sieht wie folgt aus:.Here’s what Bookstore1_81—the app that we're going to port—looks like. Es handelt sich dabei einfach um ein Listenfeld mit Büchern mit vertikalem Bildlauf unter der Überschrift des App-Namens und dem Seitentitel.It's just a vertically-scrolling list box of books beneath the heading of the app's name and page title.

So sieht bookstore1-81 unter Windows aus

Bookstore1_81 unter WindowsBookstore1_81 on Windows

So sieht bookstore1-81 unter Windows Phone aus

Bookstore1_81 Windows PhoneBookstore1_81 on Windows Phone

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

Die Lösung Bookstore1_81 ist 8,1 ein universelles Universal-App-Projekt, das diese Projekte enthält.The Bookstore1_81 solution is an 8.1 Universal App project, and it contains these projects.

  • Bookstore1_81. Windows.Bookstore1_81.Windows. Dies ist das Projekt, mit dem das App-Paket für Windows 8.1 erstellt wird.This is the project that builds the app package for Windows 8.1.
  • Bookstore1_81. windowsphone.Bookstore1_81.WindowsPhone. Dies ist das Projekt, das das App-Paket für Windows Phone 8.1 erstellt.This is the project that builds the app package for Windows Phone 8.1.
  • Bookstore1_81. shared.Bookstore1_81.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. Die Entscheidung hier ist ein einfaches Beispiel: diese APP verfügt über dieselben Features und hat größtenteils denselben Code, sowohl in der Windows 8.1 als auch in Windows Phone 8,1-Formularen.The decision here is a simple one: this app has the same features, and does so mostly with the same code, in both its Windows 8.1 and Windows Phone 8.1 forms. Wir portieren also den Inhalt des freigegebenen Projekts (und alles, was wir aus den anderen Projekten benötigen) auf ein Windows 10-Gerät, das die universelle Gerätefamilie als Ziel hat (eine, die Sie auf den verschiedensten Geräten installieren können).So, we'll port the contents of the Shared project (and anything else we need from the other projects) to a Windows 10 that targets the Universal device family (one that you can install onto the widest range of devices).

Es ist eine sehr schnelle Aufgabe, ein neues Projekt in Visual Studio zu erstellen, Dateien aus Bookstore1_81 zu kopieren und die kopierten Dateien in das neue Projekt einzubeziehen.It's a very quick task to create a new project in Visual Studio, copy files over to it from Bookstore1_81, and include the copied files in the new project. Erstellen Sie zunächst ein neues Projekt vom Typ „Leere Anwendung“ (Windows Universal).Start by creating a new Blank Application (Windows Universal) project. Nennen Sie Sie Bookstore1Universal_10.Name it Bookstore1Universal_10. Dabei handelt es sich um die Dateien, die von Bookstore1_81 nach Bookstore1Universal_10 kopiert werden müssen.These are the files to copy over from Bookstore1_81 to Bookstore1Universal_10.

Aus dem freigegebenen ProjektFrom the Shared project

  • Kopieren Sie den Ordner, der das Buch enthält, das das Buch enthält, das das Buch enthält (der Ordner ist \\coverimages).Copy the folder containing the book cover image PNG files (the folder is \Assets\CoverImages). Vergewissern Sie sich nach dem Kopieren des Ordners im Projektmappen-Explorer, dass Alle Dateien anzeigen aktiviert ist.After copying the folder, in Solution Explorer, make sure Show All Files is toggled on. Klicken Sie mit der rechten Maustaste auf den kopierten Ordner, und klicken Sie dann auf Zu Projekt hinzufügen.Right-click the folder that you copied and click Include In Project. Mit „Einschließen“ von Dateien oder Ordnern in einem Projekt meinen wir diesen Befehl.That command is what we mean by "including" files or folders in a project. Klicken Sie jedes Mal, wenn Sie eine Datei oder einen Ordner kopieren, für jede Kopie im Projektmappen-Explorer auf Aktualisieren, und schließen Sie dann die Datei oder den Ordner in das Projekt ein.Each time you copy a file or folder, each copy, click Refresh in Solution Explorer and then include the file or folder in the project. Dies ist nicht für Dateien erforderlich, die Sie am Ziel ersetzen.There's no need to do this for files that you're replacing in the destination.
  • Kopieren Sie den Ordner mit der Quelldatei für das Ansichts Modell (der Ordner ist \ViewModel).Copy the folder containing the view model source file (the folder is \ViewModel).
  • Kopieren Sie „MainPage.xaml“, und ersetzen Sie die Datei am Ziel.Copy MainPage.xaml and replace the file in the destination.

Aus dem Windows-ProjektFrom the Windows project

  • Kopieren Sie „BookstoreStyles.xaml“.Copy BookstoreStyles.xaml. Diese wird als guter Ausgangspunkt verwendet, da alle Ressourcen Schlüssel in dieser Datei in einer Windows 10-App aufgelöst werden. einige der in der entsprechenden windowsphone-Datei werden nicht angezeigt.We'll use this one as a good starting-point because all the resource keys in this file will resolve in a Windows 10 app; some of those in the equivalent WindowsPhone file will not.

Bearbeiten Sie den Quell Code und die soeben kopierten Markup Dateien, und ändern Sie alle Verweise auf den Namespace Bookstore1_81 auf Bookstore1Universal_10.Edit the source code and markup files that you just copied and change any references to the Bookstore1_81 namespace to Bookstore1Universal_10. Eine schnelle Möglichkeit dafür ist die Verwendung des Features In Dateien ersetzen.A quick way to do that is to use the Replace In Files feature. Weder im Ansichtsmodell, noch in einem anderen imperativen Code sind Codeänderungen erforderlich.No code changes are needed in the view model, nor in any other imperative code. Wenn Sie jedoch leichter erkennen möchten, welche Version der app ausgeführt wird, ändern Sie den Wert, der von der Bookstore1Universal_10. bookstoreviewmodel. appname -Eigenschaft zurückgegeben wird, von "BOOKSTORE1_81" in "Bookstore1Universal_10".But, just to make it easier to see which version of the app is running, change the value returned by the Bookstore1Universal_10.BookstoreViewModel.AppName property from "BOOKSTORE1_81" to "BOOKSTORE1UNIVERSAL_10".

Jetzt können Sie mit der Erstellung und Ausführung beginnen.Right now, you can build and run. Im folgenden wird erläutert, wie die neue UWP-App aussieht, nachdem Sie noch keine explizite Arbeit für die Portierung von Windows 10 ausgeführt hat.Here's how our new UWP app looks after having done no explicit work yet to port it to Windows 10.

Die Windows 10-App mit Änderungen am ursprünglichen Quellcode

Windows 10-App mit anfänglichen Quell Codeänderungen, die auf einem Desktop Gerät ausgeführt werdenThe Windows 10 app with initial source code changes running on a Desktop device

Die Windows 10-App mit Änderungen am ursprünglichen Quellcode

Windows 10-App mit anfänglichen Quell Codeänderungen, die auf einem mobilen Gerät ausgeführt werdenThe Windows 10 app with initial source code changes running on a Mobile device

Die Ansicht und das Ansichtsmodell arbeiten ordnungsgemäß zusammen, und das ListBox-Element funktioniert.The view and the view model are working together correctly, and the ListBox is functioning. Wir müssen lediglich die Formatierung ändern.We just need to fix the styling. Auf einem mobilen Gerät mit hellem Design können wir den Rahmen des Listenfelds sehen, der sich jedoch einfach ausblenden lässt.On a Mobile device, in light theme, we can see the border of the list box, but that will be easy to hide. Und die Schrift ist zu groß, sodass wir die verwendeten Stile ändern.And, the typography is too big, so we'll change the styles we're using. Darüber hinaus sollte die App helle Farben verwenden, wenn sie auf einem Desktopgerät ausgeführt wird, damit sie standardmäßig aussieht.Also, the app should be light in color when running on a Desktop device if we want it to look like the default. Wir werden dies also ändern.So, we'll change that.

Universelle FormatierungUniversal styling

Die Bookstore1_81-App verwendete zwei verschiedene Ressourcen Wörterbücher (bookstorestyles. XAML), um Ihre Stile an die Windows 8.1-und Windows Phone 8,1-Betriebssysteme anzupassen.The Bookstore1_81 app used two different resource dictionaries (BookstoreStyles.xaml) to tailor its styles to the Windows 8.1 and Windows Phone 8.1 operating systems. Keines dieser beiden Dateien der Datei "bookstorestyles. XAML" enthält genau die Stile, die wir für unsere Windows 10-App benötigen.Neither of those two BookstoreStyles.xaml files contains exactly the styles we need for our Windows 10 app. Die gute Nachricht ist jedoch, dass unsere Vorstellungen tatsächlich sehr viel einfacher sind als diese beiden.But, the good news is that what we want is actually much simpler than either of them. In den nächsten Schritten werden wir daher hauptsächlich unsere Projektdateien und das Markup entfernen und vereinfachen.So, the next steps will mostly involve removing and simplifying our project files and markup. Die Schritte finden Sie nachfolgend:The steps are below. Sie können die Links oben in diesem Thema verwenden, um die Projekte herunterzuladen und die Ergebnisse dieser Änderungen zwischen diesem Punkt und dem Ende der Fallstudie anzuzeigen.And you can use the links at the top of this topic to download the projects and see the results of all the changes between here and the end of the case study.

  • Um den Abstand zwischen den Elementen zu verkleinern, suchen Sie die BookTemplate-Datenvorlage in „MainPage.xaml“, und löschen Sie Margin="0,0,0,8" aus dem Stamm-Grid.To tighten up the spacing between items, find the BookTemplate data template in MainPage.xaml and delete the Margin="0,0,0,8" from the root Grid.
  • Auch in BookTemplategibt es Verweise auf BookTemplateTitleTextBlockStyle und BookTemplateAuthorTextBlockStyle.Also, in BookTemplate, there are references to BookTemplateTitleTextBlockStyle and BookTemplateAuthorTextBlockStyle. Bookstore1_81 verwendete diese Schlüssel als Dereferenzierung, sodass ein einzelner Schlüssel in den beiden apps über verschiedene Implementierungen verfügte.Bookstore1_81 used those keys as an indirection so that a single key had different implementations in the two apps. Diese Dereferenzierung wird nicht mehr benötigt; wir können direkt auf die Systemstile verweisen.We don't need that indirection any more; we can just reference system styles directly. Ersetzen Sie daher diese Verweise durch TitleTextBlockStyle bzw. SubtitleTextBlockStyle.So, replace those references with TitleTextBlockStyle and SubtitleTextBlockStyle, respectively.
  • Jetzt müssen wir den Hintergrund von LayoutRoot auf den richtigen Standardwert festlegen, damit die App unabhängig vom Design bei der Ausführung auf allen Geräten entsprechend gut aussieht.Now, we need to set LayoutRoot's Background to the correct default value so that the app looks appropriate when running on all devices no matter what the theme is. Ändern Sie den Wert von "Transparent" in "{ThemeResource ApplicationPageBackgroundThemeBrush}".Change it from "Transparent" to "{ThemeResource ApplicationPageBackgroundThemeBrush}".
  • Ändern Sie in TitlePanel den Verweis auf TitleTextBlockStyle (was nun ein wenig zu groß ist) in einen Verweis auf CaptionTextBlockStyle.In TitlePanel, change the reference to TitleTextBlockStyle (which is now a little too big) to a reference to CaptionTextBlockStyle. PageTitleTextBlockStyle ist eine weitere Bookstore1_81-Dereferenzierung, die wir nicht mehr benötigen.PageTitleTextBlockStyle is another Bookstore1_81 indirection that we don't need any longer. Ändern Sie dies, sodass stattdessen auf HeaderTextBlockStyle verwiesen wird.Change that to reference HeaderTextBlockStyle instead.
  • Für ListBox müssen keine speziellen Background-, Style- oder ItemContainerStyle-Werte mehr festgelegt werden. Löschen Sie daher diese drei Attribute und deren Werte aus dem Markup.We no longer need to set any special Background, Style, nor ItemContainerStyle on the ListBox, so just delete those three attributes and their values from the markup. Wir möchten den Rand von ListBox ausblenden und fügen daher BorderBrush="{x:Null}" hinzu.We do want to hide the border of the ListBox, though, so add BorderBrush="{x:Null}" to it.
  • Wir verweisen nicht mehr auf eine Ressource in der ResourceDictionary-Datei namens „BookstoreStyles.xaml“.We're not referencing any of the resources in the BookstoreStyles.xaml ResourceDictionary file any longer. Sie können alle diese Ressourcen löschen.You can delete all of those resources. Löschen Sie jedoch nicht die Datei „BookstoreStyles.xaml“ selbst. Diese können wir noch ein letztes Mal verwenden, wie Sie im nächsten Abschnitt sehen werden.But, don't delete the BookstoreStyles.xaml file itself: we still have one last use for it, as you'll see in the next section.

Nach den letzten Formatierungsvorgängen sieht die App folgendermaßen aus.That last sequence of styling operations leaves the app looking like this.

Die fast portierte Windows 10-App

Die fast portierte Windows 10-APP, die auf einem Desktop Gerät ausgeführt wirdThe almost-ported Windows 10 app running on a Desktop device

Die fast portierte Windows 10-App

Die fast portierte Windows 10-APP, die auf einem mobilen Gerät ausgeführt wirdThe almost-ported Windows 10 app running on a Mobile device

Eine optionale Anpassung des Listenfelds für MobilgeräteAn optional adjustment to the list box for Mobile devices

Wenn die App auf einem Mobilgerät ausgeführt wird, ist der Hintergrund eines Listenfelds standardmäßig in beiden Designs hell.When the app is running on a Mobile device, the background of a list box is light by default in both themes. Dies ist möglicherweise genau der Stil, den Sie bevorzugen, sodass Sie in diesem Fall nichts weiter unternehmen müssen als aufzuräumen: Löschen Sie dazu die Ressourcenwörterbuchdatei „BookstoreStyles.xaml“ aus dem Projekt, und entfernen Sie das Markup, das sie in „MainPage.xaml“ zusammenführt.That may be the style that you prefer and, if so, then there's nothing more to do except to tidy up: delete the BookstoreStyles.xaml resource dictionary file from your project, and remove the markup that merges it into MainPage.xaml.

Aber die Steuerelemente sind so konzipiert, dass Sie das Aussehen anpassen können, ohne ihr Verhalten zu ändern.But, controls are designed so that you can customize their look while leaving their behavior unaffected. Wenn das Listenfeld durch das dunkle Design dunkel gestaltet werden soll – so wie in der ursprünglichen App vorgesehen – dann finden Sie in diesem Abschnitt eine Beschreibung dafür.So, if you want the list box to be dark in the dark theme—the way the original app looked—then this section describes a way to do that.

Die Änderung, die wir vornehmen, muss sich nur dann auf die App auswirken, wenn sie auf mobilen Geräten ausgeführt wird.The change we make only needs to affect the app when it's running on Mobile devices. Daher verwenden wir einen leicht angepassten Listenfeldstil, wenn die App auf der Mobilgerätefamilie ausgeführt wird, für alle anderen Geräte verwenden wir weiterhin den Standardstil.So, we'll use a very slightly customized list box style when we're running on the Mobile device family, and we'll continue to use the default style when we're running everywhere else. Dazu erstellen wir eine Kopie von „BookstoreStyles.xaml“ und geben ihr einen speziellen MRT-qualifizierten Namen, sodass die Kopie nur auf mobilen Geräten geladen wird.To do that, we'll make a copy of BookstoreStyles.xaml and we'll give it a special MRT-qualified name, which will cause it to be loaded only on Mobile devices.

Fügen Sie ein neues ResourceDictionary-Projektelement hinzu, und geben Sie ihm den Namen „BookstoreStyles.DeviceFamily Mobile.xaml“.Add a new ResourceDictionary project item and name it BookstoreStyles.DeviceFamily-Mobile.xaml. Sie haben jetzt zwei Dateien, die beide den logischen Namen "BookstoreStyles.xaml" haben. (Dies ist der Name, den Sie in Ihrem Markup und Code verwenden.)You now have two files both of whose logical name is BookstoreStyles.xaml (and that's the name you use in your markup and code). Die Dateien haben jedoch unterschiedliche physische Namen, sodass sie verschiedene Markups enthalten können.The files have different physical names, though, so they can contain different markup. Sie können dieses MRT-qualifizierte Benennungsschema für jede XAML-Datei verwenden. Beachten Sie jedoch, dass sich alle XAML-Dateien mit demselben logischen Namen eine einzelne CodeBehind-Datei („xaml.cs“) teilen, sofern vorhanden.You can use this MRT-qualified naming scheme with any xaml file, but be aware that all xaml files with the same logical name share a single xaml.cs code-behind file (where one is applicable).

Bearbeiten Sie eine Kopie der Steuerelementvorlage für das Listenfeld, und speichern Sie sie mit dem Schlüssel von BookstoreListBoxStyle im neuen Ressourcenwörterbuch „BookstoreStyles.DeviceFamily-Mobile.xaml“.Edit a copy of the control template for the list box and store that with the key of BookstoreListBoxStyle in the new resource dictionary, BookstoreStyles.DeviceFamily-Mobile.xaml. Jetzt nehmen wir einfache Änderungen an drei der Setter vor.Now, we'll make simple changes to three of the setters.

  • Ändern Sie im Vordergrundsetter den Wert in "{x:Null}".In the Foreground setter, change the value to "{x:Null}". Beachten Sie, dass das direkte Festlegen einer Eigenschaft auf "{x:Null}" für ein Element identisch mit der Einstellung null im Code ist.Note that setting a property to "{x:Null}" directly on an element is the same as setting it to null in code. Der Wert "{x:Null}" in einem Setter hat jedoch einen einzigartigen Effekt: Der Setter im Standardstil (für dieselbe Eigenschaft) wird überschrieben, und der Standardwert der Eigenschaft wird für das Zielelement wiederhergestellt.But, using a value of "{x:Null}" in a setter has a unique effect: it overrides the setter in the default style (for the same property) and restores the default value of the property on the target element.
  • Ändern Sie im Hintergrundsetter den Wert in "Transparent", um den hellen Hintergrund zu entfernen.In the Background setter, change the value to "Transparent" to remove that light background.
  • Suchen Sie im Vorlagensetter den visuellen Zustand mit dem Namen Focused, und löschen Sie das Storyboard, damit sie ein leeres Tag erhalten.In the Template setter, find the visual state named Focused and delete its Storyboard, making it into an empty tag.
  • Löschen Sie alle anderen Setter aus dem Markup.Delete all the other setters from the markup.

Kopieren Sie schließlich BookstoreListBoxStyle in „BookstoreStyles.xaml“, und löschen Sie die drei Setter, damit sie ein leeres Tag erhalten.Finally, copy BookstoreListBoxStyle into BookstoreStyles.xaml and delete its three setters, making it into an empty tag. Dies führen wir auf anderen Geräten als mobilen Geräten durch, sodass der Verweis auf „BookstoreStyles.xaml“ und BookstoreListBoxStyle weiterhin aufgelöst wird, aber keine Auswirkungen hat.We do this so that on devices other than Mobile ones, our reference to BookstoreStyles.xaml and to BookstoreListBoxStyle will resolve, but will have no effect.

Die portierte Windows 10-App

Die portierte Windows 10-APP, die auf einem mobilen Gerät ausgeführt wirdThe ported Windows 10 app running on a Mobile device

FazitConclusion

In dieser Fallstudie wurde der Prozess zum Portieren einer einfachen App gezeigt – einer zugegebenermaßen unrealistisch einfachen App.This case study showed the process of porting a very simple app—arguably an unrealistically simple one. Beispielsweise kann ein Listenfeld für die Auswahl oder die Herstellung eines Navigationskontexts verwendet werden; die App navigiert zu einer Seite mit weiteren Details zum ausgewählten Element.For instance, a list box can be used for selection or for establishing a context for navigation; the app navigates to a page with more details about the item that was tapped. Diese bestimmte App führt keine Aktionen mit der Auswahl des Benutzers aus und verfügt nicht über Navigation.This particular app does nothing with the user's selection, and it has no navigation. Dennoch diente die Fallstudie dazu, den Portierungsprozess vorzustellen und wichtige Techniken zu veranschaulichen, die Sie in echten UWP-Apps verwenden können.Even so, the case study served to break the ice, to introduce the porting process, and to demonstrate important techniques that you can use in real UWP apps.

Wir konnten uns auch davon überzeugen, dass das Portieren von Ansichtsmodellen in der Regel ein reibungsloser Prozess ist.We also saw evidence that porting view models is generally a smooth process. Die Benutzeroberfläche und die Formfaktorunterstützung sind Aspekte, die beim Portieren mit höherer Wahrscheinlichkeit unsere Aufmerksamkeit erfordern.User interface, and form factor support, are aspects that are more likely to require our attention when porting.

Die nächste Fallstudie ist Bookstore2, in der wir den Zugriff auf und die Anzeige von gruppierten Daten behandeln.The next case study is Bookstore2, in which we look at accessing and displaying grouped data.