Étude de cas de portage d’application Windows Runtime 8.x vers UWP : Bookstore2Windows Runtime 8.x to UWP case study: Bookstore2

Cette étude de cas, qui repose sur les informations fournies dans Bookstore1, commence par une application 8.1 universelle qui affiche des données groupées dans un contrôle SemanticZoom.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. Dans le modèle de vue, chaque instance de l' auteur de la classe représente le groupe de livres écrits par cet auteur, et dans le SemanticZoom, nous pouvons soit afficher la liste des livres regroupés par auteur, soit effectuer un zoom arrière pour afficher une liste de raccourcis des auteurs.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. Grâce à cette liste, vous pouvez vous déplacer beaucoup plus rapidement que si vous faisiez défiler la liste des ouvrages.The jump list affords much quicker navigation than scrolling through the list of books. Nous suivons la procédure de portage de l’application vers une application de plateforme Windows universelle (UWP) Windows 10.We walk through the steps of porting the app to a Windows 10 Universal Windows Platform (UWP) app.

Remarque    Lors de l’ouverture _ de Bookstore2Universal 10 dans Visual Studio, si vous voyez le message « mise à jour requise de Visual Studio », suivez les étapes décrites dans TargetPlatformVersion.Note   When opening Bookstore2Universal_10 in Visual Studio, if you see the message "Visual Studio update required", then follow the steps in TargetPlatformVersion.

TéléchargementsDownloads

Téléchargez l' _ application Bookstore2 81 Universal 8,1.Download the Bookstore2_81 Universal 8.1 app.

Téléchargez l' _ application Bookstore2Universal 10 Windows 10.Download the Bookstore2Universal_10 Windows 10 app.

Application 8.1 universelleThe Universal 8.1 app

Voici _ à quoi ressemble Bookstore2 81 : l’application que nous allons porter.Here’s what Bookstore2_81—the app that we're going to port—looks like. Il s’agit d’un défilement horizontal (défilement vertical sur Windows Phone) SemanticZoom présentant des livres regroupés par auteur.It's a horizontally-scrolling (vertically-scrolling on Windows Phone) SemanticZoom showing books grouped by author. Vous pouvez effectuer un zoom arrière vers la liste de raccourcis et, à partir de cette dernière, revenir à n’importe quel groupe.You can zoom out to the jump list and from there you can navigate back into any group. Cette application comporte deux parties principales : le modèle d’affichage, qui fournit la source de données groupées, et l’interface utilisateur, qui est liée à ce modèle d’affichage.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. Comme nous allons le voir, ces deux parties sont facilement portées depuis la technologie WinRT 8.1 vers Windows 10.As we'll see, both of these pieces port easily from WinRT 8.1 technology to Windows 10.

Bookstore2 - 81 sur Windows, vue zoomée

Bookstore2 _ 81 sur Windows, vue zooméeBookstore2_81 on Windows, zoomed-in view

Bookstore2 - 81 sur Windows, vue zoomée

Bookstore2 _ 81 sur Windows, vue zooméeBookstore2_81 on Windows, zoomed-out view

Bookstore2 - 81 sur Windows Phone, vue zoomée

Bookstore2 _ 81 sur Windows Phone, vue zooméeBookstore2_81 on Windows Phone, zoomed-in view

Bookstore2 - 81 sur Windows Phone, vue zoomée

Bookstore2 _ 81 sur Windows Phone, vue zooméeBookstore2_81 on Windows Phone, zoomed-out view

Portage d’une application vers un projet Windows 10Porting to a Windows 10 project

La _ solution Bookstore2 81 est un projet d’application universelle 8,1.The Bookstore2_81 solution is an 8.1 Universal App project. Le _ projet Bookstore2 81. Windows génère le package d’application pour Windows 8.1, et le _ projet Bookstore2 81. windowsphone génère le package d’application pour 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 est le projet qui contient le code source, les fichiers de balisage et d’autres ressources et ressources, qui sont utilisées par les deux autres projets.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.

Comme dans l’étude de cas précédente, l’option que nous allons sélectionner (parmi celles qui sont décrites à la section Si vous disposez d’une application 8.1 universelle) consiste à porter le contenu du projet partagé vers une application Windows 10 qui cible la famille d’appareils universelle.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.

