Windows Runtime 8.x zu UWP – Fallstudie: Bookstore2Windows Runtime 8.x to UWP case study: Bookstore2

Diese Fallstudie baut auf den Informationen in Bookstore1 auf und beginnt mit einer universellen 8.1-App, die gruppierte Daten in einem SemanticZoom-Steuerelement anzeigt.This case study—which builds on the info given in Bookstore1—begins with a Universal 8.1 app that displays grouped data in a SemanticZoom control. Im Ansichtsmodell stellt jede Instanz der Author-Klasse die Gruppe der vom betreffenden Autor verfassten Titel dar. In SemanticZoom können wir dann entweder die Bücherliste nach Autoren gruppiert anzeigen oder die Liste verkleinern, um eine Sprungliste der Autoren zu erhalten.In the view model, each instance of the class Author represents the group of the books written by that author, and in the SemanticZoom, we can either view the list of books grouped by author or we can zoom out to see a jump list of authors. Die Sprungliste ermöglicht eine wesentlich schnellere Navigation im Vergleich zum Blättern in der Bücherliste.The jump list affords much quicker navigation than scrolling through the list of books. Wir führen Sie durch die Schritte zum Portieren der APP auf eine Windows 10 universelle Windows-Plattform-app (UWP).We walk through the steps of porting the app to a Windows 10 Universal Windows Platform (UWP) app.

Beachten Sie   Wenn Sie Bookstore2Universal_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 Bookstore2Universal_10 in Visual Studio, if you see the message "Visual Studio update required", then follow the steps in TargetPlatformVersion.

DownloadsDownloads

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

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

Die universelle 8.1-AppThe Universal 8.1 app

Im folgenden sehen Sie, was Bookstore2_81 – die APP, die wir portieren werden – sieht wie folgt aus:.Here’s what Bookstore2_81—the app that we're going to port—looks like. Über einen SemanticZoom mit horizontalem Bildlauf (Windows Phone: vertikalem Bildlauf) werden Bücher nach Autoren gruppiert angezeigt.It's a horizontally-scrolling (vertically-scrolling on Windows Phone) SemanticZoom showing books grouped by author. Sie können die Liste auf die Sprungliste verkleinern und von dort aus wieder zurück zu einer beliebigen Gruppe navigieren.You can zoom out to the jump list and from there you can navigate back into any group. Die App besteht aus zwei Hauptteilen: dem Ansichtsmodell, das die gruppierte Datenquelle bereitstellt, und der Benutzeroberfläche, die an dieses Ansichtsmodell gebunden ist.There are two main pieces to this app: the view model that provides the grouped data source, and the user interface that binds to that view model. Wie wir sehen werden, sind beide Teile leicht von der WinRT 8,1-Technologie zu Windows 10 portieren.As we'll see, both of these pieces port easily from WinRT 8.1 technology to Windows 10.

Bookstore2-81 unter Windows, Zoomansicht

Bookstore2_81 unter Windows, ZoomansichtBookstore2_81 on Windows, zoomed-in view

Bookstore2-81 unter Windows, Zoomansicht

Bookstore2_81 unter Windows, ZoomansichtBookstore2_81 on Windows, zoomed-out view

Bookstore2-81 auf Windows Phone, Zoomansicht

Bookstore2_81 auf Windows Phone, ZoomansichtBookstore2_81 on Windows Phone, zoomed-in view

Bookstore2-81 auf Windows Phone, Zoomansicht

Bookstore2_81 auf Windows Phone, ZoomansichtBookstore2_81 on Windows Phone, zoomed-out view

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

Die Lösung Bookstore2_81 ist ein universelles Universal App-Projekt in 8,1.The Bookstore2_81 solution is an 8.1 Universal App project. Das Bookstore2_81. Windows-Projekt erstellt das App-Paket für Windows 8.1, und das Bookstore2_81. windowsphone-Projekt erstellt das App-Paket für Windows Phone 8,1.The Bookstore2_81.Windows project builds the app package for Windows 8.1, and the Bookstore2_81.WindowsPhone project builds the app package for Windows Phone 8.1. Bookstore2_81. Shared ist das Projekt, das Quell Code, Markup Dateien und andere Assets und Ressourcen enthält, die von beiden anderen Projekten verwendet werden.Bookstore2_81.Shared is the project that contains source code, markup files, and other assets and resources, that are used by both of the other two projects.

