Windows Phone Silverlight zu UWP – Fallstudie, Bookstore1Windows Phone Silverlight to UWP case study: Bookstore1

In diesem Thema wird eine Fallstudie für das Portieren einer sehr einfachen Windows Phone Silverlight-App zu einer UWP (Universelle Windows-Plattform)-App für Windows 10 vorgestellt.This topic presents a case study of porting a very simple Windows Phone Silverlight app to a Windows 10 Universal Windows Platform (UWP) app. Mit Windows 10 können Sie ein einzelnes App-Paket erstellen, das Ihre Kunden auf einer Vielzahl von Geräten installieren können – und genau das werden wir in dieser Fallstudie tun.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.

Hinweis    Wenn Sie Bookstore1Universal _ 10 in Visual Studio öffnen, wenn die Meldung "Visual Studio-Update erforderlich" angezeigt wird, führen Sie die Schritte zum Auswählen einer Versionsverwaltung für die Zielplattform in " targetplatformversion" aus.Note   When opening Bookstore1Universal_10 in Visual Studio, if you see the message "Visual Studio update required", then follow the steps for selecting a Target Platform Versioning in TargetPlatformVersion.

DownloadsDownloads

Laden Sie die Windows Phone Silverlight-App „Bookstore1WPSL8“ herunter.Download the Bookstore1WPSL8 Windows Phone Silverlight app.

Laden Sie die _ app "Bookstore1Universal 10 Windows 10" herunter.Download the Bookstore1Universal_10 Windows 10 app.

Die Windows Phone Silverlight-AppThe Windows Phone Silverlight app

So sieht „Bookstore1WPSL8“ aus – die App, die wir portieren werden.Here’s what Bookstore1WPSL8—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.

Erscheinungsbild von „Bookstore1WPSL8“

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

Das Erstellen eines neuen Projekts in Visual Studio geht sehr schnell: Kopieren Sie Dateien aus „Bookstore1WPSL8“, und fügen Sie die kopierten Dateien in das neue Projekt ein.It's a very quick task to create a new project in Visual Studio, copy files over to it from Bookstore1WPSL8, 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 Bookstore1WPSL8 nach Bookstore1Universal 10 kopiert werden sollen _ .These are the files to copy over from Bookstore1WPSL8 to Bookstore1Universal_10.

  • Kopieren Sie den Ordner, der das Buch enthält, das das Buch enthält, das das Buch enthält \ \ .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, 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, 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.

Wir können die von Visual Studio für uns im Windows 10-Projekt generierten Dateien „App.xaml“ und „App.xaml.cs“ beibehalten.We can keep the App.xaml, and App.xaml.cs that Visual Studio generated for us in the Windows 10 project.

Bearbeiten Sie den Quell Code und die soeben kopierten Markup Dateien, und ändern Sie alle Verweise auf den Bookstore1WPSL8-Namespace in Bookstore1Universal _ 10.Edit the source code and markup files that you just copied and change any references to the Bookstore1WPSL8 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. Im imperativen Code in der Ansichtsmodell-Quelldatei sind die folgenden Portierungsänderungen erforderlich:In the imperative code in the view model source file, these porting changes are needed:

  • Ändern Sie System.ComponentModel.DesignerProperties in DesignMode, und wenden Sie dann den Befehl Auflösen darauf an.Change System.ComponentModel.DesignerProperties to DesignMode and then use the Resolve command on it. Löschen Sie die IsInDesignTool-Eigenschaft, und fügen Sie mithilfe von IntelliSense den richtigen Eigenschaftsnamen hinzu: DesignModeEnabled.Delete the IsInDesignTool property and use IntelliSense to add the correct property name: DesignModeEnabled.
  • Wenden Sie den Befehl Auflösen auf ImageSource an.Use the Resolve command on ImageSource.
  • Wenden Sie den Befehl Auflösen auf BitmapImage an.Use the Resolve command on BitmapImage.
  • Löschen Sie using System.Windows.Media; und using System.Windows.Media.Imaging;.Delete using System.Windows.Media; and using System.Windows.Media.Imaging;.
  • Ändern Sie den Wert, der von der Bookstore1Universal _ 10. bookstoreviewmodel. appname -Eigenschaft zurückgegeben wird, von "BOOKSTORE1WPSL8" in "Bookstore1Universal".Change the value returned by the Bookstore1Universal_10.BookstoreViewModel.AppName property from "BOOKSTORE1WPSL8" to "BOOKSTORE1UNIVERSAL".