Commencez par créer un projet Application vide (universelle Windows).Begin by creating a new Blank Application (Windows Universal) project. Nommez-le Bookstore2Universal _ 10.Name it Bookstore2Universal_10. Il s’agit des fichiers à copier à partir de Bookstore2 _ 81 vers Bookstore2Universal _ 10.These are the files to copy over from Bookstore2_81 to Bookstore2Universal_10.

Dans le projet partagéFrom the Shared project

  • Copiez le dossier contenant les fichiers PNG de l’image de couverture du livre (le dossier est \ ressources \ CoverImages).Copy the folder containing the book cover image PNG files (the folder is \Assets\CoverImages). Une fois le dossier copié, dans l’Explorateur de solutions, assurez-vous que l’option Afficher tous les fichiers est activée.After copying the folder, in Solution Explorer, make sure Show All Files is toggled on. Cliquez avec le bouton droit de la souris sur le dossier que vous avez copié et sélectionnez Inclure dans le projet.Right-click the folder that you copied and click Include In Project. Cette commande correspond à ce que nous avons voulu dire par « insertion » de fichiers ou de dossiers dans un projet.That command is what we mean by "including" files or folders in a project. Chaque fois que vous copiez un fichier ou un dossier, pour chaque copie, sélectionnez Actualiser dans Explorateur de solutions, puis incluez le fichier ou dossier dans le projet.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. Cette opération n’est pas nécessaire pour les fichiers dont vous modifiez la destination.There's no need to do this for files that you're replacing in the destination.
  • Copiez le dossier contenant le fichier source du modèle d’affichage (le dossier est \ ViewModel).Copy the folder containing the view model source file (the folder is \ViewModel).
  • Copiez le fichier MainPage.xaml et remplacez le fichier dans la destination.Copy MainPage.xaml and replace the file in the destination.

Dans le projet WindowsFrom the Windows project

  • Copiez le fichier BookstoreStyles.xaml.Copy BookstoreStyles.xaml. Nous l’utiliserons comme point de départ, car l’ensemble des clés de ressources figurant dans ce fichier sera résolu dans une application Windows 10, alors que certaines clés de ressources du fichier WindowsPhone correspondant ne le seront pas.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.
  • Copiez les fichiers SeZoUC.xaml et SeZoUC.xaml.cs.Copy SeZoUC.xaml and SeZoUC.xaml.cs. Nous allons commencer par la version de cet affichage pour Windows, qui est appropriée pour les fenêtres étendues. Ensuite, nous adapterons ce contenu à des fenêtres plus petites et, de ce fait, à des appareils plus petits.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.

Modifiez le code source et les fichiers de balisage que vous venez de copier, puis remplacez toutes les références à l' _ espace de noms Bookstore2 81 par 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. Une méthode rapide consiste à utiliser la fonctionnalité Remplacer dans les fichiers.A quick way to do that is to use the Replace In Files feature. Aucune modification du code n’est nécessaire dans le modèle d’affichage, ni dans tout autre code impératif.No code changes are needed in the view model, nor in any other imperative code. Mais, juste pour faciliter la visibilité de la version de l’application en cours d’exécution, remplacez la valeur retournée par la propriété Bookstore2Universal _ 10. BookstoreViewModel. AppName « Bookstore2 _ 81 » par « 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".

Vous pouvez maintenant générer l’application et l’exécuter.Right now, you can build and run. Voici à quoi ressemble notre nouvelle application UWP, sans aucun effort de portage vers Windows 10 pour l’instant.Here's how our new UWP app looks after having done no work yet to port it to Windows 10.

Application Windows 10 avec le code source initial modifié, exécutée sur un appareil de bureau (vue avec zoom avant)

L’application Windows 10 avec les modifications de code source initiales s’exécutant sur un appareil de bureau, vue zooméeThe Windows 10 app with initial source code changes running on a Desktop device, zoomed-in view

Application Windows 10 avec le code source initial modifié, exécutée sur un appareil de bureau (vue avec zoom arrière)

L’application Windows 10 avec les modifications de code source initiales s’exécutant sur un appareil de bureau, vue zooméeThe Windows 10 app with initial source code changes running on a Desktop device, zoomed-out view