Genau wie bei der vorherigen Fallstudie ist die Option, die wir Unternehmen, Wenn Sie über eine universelle 8,1-App verfügen, das Portieren des Inhalts des freigegebenen Projekts auf ein Windows 10-Ziel, das die universelle Gerätefamilie als Ziel hat.Just like with the previous case study, the option we'll take (of the ones described in If you have a Universal 8.1 app) is to port the contents of the Shared project to a Windows 10 that targets the Universal device family.

Erstellen Sie zunächst ein neues Projekt vom Typ „Leere Anwendung“ (Windows Universal).Begin by creating a new Blank Application (Windows Universal) project. Nennen Sie Sie Bookstore2Universal_10.Name it Bookstore2Universal_10. Dabei handelt es sich um die Dateien, die von Bookstore2_81 nach Bookstore2Universal_10 kopiert werden müssen.These are the files to copy over from Bookstore2_81 to Bookstore2Universal_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.
  • Kopieren Sie SeZoUC.xaml und SeZoUC.xaml.cs.Copy SeZoUC.xaml and SeZoUC.xaml.cs. Wir beginnen mit der Windows-Version dieser Ansicht, die für breite Fenster geeignet ist, und passen sie später für kleinere Fenster und folglich kleinere Geräte an.We'll start with the Windows version of this view, which is appropriate for wide windows, and then later we'll make it adapt to smaller windows and, consequently, smaller devices.

Bearbeiten Sie den Quell Code und die soeben kopierten Markup Dateien, und ändern Sie alle Verweise auf den Namespace Bookstore2_81 auf Bookstore2Universal_10.Edit the source code and markup files that you just copied and change any references to the Bookstore2_81 namespace to Bookstore2Universal_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 Bookstore2Universal_10. bookstoreviewmodel. appname -Eigenschaft zurückgegeben wird, von "Bookstore2_81" in "Bookstore2Universal_10".But, just to make it easier to see which version of the app is running, change the value returned by the Bookstore2Universal_10.BookstoreViewModel.AppName property from "Bookstore2_81" to "BOOKSTORE2UNIVERSAL_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 Arbeit mit Windows 10 hergestellt hat.Here's how our new UWP app looks after having done no work yet to port it to Windows 10.

Die Windows 10-App mit Änderungen am ursprünglichen Quellcode auf einem Desktopgerät, vergrößerte Ansicht

Die Windows 10-App mit anfänglichen Quell Codeänderungen, die auf einem Desktop Gerät ausgeführt werden, zoomansichts AnsichtThe Windows 10 app with initial source code changes running on a Desktop device, zoomed-in view

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

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