In „MainPage.xaml“ führen Sie die folgenden Portierungsänderungen aus:In MainPage.xaml, these porting changes are needed:

  • Ändern Sie phone:PhoneApplicationPage in Page (einschließlich der Eigenschaftselementsyntax).Change phone:PhoneApplicationPage to Page (don't forget the occurrences in property element syntax).
  • Löschen Sie die Namespacepräfix-Deklarationen phone und shell.Delete the phone and shell namespace prefix declarations.
  • Ändern Sie „clr-namespace“ in der verbleibenden Namespacepräfix-Deklaration in „using“.Change "clr-namespace" to "using" in the remaining namespace prefix declaration.

Wir können Markupkompilierungsfehler auf sehr einfache Weise beheben, wenn wir schnell Ergebnisse erhalten möchten, auch wenn dazu vorübergehend Markup entfernt werden muss.We can choose to correct markup compilation errors very cheaply if we want to see results soonest, even if that means temporarily removing markup. Wir sollten jedoch die Forderungen dokumentieren, die auf diese Weise entstehen.But, let's keep a record of the debt we accrue by doing so. In diesem Fall:Here it is in this case.

  1. Löschen Sie im Page-Stammelement in der Datei MainPage.xaml den Codetext SupportedOrientations="Portrait".In the root Page element in MainPage.xaml, delete SupportedOrientations="Portrait".
  2. Löschen Sie im Page-Stammelement in der Datei MainPage.xaml den Codetext Orientation="Portrait".In the root Page element in MainPage.xaml, delete Orientation="Portrait".
  3. Löschen Sie im Page-Stammelement in der Datei MainPage.xaml den Codetext shell:SystemTray.IsVisible="True".In the root Page element in MainPage.xaml, delete shell:SystemTray.IsVisible="True".
  4. Löschen Sie in der BookTemplate-Datenvorlage die Verweise auf die  TextBlock-Stile PhoneTextExtraLargeStyle und PhoneTextSubtleStyle.In the BookTemplate data template, delete the references to the PhoneTextExtraLargeStyle and PhoneTextSubtleStyleTextBlock styles.
  5. Löschen Sie in TitlePanelStackPanel die Verweise auf die  TextBlock-Stile PhoneTextNormalStyle und PhoneTextTitle1Style.In the TitlePanelStackPanel, delete the references to the PhoneTextNormalStyle and PhoneTextTitle1StyleTextBlock styles.

Zuerst befassen wir uns mit der UI für die Familie der Mobilgeräte. Um die anderen Formfaktoren können wir uns später kümmern.Let's work on the UI for the mobile device family first, and we can consider other form factors after that. Sie können die App jetzt erstellen und ausführen.You can build and run the app now. Im Mobile-Emulator sieht sie wie hier dargestellt aus.Here's how it looks on the mobile emulator.

UWP-App auf dem Mobilgerät mit Änderungen am ursprünglichen Quellcode

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 Stile bearbeiten und dafür sorgen, dass die Bilder angezeigt werden.We mostly just need to fix the styling and get the images to show up.

Zurückzahlen der Schulden und erste FormatierungenPaying off the debt items, and some initial styling

Standardmäßig werden alle Ausrichtungen unterstützt.By default, all orientations are supported. Die Windows Phone Silverlight-App beschränkt sich explizit auf das Hochformat, sodass die Schulden Elemente # 1 und # 2 abbezahlt werden, indem Sie das App-Paket Manifest im neuen Projekt aufrufen und das Portrait Hochformat in unterstützten Ausrichtungenüberprüfen.The Windows Phone Silverlight app explicitly constrains itself to portrait-only, though, so debt items #1 and #2 are paid off by going into the app package manifest in the new project and checking Portrait under Supported orientations.

Für diese APP ist Element # 3 keine Schuld, weil die Statusleiste (früher als "Systemleiste" bezeichnet) standardmäßig angezeigt wird.For this app, item #3 is not a debt since the status bar (formerly called the system tray) is shown by default. Für # die Elemente 4 und # 5 müssen wir vier universelle Windows-Plattform (UWP) TextBlock -Stile finden, die den Windows Phone Silverlight-Stilen entsprechen, die wir verwenden.For items #4 and #5, we need to find four Universal Windows Platform (UWP) TextBlock styles that correspond to the Windows Phone Silverlight styles that we were using. Sie können die Windows Phone Silverlight-App im Emulator ausführen und nebeneinander mit der Abbildung im Abschnitt Text vergleichen.You can run the Windows Phone Silverlight app in the emulator and compare it side-by-side with the illustration in the Text section. Aufgrund dieser Vorgehensweise und anhand der Eigenschaften der Windows Phone Silverlight-Systemstile können wir folgende Tabelle erstellen:From doing that, and from looking at the properties of the Windows Phone Silverlight system styles, we can make this table.

| Windows Phone Silverlight-StilschlüsselWindows Phone Silverlight style key | UWP-StilschlüsselUWP style key | |-------------------------------------|------------------------| | PhoneTextExtraLargeStylePhoneTextExtraLargeStyle | TitleTextBlockStyleTitleTextBlockStyle | | PhoneTextSubtleStylePhoneTextSubtleStyle | SubtitleTextBlockStyleSubtitleTextBlockStyle | | PhoneTextNormalStylePhoneTextNormalStyle | CaptionTextBlockStyleCaptionTextBlockStyle | | PhoneTextTitle1StylePhoneTextTitle1Style | HeaderTextBlockStyleHeaderTextBlockStyle |   Zum Festlegen dieser Stile können Sie sie einfach in den Markup-Editor eingeben oder die Visual Studio-XAML-Tools verwenden und sie festlegen, ohne etwas einzugeben.To set those styles, you can just type them into the markup editor or you can use the Visual Studio XAML Tools and set them without typing a thing. Klicken Sie dazu mit der rechten Maustaste auf TextBlock, und klicken Sie dann auf Stil bearbeiten > Ressource anwenden.To do that, you right-click a TextBlock and click Edit Style > Apply Resource. Um dies für die TextBlock-Elemente in der Elementvorlage auszuführen, klicken Sie mit der rechten Maustaste auf das ListBox-Element und klicken dann auf Weitere Vorlagen bearbeiten > Erstellte Elemente bearbeiten (ItemTemplate).To do that with the TextBlocks in the item template, right click the ListBox and click Edit Additional Templates > Edit Generated Items (ItemTemplate).

Die Elemente sind mit einem weißen Hintergrund mit 80 % Deckkraft unterlegt, da der Standardstil des ListBox-Steuerelements den Hintergrund auf die ListBoxBackgroundThemeBrush-Systemressource festlegt.There is an 80% opaque white background behind the items, because the default style of the ListBox control sets its background to the ListBoxBackgroundThemeBrush system resource. Legen Sie Background="Transparent" für das ListBox-Element fest, um den Hintergrund zu löschen.Set Background="Transparent" on the ListBox to clear that background. Zur Linksausrichtung der TextBlock-Elemente in der Elementvorlage bearbeiten Sie sie erneut wie oben beschrieben und legen unter Margin für beide TextBlock-Elemente den Wert "9.6,0" fest.To left-align the TextBlocks in the item template, edit it again the same way as described above and set a Margin of "9.6,0" on both TextBlocks.

Anschließend müssen wir aufgrund der Änderungen im Zusammenhang mit Anzeigepixeln alle Dimensionen fester Größe, die wir noch nicht geändert haben (Ränder, Breite, Höhe, usw.), überprüfen und mit 0,8 multiplizieren.After that is done, because of changes related to view pixels, we need to go through and multiply any fixed size dimension that we haven’t yet changed (margins, width, height, etc) by 0.8. Die Bilder sollten z. B. von 70x70px in 56x56px geändert werden.So, for example, the images should change from 70x70px to 56x56px.

Lassen Sie uns jedoch die Bilder rendern, bevor wir die Ergebnisse Ihrer Formatierung anzeigen.But, let’s get those images to render before we show the results of our styling.

Binden eines Bilds an ein AnsichtsmodellBinding an Image to a view model

In „Bookstore1WPSL8“ haben wir Folgendes vorgenommen:In Bookstore1WPSL8, we did this:

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(this.CoverImagePath, UriKind.Relative));