Le modèle d’affichage et les vues avec zoom avant et arrière fonctionnent ensemble correctement. Cependant, il existe certains problèmes, qui les rendent difficiles à voir.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. Exemple de problème : l’élément SemanticZoom ne défile pas.One issue is that the SemanticZoom doesn't scroll. Cela est dû au fait que, dans Windows 10, le style par défaut d’un contrôle GridView entraîne sa mise en forme verticale (et les règles de conception de Windows 10 recommandent de l’utiliser de cette façon dans les applications nouvelles et dans les applications portées).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). Toutefois, les paramètres de défilement horizontal dans le modèle de panneau éléments personnalisés que nous avons copiés à partir du _ projet Bookstore2 81 (qui a été conçu pour l’application 8,1) sont en conflit avec les paramètres de défilement vertical dans le style par défaut de Windows 10 qui est appliqué suite à un portage vers une application Windows 10.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. Deuxième problème : l’application ne peut pas encore adapter son interface utilisateur à l’appareil de l’utilisateur, afin de lui offrir la meilleure expérience possible, quelle que soit la taille des fenêtres et de l’appareil.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. Enfin, les styles et pinceaux corrects ne sont pas encore utilisés, ce qui entraîne l’invisibilité d’une partie du texte (cela inclut les en-têtes de groupe sur lesquels vous pouvez cliquer pour effectuer un zoom arrière).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). Ainsi, dans les trois sections suivantes (Modifications de conception des éléments SemanticZoom et GridView, L’interface utilisateur adaptative, et Stylisation universelle) nous allons remédier à ces problèmes.So, in the next three sections (SemanticZoom and GridView design changes, Adaptive UI, and Universal styling) we'll remedy those three issues.

Modifications de conception des éléments SemanticZoom et GridViewSemanticZoom and GridView design changes

Les modifications apportées à la conception du contrôle SemanticZoom dans Windows 10 sont décrites à la section Modifications SemanticZoom.The design changes in Windows 10 to the SemanticZoom control are described in the section SemanticZoom changes. Nous n’avons aucune tâche à effectuer dans cette section suite à ces modifications.We have no work to do in this section in response to those changes.

Les modifications apportées à l’élément GridView sont décrites dans la section Modifications GridView/ListView.The changes to GridView are described in the section GridView/ListView changes. Nous devons effectuer quelques réglages mineurs pour nous adapter à ces modifications, comme décrit ci-dessous.We have some very minor adjustments to make to adapt to those changes, as described below.

  • Dans l’élément ZoomedInItemsPanelTemplate du fichier SeZoUC.xaml, définissez les paramètres Orientation="Horizontal" et GroupPadding="0,0,0,20".In SeZoUC.xaml, in ZoomedInItemsPanelTemplate, set Orientation="Horizontal" and GroupPadding="0,0,0,20".
  • Toujours dans ce fichier, supprimez l’élément ZoomedOutItemsPanelTemplate, puis supprimez l’attribut ItemsPanel de la vue avec zoom arrière.In SeZoUC.xaml, delete ZoomedOutItemsPanelTemplate and remove the ItemsPanel attribute from the zoomed-out view.

C’est tout !And that's it!

Interface utilisateur adaptativeAdaptive UI

Une fois cette modification effectuée, la disposition de l’interface utilisateur proposée par le fichier SeZoUC.xaml est très utile lorsque l’application s’exécute dans une fenêtre large (opération uniquement possible sur un appareil doté d’un grand écran).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). Par contre, lorsque la fenêtre d’application est étroite (comme sur un appareil de petite taille, voire sur certains appareils plus grands), l’interface utilisateur proposée par l’application du Windows Phone Store est sans aucun doute la plus appropriée.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.

Nous pouvons utiliser la fonction Gestionnaire d’état visuel adaptative pour y parvenir.We can use the adaptive Visual State Manager feature to achieve this. Nous allons définir des propriétés sur les éléments visuels afin que, par défaut, l’interface utilisateur présente une disposition étroite à l’aide des plus petits modèles que nous utilisions dans l’application du Windows Phone Store.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. Ensuite, nous détecterons les cas où la fenêtre de l’application est d’une largeur égale ou supérieure à une taille spécifique (mesurée en pixels effectifs), et nous modifierons alors les propriétés des éléments visuels comme il convient afin d’obtenir une disposition plus grande et plus large.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. Nous affecterons à ces changements de propriété un état visuel ; nous utiliserons un déclencheur adaptatif pour effectuer un suivi en continu et déterminer si l’état visuel doit ou non être appliqué, selon la largeur de la fenêtre en pixels effectifs.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. Dans ce cas précis, nous baserons le déclenchement sur la largeur de la fenêtre, mais il est également possible de choisir la hauteur de la fenêtre comme déclencheur.We're triggering on window width in this case, but it's possible to trigger on window height, too.