Das Ansichtsmodell und die vergrößerten sowie verkleinerten Ansichten arbeiten ordnungsgemäß zusammen, auch wenn man dies nicht auf Anhieb sieht.The view model and the zoomed-in and zoomed-out views are working together correctly, although there are issues that make that a little hard to see. Ein Problem besteht darin, dass der SemanticZoom keinen Bildlauf durchführt.One issue is that the SemanticZoom doesn't scroll. Dies liegt daran, dass in Windows 10 das Standardformat von GridView dazu veranlasst, dass es vertikal angeordnet wird (und die Entwurfs Richtlinien für Windows 10 empfehlen, dass es in neuen und in portierten apps auf diese Weise verwendet wird).This is because, in Windows 10, the default style of a GridView causes it to be laid out vertically (and the Windows 10 design guidelines recommend that we use it that way in new and in ported apps). Horizontale scrolleinstellungen in der Vorlage für benutzerdefinierte Elemente, die aus dem Projekt "Bookstore2_81" kopiert wurden (für die 8,1-App entworfen), stehen jedoch in Konflikt mit den Einstellungen für den vertikalen Bildlauf im Standardformat von Windows 10, das als Ergebnis der Portierung von uns in eine Windows 10-App angewendet wird.But, horizontal scrolling settings in the custom items panel template that we copied from the Bookstore2_81 project (which was designed for the 8.1 app) are in conflict with vertical scrolling settings in the Windows 10 default style that is being applied as a result of us having ported to a Windows 10 app. Das zweite Problem besteht darin, dass sich die Benutzeroberfläche der App noch nicht anpasst, um eine bestmögliche Anzeige in verschieden großen Fenstern und auf kleinen Geräten zu ermöglichen.A second thing is that the app doesn't yet adapt its user-interface to give the best experience in different-sized windows and on small devices. Drittens werden noch nicht die richtigen Stile und Pinsel verwendet, wodurch ein Großteil des Texts nicht sichtbar ist (einschließlich der Gruppenköpfe, auf die Sie zum Verkleinern klicken können).And, thirdly, the correct styles and brushes are not yet being used, resulting in much of the text being invisible (including the group headers that you can click to zoom out). In den nächsten drei Abschnitten (Designänderungen an semantischem Zoom und GridView, Adaptive UI und Universelle Formatierung) werden wir diese drei Probleme beheben.So, in the next three sections (SemanticZoom and GridView design changes, Adaptive UI, and Universal styling) we'll remedy those three issues.

Designänderungen an SemanticZoom und GridViewSemanticZoom and GridView design changes

Die Entwurfs Änderungen in Windows 10 für das semanticzoom -Steuerelement werden im Abschnitt semanticzoom-Änderungenbeschrieben.The design changes in Windows 10 to the SemanticZoom control are described in the section SemanticZoom changes. In diesem Abschnitt sind keine Überarbeitungen aufgrund der Änderungen erforderlich.We have no work to do in this section in response to those changes.

Die Änderungen an GridView werden im Abschnitt Änderungen an „GridView/ListView” beschrieben.The changes to GridView are described in the section GridView/ListView changes. Diese Änderungen erfordern einige geringfügige Anpassungen, die nachfolgend beschrieben werden.We have some very minor adjustments to make to adapt to those changes, as described below.

  • Legen Sie in SeZoUC.xaml in der ZoomedInItemsPanelTemplate``Orientation="Horizontal" und GroupPadding="0,0,0,20" fest.In SeZoUC.xaml, in ZoomedInItemsPanelTemplate, set Orientation="Horizontal" and GroupPadding="0,0,0,20".
  • Löschen Sie in SeZoUC.xaml ZoomedOutItemsPanelTemplate, und entfernen Sie das ItemsPanel- Attribut aus der verkleinerten Ansicht.In SeZoUC.xaml, delete ZoomedOutItemsPanelTemplate and remove the ItemsPanel attribute from the zoomed-out view.

Das war’s!And that's it!

Adaptive UIAdaptive UI

Nach dieser Änderung eignet sich das durch SeZoUC.xaml ermöglichte UI-Layout hervorragend zum Ausführen der App in einem breiten Fenster (nur auf Geräten mit großem Bildschirm möglich).After that change, the UI layout that SeZoUC.xaml gives us is great for when the app is running in a wide window (which is only possible on a device with a large screen). Handelt es sich jedoch um ein schmales Fenster der App (auf kleinen Geräten, kann aber auch auf großen Geräten vorkommen), eignet sich die Benutzerfläche in der Windows Phone Store-App wohl am besten.When the app's window is narrow, though (which happens on a small device, and can also happen on a large device), the UI that we had in the Windows Phone Store app is arguably most appropriate.