In „Bookstore1Universal“ verwenden wir das URI-Schema „ms-appx“.In Bookstore1Universal, we use the ms-appx URI scheme. Damit der Rest unseres Codes beibehalten werden kann, können wir eine andere Überladung des System.Uri-Konstruktors verwenden, um das URI-Schema „ms-appx“ in einen Basis-URI einzufügen und den restlichen Pfad anzufügen.So that we can keep the rest of our code the same, we can use a different overload of the System.Uri constructor to put the ms-appx URI scheme in a base URI and append the rest of the path onto that. Und zwar so:Like this:

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(new Uri("ms-appx://"), this.CoverImagePath));

Universelle FormatierungUniversal styling

Jetzt müssen wir nur noch einige abschließende Formatierungsanpassungen vornehmen und uns vergewissern, dass die App sowohl auf dem Desktop (und anderen Formfaktoren) sowie Mobilgeräten gut aussieht.Now, we just need to make some final styling tweaks and confirm that the app looks good on desktop (and other) form factors as well as mobile. 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 in der Datei „MainPage.xaml“ nach der BookTemplate-Datenvorlage und löschen das Margin-Attribut aus dem Grid-Stammelement.To tighten up the spacing between items, find the BookTemplate data template in MainPage.xaml and delete the Margin attribute from the root Grid.
  • Wenn Sie für den Seitentitel etwas mehr Platz bereitstellen möchten, können Sie den unteren Rand für das TextBlock-Element der Titelseite von -5.6 auf 0 zurücksetzen.If you want to give the page title a little more breathing room, you can reset the bottom margin of -5.6 to 0 on the page title TextBlock.
  • 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}".