Une largeur minimale de 548 epx est appropriée pour ce cas d’utilisation, car cette valeur correspond à la taille de l’appareil le plus petit auquel nous voulons appliquer la disposition d’écran large.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. En général, les téléphones présentent une largeur inférieure à 548 epx. Ainsi, sur ce type d’appareil de petite taille, nous conserverons la disposition étroite par défaut.Phones are typically smaller than 548 epx so on a small device like that we'd remain in the default narrow layout. Sur un PC, par défaut, la fenêtre s’ouvre sur une largeur suffisante pour déclencher le passage à l’état large.On a PC, the window will launch by default wide enough to trigger the switch to the wide state. À partir de là, vous serez en mesure de faire glisser la fenêtre afin qu’elle soit suffisamment étroite pour afficher deux colonnes pour les éléments d’une taille de 250 x 250.From there, you'll be able to drag the window narrow enough to display two columns of the 250x250-sized items. Si vous utilisez une largeur inférieure, le déclencheur sera désactivé, l’état visuel large sera supprimé, et la disposition étroite par défaut continuera d’être appliquée.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.

Ainsi, quelles sont les propriétés que nous devons définir—et modifier—pour bénéficier de ces deux dispositions ?So, what properties do we need to set—and change—to achieve these two different layouts? Il existe deux solutions, qui font chacune appel à une méthode différente.There are two alternatives and each entails a different approach.

  1. Nous pouvons placer deux contrôles SemanticZoom dans notre balisage.We can put two SemanticZoom controls in our markup. Il peut s’agir d’une copie de la balise que nous utilisons dans le Windows Runtime application 8. x (à l’aide de contrôles GridView à l’intérieur de celle-ci) et réduite par défaut.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. Quant à l’autre, il correspond à une copie du balisage que nous avons utilisé dans l’application du Windows Phone Store (en utilisant des contrôles ListView à l’intérieur de cette copie), visible par défaut.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. L’état visuel fait alors basculer les propriétés de visibilité des deux contrôles SemanticZoom.The visual state would switch the visibility properties of the two SemanticZoom controls. L’exécution de cette technique nécessite peu d’efforts, mais ses performances sont généralement moyennes.This would require very little effort to achieve but this not, in general, a high-performance technique. Ainsi, si vous l’utilisez, vous devez profiler votre application et vous assurer qu’elle répond toujours à vos objectifs en termes de performances.So, if you use it, you should profile your app and make sure it is still meeting your performance goals.
  2. Nous pouvons utiliser un seul élément SemanticZoom contenant des contrôles ListView.We can use a single SemanticZoom containing ListView controls. Pour obtenir nos deux dispositions, dans l’état visuel large, nous modifions les propriétés des contrôles ListView, y compris des modèles qui leur sont appliqués, pour entraîner leur disposition de la même manière que celle d’un élément GridView.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. Cette solution offre des performances sans doute meilleures, mais se révèle également la plus difficile à appliquer, à cause du nombre de petites différences entre les styles et modèles des éléments GridView et ListView, et entre leurs divers types d’éléments.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. Cette solution est étroitement associée au mode de conception des styles et modèles par défaut à ce moment précis ; nous obtenons une solution fragile et sensible aux éventuelles modifications futures des valeurs par défaut.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.