Wir können dazu auch das adaptive Visual State-Manager-Feature verwenden.We can use the adaptive Visual State Manager feature to achieve this. Wir werden Eigenschaften für visuelle Elemente einrichten, sodass die Benutzeroberfläche mit den kleineren Vorlagen, die wir in der Windows Phone Store-App verwenden, standardmäßig im schmalen Zustand angeordnet wird.We'll set properties on visual elements so that, by default, the UI is laid out in the narrow state using the smaller templates that we were using in the Windows Phone Store app. Dann werden wir erkennen, wann das Fenster der App breiter als eine bestimmte Größe ist bzw. dieser entspricht (gemessen in der Einheit effektive Pixel), und als Reaktion darauf die Eigenschaften der visuelle Elemente so ändern, dass wir ein größeres und breiteres Layout erhalten.Then, we'll detect when the app's window is wider-than-or-equal-to a specific size (measured in units of effective pixels), and in response, we'll change the properties of visual elements so that we get a larger, and wider, layout. Wir versetzen diese Eigenschaftsänderungen in einen visuellen Zustand und verwenden einen adaptiven Auslöser, um fortlaufend zu überwachen und zu bestimmen, ob der visuelle Zustand abhängig von der Breite des Fensters in effektiven Pixeln angewendet werden soll.We'll put those property changes in a visual state, and we'll use an adaptive trigger to continuously monitor and determine whether to apply that visual state, or not, depending on the width of the window in effective pixels. Die Auslösung erfolgt hierbei anhand der Fensterbreite, aber sie kann auch anhand der Fensterhöhe erfolgen.We're triggering on window width in this case, but it's possible to trigger on window height, too.

Eine minimale Fensterbreite von 548 Epx eignet sich in diesem Anwendungsfall, da dies der Größe des kleinsten Geräts entspricht, auf dem wir das breite Layout anzeigen können.A minimum window width of 548 epx is appropriate for this use case because that's the size of the smallest device we would want to show the wide layout on. Telefone sind in der Regel kleiner als 548 Epx, sodass wir auf solch einem kleinen Gerät das schmale Layout erhalten würden.Phones are typically smaller than 548 epx so on a small device like that we'd remain in the default narrow layout. Auf einem PC wird das Fenster standardmäßig so breit gestartet, dass der Wechsel zum breiten Zustand ausgelöst wird.On a PC, the window will launch by default wide enough to trigger the switch to the wide state. Dort können Sie das Fenster schmaler ziehen, um zwei Spalten für Elemente der Größe 250 x 250 anzuzeigen.From there, you'll be able to drag the window narrow enough to display two columns of the 250x250-sized items. Ist es etwas schmaler, wird der Auslöser deaktiviert, der breite Ansichtszustand wird gelöscht, und das schmale Standardlayout wird aktiviert.A little narrower than that and the trigger will deactivate, the wide visual state will be removed, and the default narrow layout will be in effect.

Welche Eigenschaften müssen wir also festlegen – und ändern – um diese beiden unterschiedlichen Layouts zu erreichen?So, what properties do we need to set—and change—to achieve these two different layouts? Es gibt zwei Alternativen, für die jeweils ein anderer Ansatz erforderlich ist.There are two alternatives and each entails a different approach.

  1. Wir können zwei SemanticZoom-Steuerelemente in unserem Markup platzieren.We can put two SemanticZoom controls in our markup. Eine ist eine Kopie des Markups, die wir in der Windows-Runtime 8. x-App verwenden (mithilfe von GridView -Steuerelementen darin) und standardmäßig reduziert.One would be a copy of the markup that we were using in the Windows Runtime 8.x app (using GridView controls inside it), and collapsed by default. Die andere Variante ist eine Kopie des Markups, das wir in der Windows Phone Store-App verwenden (mit ListView-Steuerelementen), und das standardmäßig eingeblendet sind.The other would be a copy of the markup that we were using in the Windows Phone Store app (using ListView controls inside it), and visible by default. Der visuelle Zustand würde die Sichtbarkeitseigenschaften der beiden SemanticZoom-Steuerelemente verändern.The visual state would switch the visibility properties of the two SemanticZoom controls. Dies wäre keine schwierige Aufgabe, die Technik ist im Allgemeinen jedoch nicht besonders effizient.This would require very little effort to achieve but this not, in general, a high-performance technique. Wenn Sie sie verwenden, sollten Sie ein Profil Ihrer App erstellen und sicherstellen, dass sie Ihre Leistungsvorgaben noch erfüllt.So, if you use it, you should profile your app and make sure it is still meeting your performance goals.
  2. Wir können einen einzelnen SemanticZoom mit ListView-Steuerelementen verwenden.We can use a single SemanticZoom containing ListView controls. Zur Umsetzung unserer beiden Layouts würden wir im breiten visuellen Zustand die Eigenschaften der ListView-Steuerelemente ändern, einschließlich der darauf angewendeten Vorlagen, damit sie ebenso wie die GridView angeordnet werden.To achieve our two layouts, in the wide visual state, we would change the properties of the ListView controls, including the templates that are applied to them, to cause them to lay out in the same way as a GridView does. Das kann die Leistung verbessern, aber es gibt so viele feine Unterschiede zwischen den verschiedenen Stilen und Vorlagen der GridView und ListView und ihren verschiedenen Elementtypen, dass diese Lösung schwieriger umzusetzen ist.This might perform better, but there are so many small differences between the various styles and templates of GridView and ListView and between their various item types that this is the more difficult solution to achieve. Diese Lösung ist zu diesem Zeitpunkt eng mit der Zuweisungsart der Standardstile und -vorlagen gekoppelt und daher für künftige Änderungen der Standards anfällig.This solution is also tightly coupled to the way the default styles and templates are designed at this moment in time, giving us a solution that's fragile and sensitive to any future changes to the defaults.