Bei einer komplexeren App müssten wir an diesem Punkt den Leitfaden unter Portieren für Formfaktor und Benutzerfreundlichkeit verwenden und den Formfaktor für die einzelnen Geräte, auf denen die App jetzt ausgeführt werden kann, wirklich optimal nutzen.With a more sophisticated app, this would be the point at which we'd use the guidance in Porting for form factor and user experience and really make optimal use of the form factor of each of the many devices the app can now run on. Bei dieser einfachen App können wir aber hier aufhören und uns ansehen, wie die App nach den letzten Formatierungsvorgängen aussieht.But, for this simple app, we can stop here and see how the app looks after that last sequence of styling operations. Tatsächlich sieht sie auf Mobilgeräten und Desktopgeräten gleich aus, auch wenn der Platz bei breiten Formfaktoren nicht bestmöglich genutzt wird (damit beschäftigen wir uns in einer späteren Fallstudie).It actually looks the same on mobile and desktop devices, although it's not making best use of space on wide form factors (but we'll investigate how to do that in a later case study).

Informationen dazu, wie Sie das Design Ihrer App steuern, finden Sie unter Designänderungen.See Theme changes to see how to control the theme of your app.

Die portierte Windows 10-App

Die portierte Windows 10-App auf einem mobilen GerätThe 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. Vielleicht ist dies der von Ihnen bevorzugte Stil. Falls dies so ist, gibt es nichts mehr zu tun.That may be the style that you prefer and, if so, then there's nothing more to do. 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 im dunklen Design dunkel sein soll, wie in der ursprünglichen App vorgesehen, hilft Ihnen diese Anleitung unter „Eine optionale Anpassung“ weiter.So, if you want the list box to be dark in the dark theme—the way the original app looked—then follow these instructions under "An optional adjustment".

ZusammenfassungConclusion

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 können Listensteuerelemente für die Auswahl oder für die Herstellung eines Kontexts für die Navigation verwendet werden. Die App navigiert zu einer Seite mit weiteren Details zum ausgewählten Element.For instance, list controls 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.

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.