Dans cette étude de cas, nous allons choisir la première solution.In this case study, we're going to go with the first alternative. Cependant, vous pouvez choisir la deuxième méthode, si elle vous convient mieux.But, if you like, you can try the second one and see if that works better for you. Voici les étapes à suivre pour implémenter cette première solution.Here are the steps to take to implement that first alternative.

  • Sur le SemanticZoom dans le balisage de votre nouveau projet, définissez x:Name="wideSeZo" et Visibility="Collapsed" .On the SemanticZoom in the markup in your new project, set x:Name="wideSeZo" and Visibility="Collapsed".
  • Revenez au projet Bookstore2 _ 81. windowsphone et ouvrez SeZoUC. Xaml.Go back to the Bookstore2_81.WindowsPhone project and open SeZoUC.xaml. Copiez le balisage de l’élément SemanticZoom de ce fichier et collez-le juste après l’élément wideSeZo dans votre nouveau projet.Copy the SemanticZoom element markup out of that file and paste it immediately after wideSeZo in your new project. Définissez x:Name="narrowSeZo" sur l’élément que vous venez de coller.Set x:Name="narrowSeZo" on element that you just pasted.
  • Toutefois, l’élément narrowSeZo nécessite quelques styles que nous n’avons pas encore copiés.But narrowSeZo needs a couple of styles that we haven't copied yet. Là encore, dans Bookstore2 _ 81. windowsphone, copiez les deux styles ( AuthorGroupHeaderContainerStyle et ZoomedOutAuthorItemContainerStyle ) en dehors de SeZoUC. xaml et collez-les dans BookstoreStyles. xaml dans votre nouveau projet.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.
  • Vous avez maintenant deux éléments SemanticZoom dans votre nouveau SeZoUC. Xaml.You now have two SemanticZoom elements in your new SeZoUC.xaml. Incluez ces deux éléments dans un élément Grid.Wrap those two elements in a Grid.
  • Dans le fichier BookstoreStyles.xaml de votre nouveau projet, ajoutez le mot Wide à ces trois clés de ressources (et à leurs références dans le fichier SeZoUC.xaml, mais uniquement aux références à l’intérieur de l’élément wideSeZo) : AuthorGroupHeaderTemplate, ZoomedOutAuthorTemplate, et 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.
  • Dans le _ projet Bookstore2 81. windowsphone, ouvrez BookstoreStyles. Xaml.In the Bookstore2_81.WindowsPhone project, open BookstoreStyles.xaml. À partir de ce fichier, copiez ces trois mêmes ressources (mentionnées ci-dessus), et les deux convertisseurs d’élément de liste de saut, et la déclaration de préfixe d’espace de noms Windows _ interface _ XAML _ contrôles _ primitives, puis collez-les dans BookstoreStyles. xaml dans votre nouveau projet.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.
  • Enfin, dans le fichier SeZoUC.xaml de votre nouveau projet, ajoutez le balisage de gestionnaire d’état visuel approprié pour l’élément Grid que vous avez ajouté ci-dessus.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>

Stylisation universelleUniversal styling