In dieser Fallstudie werden wir die erste Alternative untersuchen.In this case study, we're going to go with the first alternative. Wenn Sie möchten, können Sie aber auch die zweite Variante testen und prüfen, ob diese besser für Sie geeignet ist.But, if you like, you can try the second one and see if that works better for you. Führen Sie die folgenden Schritte aus, um die erste Alternative zu implementieren.Here are the steps to take to implement that first alternative.

  • Legen Sie für den SemanticZoom im Markup Ihres neuen Projekts x:Name="wideSeZo" und Visibility="Collapsed" fest.On the SemanticZoom in the markup in your new project, set x:Name="wideSeZo" and Visibility="Collapsed".
  • Kehren Sie zum Projekt Bookstore2_81. windowsphone zurück, und öffnen Sie die Datei "*. XAML".Go back to the Bookstore2_81.WindowsPhone project and open SeZoUC.xaml. Kopieren Sie das Elementmarkup für den SemanticZoom dieser Datei, und fügen Sie es unmittelbar nach wideSeZo in Ihr neues Projekt ein.Copy the SemanticZoom element markup out of that file and paste it immediately after wideSeZo in your new project. Geben Sie x:Name="narrowSeZo" für das Element ein, das Sie gerade eingefügt haben.Set x:Name="narrowSeZo" on element that you just pasted.
  • Jedoch benötigt narrowSeZo einige Stile, die wir noch nicht kopiert haben.But narrowSeZo needs a couple of styles that we haven't copied yet. In Bookstore2_81. windowsphone kopieren Sie die beiden Stile (AuthorGroupHeaderContainerStyle und ZoomedOutAuthorItemContainerStyle) aus sezouc. XAML, und fügen Sie Sie in das neue Projekt in bookstorestyles. XAML ein.Again in Bookstore2_81.WindowsPhone, copy the two styles (AuthorGroupHeaderContainerStyle and ZoomedOutAuthorItemContainerStyle) out of SeZoUC.xaml and paste them into BookstoreStyles.xaml in your new project.
  • Sie verfügen nun über zwei SemanticZoom-Elemente in Ihrer neuen Datei „SeZoUC.xaml“.You now have two SemanticZoom elements in your new SeZoUC.xaml. Umschließen Sie diese beiden Elemente in einem Grid.Wrap those two elements in a Grid.
  • Hängen Sie in „BookstoreStyles.xaml“ in Ihrem neuen Projekt das Wort Wide an diese drei Ressourcenschlüssel (und ihre Verweise in „SeZoUC.xaml“, jedoch nur auf die Verweise in wideSeZo) an: AuthorGroupHeaderTemplate, ZoomedOutAuthorTemplate und BookTemplate.In BookstoreStyles.xaml in your new project, append the word Wide to these three resource keys (and to their references in SeZoUC.xaml, but only to the references inside wideSeZo): AuthorGroupHeaderTemplate, ZoomedOutAuthorTemplate, and BookTemplate.
  • Öffnen Sie im Projekt Bookstore2_81. windowsphone den Eintrag bookstorestyles. XAML.In the Bookstore2_81.WindowsPhone project, open BookstoreStyles.xaml. Kopieren Sie aus dieser Datei dieselben drei Ressourcen (oben erwähnt), die zwei Sprung Listen-Element Konverter und die Namespace-Präfix Deklaration Windows_UI_XAML-_Steuerelemente_primitive, und fügen Sie Sie in das neue Projekt ein.From this file, copy those same three resources (mentioned above), and the two jump list item converters, and the namespace prefix declaration Windows_UI_Xaml_Controls_Primitives, and paste them all into BookstoreStyles.xaml in your new project.
  • Fügen Sie in „SeZoUC.xaml“ in Ihrem neuen Projekt dem oben hinzugefügten Grid das entsprechende Markup des Visual State-Managers hinzu.Finally, in SeZoUC.xaml in your new project, add the appropriate Visual State Manager markup to the Grid that you added above.
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="548"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="wideSeZo.Visibility" Value="Visible"/>
                        <Setter Target="narrowSeZo.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    ...

    </Grid>