Nous allons désormais résoudre certains problèmes de style, y compris celui que nous avons introduit ci-dessus lors de l’opération de copie à partir de l’ancien projet.Now, let's fix up some styling issues, including one that we introduced above while copying from the old project.

  • Dans le fichier MainPage.xaml, remplacez l’arrière-plan de l’élément LayoutRoot par "{ThemeResource ApplicationPageBackgroundThemeBrush}".In MainPage.xaml, change LayoutRoot's Background to "{ThemeResource ApplicationPageBackgroundThemeBrush}".
  • Dans le fichier BookstoreStyles.xaml, définissez la valeur de la ressource TitlePanelMargin sur 0 (ou sur toute valeur qui vous convienne).In BookstoreStyles.xaml, set the value of the resource TitlePanelMargin to 0 (or whatever value looks good to you).
  • Dans le fichier SeZoUC.xaml, définissez la marge de l’élément wideSeZo sur 0 (ou sur toute valeur qui vous convienne).In SeZoUC.xaml, set the Margin of wideSeZo to 0 (or whatever value looks good to you).
  • Dans le fichier BookstoreStyles.xaml, supprimez l’attribut Margin de l’élément AuthorGroupHeaderTemplateWide.In BookstoreStyles.xaml, remove the Margin attribute from AuthorGroupHeaderTemplateWide.
  • Supprimez l’attribut FontFamily des éléments AuthorGroupHeaderTemplate et ZoomedOutAuthorTemplate.Remove the FontFamily attribute from AuthorGroupHeaderTemplate and from ZoomedOutAuthorTemplate.
  • Bookstore2 _ 81 a utilisé BookTemplateTitleTextBlockStyle les BookTemplateAuthorTextBlockStyle clés de PageTitleTextBlockStyle ressource, et comme une indirection, de sorte qu’une clé unique avait des implémentations différentes dans les deux applications.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. Nous n’avons plus besoin de cette indirection ; nous pouvons référencer directement les styles du système.We don't need that indirection any more; we can just reference system styles directly. Par conséquent, dans toute l’application, remplacez ces références par TitleTextBlockStyle, CaptionTextBlockStyle et HeaderTextBlockStyle, respectivement.So, replace those references throughout the app with TitleTextBlockStyle, CaptionTextBlockStyle, and HeaderTextBlockStyle respectively. Vous pouvez également utiliser la fonction Remplacer dans les fichiers de Visual Studio pour effectuer cette opération rapidement et de manière précise.You can use the Visual Studio Replace In Files feature to do this quickly and accurately. Vous pouvez ensuite supprimer ces trois ressources inutilisées.You can then delete those three unused resources.
  • Dans AuthorGroupHeaderTemplate, remplacez l’élément PhoneAccentBrush par SystemControlBackgroundAccentBrush et définissez Foreground="White" sur l’élément TextBlock afin qu’il apparaisse correctement lors de l’exécution sur la famille d’appareils mobiles.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.
  • Dans l’élément BookTemplateWide, copiez l’attribut Foreground du deuxième élément TextBlock vers le premier.In BookTemplateWide, copy the Foreground attribute from the second TextBlock to the first.
  • Dans l’élément ZoomedOutAuthorTemplateWide, remplacez la référence à SubheaderTextBlockStyle (un peu trop importante, désormais) par une référence à SubtitleTextBlockStyle.In ZoomedOutAuthorTemplateWide, change the reference to SubheaderTextBlockStyle (which is now a little too big) to a reference to SubtitleTextBlockStyle.
  • La vue avec zoom arrière (liste de raccourcis) ne se superpose plus à la vue avec zoom avant dans la nouvelle plateforme. De ce fait, nous pouvons supprimer l’attribut Background de la vue avec zoom arrière de l’élément narrowSeZo.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.
  • Pour que tous les styles et modèles figurent dans un seul fichier, retirez l’élément ZoomedInItemsPanelTemplate du fichier SeZoUC.xaml et placez-le dans le fichier BookstoreStyles.xaml.So that all the styles and templates are in one file, move ZoomedInItemsPanelTemplate out of SeZoUC.xaml and into BookstoreStyles.xaml.

Une fois cette séquence d’opérations de stylisation effectuée, l’application ressemble à ceci.That last sequence of styling operations leaves the app looking like this.

Application Windows 10 portée, exécutée sur un appareil de bureau (vue avec zoom avant et deux tailles de fenêtres)

Application Windows 10 portée, exécutée sur un appareil de bureau (vue avec zoom avant et deux tailles de fenêtres)The ported Windows 10 app running on a Desktop device, zoomed-in view, two sizes of window

Application Windows 10 portée, exécutée sur un appareil de bureau (vue avec zoom arrière et deux tailles de fenêtres)

Application Windows 10 portée, exécutée sur un appareil de bureau (vue avec zoom arrière et deux tailles de fenêtres)The ported Windows 10 app running on a Desktop device, zoomed-out view, two sizes of window

Application Windows 10 portée, exécutée sur un appareil mobile (vue avec zoom avant)

L’application Windows 10 portée s’exécutant sur un appareil mobile, vue zooméeThe ported Windows 10 app running on a Mobile device, zoomed-in view

Application Windows 10 portée, exécutée sur un appareil mobile (vue avec zoom arrière)

L’application Windows 10 portée s’exécutant sur un appareil mobile, vue zooméeThe ported Windows 10 app running on a Mobile device, zoomed-out view

ConclusionConclusion

Cette étude de cas reposait sur une interface utilisateur plus ambitieuse que celle de l’étude précédente.This case study involved a more ambitious user interface than the previous one. Comme pour l’étude de cas précédente, ce modèle d’affichage particulier n’a requis aucun effort. Nous avons surtout dû nous concentrer sur la refactorisation de l’interface utilisateur.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. Certaines modifications inévitables ont été le fruit de la combinaison de deux projets en un seul, qui devait toujours prendre en charge de nombreux facteurs de forme (en fait, nettement plus qu’auparavant).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). Certaines de ces modifications étaient liées aux changements apportés à la plateforme.A few of the changes were to do with changes that have been made to the platform.

Dans l’étude de cas suivante, QuizGame, nous examinons l’accès aux données groupées et leur affichage.The next case study is QuizGame, in which we look at accessing and displaying grouped data.