Universelle FormatierungUniversal styling

Nun beheben wir einige Formatierungsprobleme, eines davon haben wir oben beim Kopieren aus dem alten Projekt kennengelernt.Now, let's fix up some styling issues, including one that we introduced above while copying from the old project.

  • Ändern Sie in „MainPage.xaml“ den Hintergrund von LayoutRoot in "{ThemeResource ApplicationPageBackgroundThemeBrush}".In MainPage.xaml, change LayoutRoot's Background to "{ThemeResource ApplicationPageBackgroundThemeBrush}".
  • Legen Sie in „BookstoreStyles.xaml“ den Wert von TitlePanelMargin der Ressource auf 0 (oder den Wert, der Ihnen passend erscheint) fest.In BookstoreStyles.xaml, set the value of the resource TitlePanelMargin to 0 (or whatever value looks good to you).
  • Legen Sie in „SeZoUC.xaml“ den Rand von wideSeZo auf 0 (oder den Wert, der Ihnen passend erscheint) fest.In SeZoUC.xaml, set the Margin of wideSeZo to 0 (or whatever value looks good to you).
  • Entfernen Sie in BookstoreStyles.xaml das Rand-Attribut aus der AuthorGroupHeaderTemplateWide.In BookstoreStyles.xaml, remove the Margin attribute from AuthorGroupHeaderTemplateWide.
  • Löschen Sie das FontFamily-Attribut aus AuthorGroupHeaderTemplate und ZoomedOutAuthorTemplate.Remove the FontFamily attribute from AuthorGroupHeaderTemplate and from ZoomedOutAuthorTemplate.
  • In Bookstore2_81 wurden die Ressourcen Schlüssel BookTemplateTitleTextBlockStyle, BookTemplateAuthorTextBlockStyleund PageTitleTextBlockStyle als Dereferenzierung verwendet, sodass ein einzelner Schlüssel in den beiden apps verschiedene Implementierungen besaß.Bookstore2_81 used the BookTemplateTitleTextBlockStyle, BookTemplateAuthorTextBlockStyle, and PageTitleTextBlockStyle resource 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 in der gesamten App durch TitleTextBlockStyle, CaptionTextBlockStyle bzw. HeaderTextBlockStyle.So, replace those references throughout the app with TitleTextBlockStyle, CaptionTextBlockStyle, and HeaderTextBlockStyle respectively. Mit der Visual Studio-Funktion In Dateien ersetzen können Sie dieses Vorhaben schnell und fehlerfrei umsetzen.You can use the Visual Studio Replace In Files feature to do this quickly and accurately. Dann können Sie diese drei ungenutzten Ressourcen löschen.You can then delete those three unused resources.
  • Ersetzen Sie in AuthorGroupHeaderTemplate das PhoneAccentBrush-Element durch SystemControlBackgroundAccentBrush, und legen Sie Foreground="White" für TextBlock fest, damit dies beim Ausführen mit der Mobilgerätfamilie richtig angezeigt wird.In AuthorGroupHeaderTemplate, replace PhoneAccentBrush with SystemControlBackgroundAccentBrush, and set Foreground="White" on the TextBlock so that it looks correct when running on the mobile device family.
  • Kopieren Sie in BookTemplateWide das Foreground-Attribut aus dem zweiten TextBlock in den ersten.In BookTemplateWide, copy the Foreground attribute from the second TextBlock to the first.
  • Ändern Sie in ZoomedOutAuthorTemplateWide den Verweis auf SubheaderTextBlockStyle (was nun ein wenig zu groß ist) in einen Verweis auf SubtitleTextBlockStyle.In ZoomedOutAuthorTemplateWide, change the reference to SubheaderTextBlockStyle (which is now a little too big) to a reference to SubtitleTextBlockStyle.
  • Da die verkleinerte Ansicht (die Sprungliste) die vergrößerte Ansicht auf der neuen Plattform nicht mehr überlagert, können wir das Background-Attribut aus der verkleinerten Ansicht von narrowSeZo löschen.The zoomed-out view (the jump list) no longer overlays the zoomed-in view in the new platform, so we can remove the Background attribute from the zoomed-out view of narrowSeZo.
  • Verschieben Sie ZoomedInItemsPanelTemplate von „SeZoUC.xaml“ in „BookstoreStyles.xaml“, damit sich alle Stile und Vorlagen in einer Datei befinden.So that all the styles and templates are in one file, move ZoomedInItemsPanelTemplate out of SeZoUC.xaml and into BookstoreStyles.xaml.

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

Die portierte Windows 10-App auf einem Desktopgerät, vergrößerte Ansicht, zwei Fenstergrößen

Die portierte Windows 10-APP, die auf einem Desktop Gerät ausgeführt wird, Zoomansicht, zwei FenstergrößenThe ported Windows 10 app running on a Desktop device, zoomed-in view, two sizes of window

Die portierte Windows 10-App auf einem Desktopgerät, verkleinerte Ansicht, zwei Fenstergrößen

Die portierte Windows 10-APP, die auf einem Desktop Gerät ausgeführt wird, Zoomansicht, zwei FenstergrößenThe ported Windows 10 app running on a Desktop device, zoomed-out view, two sizes of window

Die portierte Windows 10-App auf einem mobilen Gerät, vergrößerte Ansicht

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

Die portierte Windows 10-App auf einem mobilen Gerät, verkleinerte Ansicht

Die portierte Windows 10-APP, die auf einem mobilen Gerät ausgeführt wird, und ZoomansichtThe ported Windows 10 app running on a Mobile device, zoomed-out view

FazitConclusion

In dieser Fallstudie haben wir es mit einer aufwändigeren Benutzeroberfläche als im vorherigen Beispiel zu tun.This case study involved a more ambitious user interface than the previous one. Wie bei der vorherigen Fallstudie war für dieses Anzeigemodell kein großer Aufwand erforderlich, und unsere Anstrengungen konzentrierten sich in erster Linie auf die Umgestaltung der Benutzeroberfläche.As with the previous case study, this particular view model required no work at all, and our efforts went primarily into refactoring the user interface. Einige der Änderungen wurden dadurch erforderlich, dass wir zwei Projekte in eines kombinierten und dennoch viele Formfaktoren (letzten Endes mehr, als zuvor möglich waren) unterstützen wollten.Some of the changes were a necessary result of combining two projects into one while still supporting many form factors (in fact, many more than we could before). Einige wenige Änderungen aufgrund von Änderungen erforderlich, die an der Plattform vorgenommen wurden.A few of the changes were to do with changes that have been made to the platform.

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