Portage du balisage XAML et de la couche interface utilisateur de Windows Runtime 8.x vers UWPPorting Windows Runtime 8.x XAML and UI to UWP

Rubrique précédente : Résolution des problèmes.The previous topic was Troubleshooting.

La pratique de définition de l’interface utilisateur sous la forme de balisage XAML déclaratif convertit extrêmement bien des applications 8.1 universelles en applications UWP.The practice of defining UI in the form of declarative XAML markup translates extremely well from Universal 8.1 apps to Universal Windows Platform (UWP) apps. Vous constaterez que la majeure partie de votre balisage est compatible, même si vous devez peut-être apporter quelques ajustements aux clés de ressources système ou aux modèles personnalisés que vous utilisez.You'll find that most of your markup is compatible, although you may need to make some adjustments to the system Resource keys or custom templates that you're using. Le code impératif de vos modèles d’affichage nécessitera peu ou pas de modifications.The imperative code in your view models will require little or no change. Une grande partie, voire la majeure partie, du code de votre couche de présentation qui manipule les éléments d’interface utilisateur devrait également être simple à porter.Even much, or most, of the code in your presentation layer that manipulates UI elements should also be straightforward to port.

Code impératifImperative code

Si vous souhaitez simplement accéder à l’étape de construction de votre projet, vous pouvez commenter ou remplacer tout code non essentiel.If you just want to get to the stage where your project builds, you can comment or stub out any non-essential code. Vous pouvez ensuite itérer un problème à la fois et consulter les rubriques suivantes de cette section (ainsi que la rubrique précédente : Résolution des problèmes), jusqu’à ce que les problèmes de génération et d’exécution soient supprimés et le portage terminé.Then iterate, one issue at a time, and refer to the following topics in this section (and the previous topic: Troubleshooting), until any build and runtime issues are ironed-out and your port is complete.

Interface utilisateur adaptative/réactiveAdaptive/responsive UI

Étant donné que votre application peut s’exécuter sur une large gamme d’appareils—présentant chacun différentes tailles d’écran et résolutions—, vous pouvez compléter la procédure minimale de portage de votre application en adaptant votre interface utilisateur afin d’en optimiser l’aspect sur ces appareils.Because your app can run on a potentially wide range of devices—each with its own screen size and resolution—you'll want to go beyond the minimal steps to port your app and you'll want to tailor your UI to look its best on those devices. Vous pouvez utiliser la fonctionnalité adaptative Gestionnaire d’état visuel pour détecter dynamiquement la taille de la fenêtre et modifier la disposition en conséquence. Un exemple de procédure à suivre est décrit à la section Interface utilisateur adaptative de la rubrique d’étude de cas Bookstore2.You can use the adaptive Visual State Manager feature to dynamically detect window size and to change layout in response, and an example of how to do that is shown in the section Adaptive UI in the Bookstore2 case study topic.

Gestion du bouton PrécédentBack button handling

Pour les applications 8,1 universelles, Windows Runtime applications 8. x Windows Phone et les applications du Windows Store ont des approches différentes de l’interface utilisateur que vous affichez et des événements que vous gérez pour le bouton précédent.For Universal 8.1 apps, Windows Runtime 8.x apps and Windows Phone Store apps have different approaches to the UI you show and the events you handle for the back button. Pour les applications Windows 10, en revanche, vous pouvez adopter une seule et même approche dans votre application.But, for Windows 10 apps, you can use a single approach in your app. Sur les appareils mobiles, le bouton est fourni à votre intention sous la forme d’un bouton capacitif sur l’appareil ou d’un bouton dans l’interpréteur de commandes.On mobile devices, the button is provided for you as a capacitive button on the device, or as a button in the shell. Sur un appareil de bureau, vous ajoutez un bouton au chrome de votre application chaque fois que cette dernière permet la navigation vers l’arrière. Ceci est indiqué dans la barre de titre des applications avec fenêtres ou dans la barre des tâches en mode tablette.On a desktop device, you add a button to your app's chrome whenever back-navigation is possible within the app, and this appears in the title bar for windowed apps or in the task bar for Tablet mode. L’événement du bouton précédent est un concept universel dans toutes les familles d’appareils, et les boutons implémentés dans le matériel ou dans les logiciels déclenchent le même événement de requête .The back button event is a universal concept across all device families, and buttons implemented in hardware or in software raise the same BackRequested event.

L’exemple ci-après fonctionne pour toutes les familles d’appareils et est adapté aux cas dans lesquels le même traitement s’applique à toutes les pages et où vous n’avez pas besoin de confirmer la navigation (par exemple, pour signaler les modifications non enregistrées).The example below works for all device families and it is good for cases where the same processing applies to all pages, and where you do not need to confirm navigation (for example, to warn about unsaved changes).

   // app.xaml.cs

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        [...]

        Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
        rootFrame.Navigated += RootFrame_Navigated;
    }

    private void RootFrame_Navigated(object sender, NavigationEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        // Note: On device families that have no title bar, setting AppViewBackButtonVisibility can safely execute 
        // but it will have no effect. Such device families provide back button UI for you.
        if (rootFrame.CanGoBack)
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Visible;
        }
        else
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Collapsed;
        }
    }

    private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        if (rootFrame.CanGoBack)
        {
            rootFrame.GoBack();
        }
    }

Il existe également une approche unique pour toutes les familles d’appareils concernant la fermeture de l’application par programme.There's also a single approach for all device families for programmatically exiting the app.

   Windows.UI.Xaml.Application.Current.Exit();

IcônesCharms

Vous n’avez pas besoin de modifier les parties de votre code qui s’intègrent à des icônes, mais vous devez ajouter certains éléments d’interface utilisateur à votre application afin de remplacer la barre Icônes, absente de l’environnement de Windows 10.You don't need to change any of your code that integrates with charms, but you do need to add some UI to your app to take the place of the Charms bar, which is not a part of the Windows 10 shell. Une application 8.1 universelle s’exécutant sur Windows 10 possède sa propre interface utilisateur de remplacement, fournie par le chrome rendu par le système dans la barre de titre de l’application.A Universal 8.1 app running on Windows 10 has its own replacement UI provided by system-rendered chrome in the app's title bar.

Contrôles et styles de contrôle et modèlesControls, and control styles and templates

Une application universelle 8.1 s’exécutant sur Windows 10 conserve l’apparence et le comportement de la version 8.1 pour les contrôles.A Universal 8.1 app running on Windows 10 will retain the 8.1 appearance and behavior with respect to controls. Toutefois, lorsque vous portez cette application vers une application Windows 10, certaines différences dans l’apparence et le comportement sont à prendre en compte.But, when you port that app to a Windows 10 app, there are some differences in appearance and behavior to be aware of. L’architecture et la conception des contrôles étant essentiellement inchangées pour les applications Windows 10, les modifications sont principalement liées au langage de conception, à la simplification et à l’amélioration de la convivialité.The architecture and design of controls is essentially unchanged for Windows 10 apps, so the changes are mostly around the design language, simplification, and usability improvements.

Remarque    L’état visuel PointerOver est pertinent dans les styles/modèles personnalisés dans les applications Windows 10 et dans Windows Runtime applications 8. x, mais pas dans les applications Windows Phone Store.Note   The PointerOver visual state is relevant in custom styles/templates in Windows 10 apps and in Windows Runtime 8.x apps, but not in Windows Phone Store apps. Pour cette raison (et en raison des clés de ressources système prises en charge pour les applications Windows 10), nous vous recommandons de réutiliser les styles/modèles personnalisés à partir de vos applications Windows Runtime 8. x lorsque vous portez votre application vers Windows 10.For this reason (and because of the system resource keys that are supported for Windows 10 apps), we recommend that you re-use the custom styles/templates from your Windows Runtime 8.x apps when you're porting your app to Windows 10. Si vous voulez avoir l’assurance que vos styles/modèles personnalisés utilisent le dernier jeu d’états visuels et bénéficient des améliorations de performances apportées aux styles/modèles par défaut, modifiez une copie du nouveau modèle par défaut de Windows 10 et réappliquez votre personnalisation à ce dernier.If you want to be certain that your custom styles/templates are using the latest set of visual states, and are benefitting from performance improvements made to the default styles/templates, then edit a copy of the new Windows 10 default template and re-apply your customization to that. Un exemple d’amélioration des performances correspond à la suppression de tous les éléments Border qui délimitaient précédemment un élément ContentPresenter ou Panel et au rendu de la bordure par un élément enfant.One example of a performance improvement is that any Border that formerly enclosed a ContentPresenter or a Panel has been removed and a child element now renders the border.

Voici quelques exemples plus spécifiques de modifications apportées aux contrôles.Here are some more specific examples of changes to controls.

Nom du contrôleControl name ModifierChange
AppBarAppBar Si vous utilisez le contrôle AppBar (qu’il est préférable de remplacer par CommandBar), il n’est pas masqué par défaut dans une application Windows 10.If you are using the AppBar control (CommandBar is recommended instead), then it is not hidden by default in a Windows 10 app. Vous pouvez contrôler cela à l’aide de la propriété appbar. ClosedDisplayMode .You can control this with the AppBar.ClosedDisplayMode property.
AppBar, CommandBarAppBar, CommandBar Dans une application Windows 10, AppBar et CommandBar comportent un bouton Voir plus (ellipse).In a Windows 10 app, AppBar and CommandBar have a See more button (the ellipsis).
CommandBarCommandBar Dans une application Windows Runtime 8. x, les commandes secondaires d’un CommandBar sont toujours visibles.In a Windows Runtime 8.x app, the secondary commands of a CommandBar are always visible. Dans une application du Windows Phone Store et dans une application Windows 10, ces commandes n’apparaissent pas tant que la barre de commandes n’est pas ouverte.In a Windows Phone Store app, and in a Windows 10 app, the don't appear until the command bar opens.
CommandBarCommandBar Pour une application du Windows Phone Store, la valeur de CommandBar.IsSticky n’a pas d’influence sur la possibilité d’abandon interactif de la barre.For a Windows Phone Store app, the value of CommandBar.IsSticky does not affect whether or not the bar is light-dismissible. Pour une application Windows 10, si IsSticky est défini sur true, l’élément CommandBar ignorera tout mouvement d’abandon interactif.For a Windows 10 app, if IsSticky is set to true, then the CommandBar disregards a light dismiss gesture.
CommandBarCommandBar Dans une application Windows 10, CommandBar ne gère pas les événements EdgeGesture. Completed ou UIElement. RightTapped .In a Windows 10 app, CommandBar does not handle the EdgeGesture.Completed nor UIElement.RightTapped events. Il ne réagit pas non plus à un appui ni à un balayage vers le haut.Nor does it respond to a tap nor a swipe up. Vous avez toujours la possibilité de gérer ces événements et de définir IsOpen.You still have the option to handle these events and set IsOpen.
DatePicker,TimePickerDatePicker, TimePicker Passez en revue l’apparence de votre application avec les changements visuels apportés à DatePicker et TimePicker.Review how your app looks with the visual changes to DatePicker and TimePicker. Pour une application Windows 10 s’exécutant sur un appareil mobile, ces contrôles n’accèdent plus à une page de sélection, mais à une fenêtre contextuelle révocable à l’aide d’un léger mouvement.For a Windows 10 app running on a mobile device, these controls no longer navigate to a selection page but instead use a light-dismissible popup.
DatePicker,TimePickerDatePicker, TimePicker Dans une application Windows 10, vous ne pouvez pas mettre DatePicker ou timepicker à l’intérieur d’un volant. Si vous souhaitez que ces contrôles s’affichent dans un contrôle de type popup, vous pouvez utiliser DatePickerFlyout et TimePickerFlyout.In a Windows 10 app, you can't put DatePicker or TimePicker inside a fly-out. If you want those controls to be displayed in a popup-type control, then you can use DatePickerFlyout and TimePickerFlyout.
GridView, ListViewGridView, ListView Pour GridView / ListView, consultez modifications de GridView et de ListView.For GridView/ListView, see GridView and ListView changes.
PrincipalHub Dans une application du Windows Store Windows Phone, un contrôle de concentrateur encapsule la dernière section jusqu’au premier.In a Windows Phone Store app, a Hub control wraps around from the last section to the first. Dans une application Windows Runtime 8. x et dans une application Windows 10, les sections de concentrateur ne sont pas entourées.In a Windows Runtime 8.x app, and in a Windows 10 app, hub sections do not wrap around.
PrincipalHub Dans une application du Windows Phone Store, l’image d’arrière-plan d’un contrôle Hub se déplace en parallaxe par rapport aux sections de hub.In a Windows Phone Store app, a Hub control's background image moves in parallax relative to the hub sections. Dans une application Windows Runtime 8. x et dans une application Windows 10, la parallaxe n’est pas utilisée.In a Windows Runtime 8.x app, and in a Windows 10 app, parallax is not used.
PrincipalHub Dans une application 8.1 universelle, la propriété HubSection.IsHeaderInteractive rend interactifs l’en-tête de section et le glyphe de chevron rendu en regard de ce dernier.In a Universal 8.1 app, the HubSection.IsHeaderInteractive property causes the section header—and a chevron glyph rendered next to it—to become interactive. Dans une application Windows 10, il existe une affordance interactive « Voir plus » à côté de l’en-tête, mais l’en-tête proprement dit n’est pas interactif.In a Windows 10 app, there is an interactive "See more" affordance beside the header, but the header itself is not interactive. IsHeaderInteractive détermine toujours si l’interaction déclenche l’événement Hub.SectionHeaderClick.IsHeaderInteractive still determines whether interaction raises the Hub.SectionHeaderClick event.
MessageDialogMessageDialog Si vous utilisez MessageDialog, préférez ContentDialog, plus flexible.If you're using MessageDialog, then consider instead using the more flexible ContentDialog. Voir également l’exemple d’éléments de base d’une interface utilisateur XAML (en anglais).Also, see the XAML UI Basics sample.
ListPickerFlyout, PickerFlyoutListPickerFlyout, PickerFlyout ListPickerFlyout et PickerFlyout sont déconseillés pour une application Windows 10.ListPickerFlyout and PickerFlyout are deprecated for a Windows 10 app. Dans le cas d’un menu volant à sélection unique, utilisez MenuFlyout ; pour des expériences plus complexes, préférez Flyout.For a single selection fly-out, use MenuFlyout; for more complex experiences, use Flyout.
Zone de mot de passePasswordBox La propriété PasswordBox. IsPasswordRevealButtonEnabled est déconseillée dans une application Windows 10 et son paramétrage n’a aucun effet.The PasswordBox.IsPasswordRevealButtonEnabled property is deprecated in a Windows 10 app, and setting it has no effect. Utilisez PasswordBox. PasswordRevealMode à la place, qui prend par défaut la valeur Peek (dans laquelle un glyphe visuel est affiché, comme dans une application Windows Runtime 8. x).Use PasswordBox.PasswordRevealMode instead, which defaults to Peek (in which an eye glyph is displayed, like in a Windows Runtime 8.x app). Voir également l’article Recommandations en matière de zones de mot de passe.Also, see Guidelines for password boxes.
PivotPivot Le contrôle Pivot est désormais universel et n’est plus limité aux appareils mobiles.The Pivot control is now universal, it is no longer limited to use on mobile devices.
SearchBoxSearchBox Bien que la méthode SearchBox soit implémentée dans la famille d’appareils universelle, elle n’est pas entièrement fonctionnelle sur des appareils mobiles.Although SearchBox is implemented in the Universal device family, it is not fully functional on mobile devices. Voir Remplacement de SearchBox par AutoSuggestBox.See SearchBox deprecated in favor of AutoSuggestBox.
SemanticZoomSemanticZoom Pour SemanticZoom, voir Modifications SemanticZoom.For SemanticZoom, see SemanticZoom changes.
ScrollViewerScrollViewer Certaines propriétés par défaut de ScrollViewer ont changé.Some default properties of ScrollViewer have changed. HorizontalScrollMode présente la valeur Auto, VerticalScrollMode la valeur Auto, et ZoomMode la valeur Disabled.HorizontalScrollMode is Auto, VerticalScrollMode is Auto, and ZoomMode is Disabled. Si les nouvelles valeurs par défaut ne sont pas adaptées à votre application, vous pouvez les modifier dans un style ou sous forme de valeurs locales sur le contrôle proprement dit.If the new default values are not appropriate for your app, then you can change them either in a style or as local values on the control itself.
TextBoxTextBox Dans une application Windows Runtime 8. x, la vérification orthographique est désactivée par défaut pour une zone de texte.In a Windows Runtime 8.x app, spell-checking is off by default for a TextBox. Dans une application du Windows Phone Store et dans une application Windows 10, cette vérification est activée par défaut.In a Windows Phone Store app, and in a Windows 10 app, it is on by default.
TextBoxTextBox La taille de police par défaut d’un élément TextBox est passée de 11 à 15.The default font size for a TextBox has changed from 11 to 15.
TextBoxTextBox La valeur par défaut de TextBox.TextReadingOrder est passée de Default à DetectFromContent.The default value of TextBox.TextReadingOrder has changed from Default to DetectFromContent. Si cette valeur ne convient pas, utilisez UseFlowDirection.If that's undesirable, then use UseFlowDirection. La valeur Default est déconseillée.Default is deprecated.
DiversVarious La couleur d’accentuation s’applique aux applications du Windows Phone Store et aux applications Windows 10, mais pas aux applications Windows Runtime 8. x.Accent color applies to a Windows Phone Store apps, and to Windows 10 apps, but not to Windows Runtime 8.x apps.

Pour plus d’informations sur les contrôles des applications UWP, voir Contrôles par fonction, Liste des contrôles et Recommandations relatives aux contrôles.For more info on UWP app controls, see Controls by function, Controls list, and Guidelines for controls.

Langage de conception dans Windows 10Design language in Windows 10

Il existe certaines différences légères, mais importantes dans le langage de conception entre les applications universelles 8.1 et Windows 10.There are some small but important differences in design language between Universal 8.1 apps and Windows 10 apps. Pour plus de détails, voir Conception.For all the details, see Design. Malgré les changements en matière de langage, nos principes de conception restent cohérents : être attentif aux détails, mais toujours viser la simplicité en se concentrant sur le contenu sans superflu, en réduisant à tout prix les éléments visuels et en restant authentique en matière de domaine numérique ; utiliser la hiérarchie visuelle, en particulier avec la typographie ; concevoir à l’aide d’une grille et donner vie à vos expériences grâce à des animations fluides.Despite the design language changes, our design principles remain consistent: be attentive to detail but always strive for simplicity through focusing on content not chrome, fiercely reducing visual elements, and remaining authentic to the digital domain; use visual hierarchy especially with typography; design on a grid; and bring your experiences to life with fluid animations.

Pixels effectifs, distance d’affichage et facteurs d’échelleEffective pixels, viewing distance, and scale factors

Auparavant, les pixels d’affichage permettaient d’extraire la taille et la disposition des éléments d’interface utilisateur de la taille physique et de la résolution réelles des appareils.Previously, view pixels were the way to abstract the size and layout of UI elements away from the actual physical size and resolution of devices. Ces pixels ont évolué de manière à devenir des « pixels effectifs ». Voici ce que cette expression désigne, sa signification et la valeur ajoutée proposée.View pixels have now evolved into effective pixels, and here's an explanation of that term, what it means, and the extra value it offers.

Le terme « résolution » fait référence à la mesure de la densité des pixels et non, comme on le pense souvent, au nombre de pixels.The term "resolution" refers to a measure of pixel density and not, as is commonly thought, pixel count. La « résolution effective » est la façon dont les pixels physiques qui composent une image ou un glyphe apparaissent à l’œil, étant donné les différences liées à la distance de visualisation et à la taille des pixels physiques sur l’appareil (la densité de pixels étant l’inverse de la taille des pixels physiques)."Effective resolution" is the way the physical pixels that compose an image or glyph resolve to the eye given differences in viewing distance and the physical pixel size of the device (pixel density being the reciprocal of physical pixel size). La résolution effective est une bonne unité de mesure pour créer une expérience, car elle est centrée sur l’utilisateur.Effective resolution is a good metric to build an experience around because it is user-centric. La compréhension de tous ces facteurs et le contrôle de la taille des éléments d’interface utilisateur vous permettent de tirer parti de l’expérience utilisateur.By understanding all the factors, and controlling the size of UI elements, you can make the user's experience a good one.

Les différents appareils utilisés présentent une largeur variable (en pixels effectifs). Celle-ci est de 320 epx sur les plus petits d’entre eux, de 1 024 epx sur les écrans de taille modeste et nettement plus grande sur d’autres.Different devices are a different number of effective pixels wide, ranging from 320 epx for the smallest devices, to 1024 epx for a modest-sized monitor, and far beyond to much higher widths. Il vous suffit de continuer à utiliser les éléments à dimensionnement automatique et les panneaux à disposition dynamique que vous utilisez depuis toujours.All you have to do is continue to use auto-sized elements and dynamic layout panels as you always have. Dans certains cas, il se peut que vous définissiez une taille fixe pour les propriétés de vos éléments d’interface utilisateur dans le balisage XAML.There will also be some cases where you'll set the properties of your UI elements to a fixed size in XAML markup. Un facteur d’échelle est automatiquement affecté à votre application, en fonction de l’appareil sur lequel elle s’exécute et des paramètres d’affichage définis par l’utilisateur.A scale factor is automatically applied to your app depending on what device it runs on and the display settings made by the user. Ce facteur permet aux éléments à taille fixe de l’interface utilisateur de conserver la même taille (approximativement) sur les écrans de différentes tailles de l’utilisateur, pour les opérations tactiles ou pour la lecture.And that scale factor serves to keep any UI element with a fixed size presenting a more-or-less constant-sized touch (and reading) target to the user across a wide variety of screen sizes. Et avec la disposition dynamique, votre interface utilisateur ne sera pas seulement mise à l’échelle sur différents appareils.And together with dynamic layout, your UI won't merely optically scale on different devices. Elle s’efforcera également d’adapter la quantité de contenu appropriée à l’espace disponible.It will instead do what's necessary to fit the appropriate amount of content into the available space.

Pour que votre application offre une expérience optimale sur tous les écrans, nous vous recommandons de créer chaque ressource bitmap dans différentes tailles, chacune étant adaptée à un facteur d’échelle spécifique.So that your app has the best experience across all displays, we recommend that you create each bitmap asset in a range of sizes, each suitable for a particular scale factor. Fournir des ressources aux échelles 100 %, 200 % et 400 % (dans cet ordre de priorité) produit d’excellents résultats dans la plupart des cas à tous les facteurs d’échelle intermédiaires.Providing assets at 100%-scale, 200%-scale, and 400%-scale (in that priority order) will give you excellent results in most cases at all the intermediate scale factors.

Remarque    Si, pour une raison quelconque, vous ne pouvez pas créer de ressources en plusieurs tailles, créez des ressources de 100%.Note  If, for whatever reason, you cannot create assets in more than one size, then create 100%-scale assets. Dans Microsoft Visual Studio, le modèle de projet par défaut pour les applications UWP fournit des ressources de personnalisation (vignettes et logos) dans une seule taille, mais elles ne sont pas à l’échelle 100 %.In Microsoft Visual Studio, the default project template for UWP apps provides branding assets (tile images and logos) in only one size, but they are not 100%-scale. Lorsque vous créez des ressources pour votre propre application, suivez les recommandations de cette section, fournissez des tailles 100 %, 200 % et 400 %, et utilisez des packs de ressources.When authoring assets for your own app, follow the guidance in this section and provide 100%, 200%, and 400% sizes, and use asset packs.

Si vous disposez d’illustrations complexes, vous serez peut-être amené à fournir vos ressources dans un plus grand nombre de tailles.If you have intricate artwork, then you may want to provide your assets in even more sizes. Si vous débutez avec une image vectorielle, il est relativement aisé de générer des ressources de haute qualité à n’importe quel facteur d’échelle.If you're starting with vector art, then it's relatively easy to generate high-quality assets at any scale factor.

Nous ne vous recommandons pas d’essayer de prendre en charge tous les facteurs d’échelle, mais la liste complète des facteurs d’échelle pour les applications Windows 10 est la suivante : 100 %, 125 %, 150 %, 200 %, 250 %, 300 % et 400 %.We don't recommend that you try to support all of the scale factors, but the full list of scale factors for Windows 10 apps is 100%, 125%, 150%, 200%, 250%, 300%, and 400%. Si vous fournissez ces facteurs, le Windows Store sélectionne les ressources de taille appropriée pour chaque appareil, et seules ces ressources sont téléchargées.If you provide them, the Store will pick the correct-sized asset(s) for each device, and only those assets will be downloaded. Le Windows Store sélectionne les ressources à télécharger en fonction de la résolution de l’appareil.The Store selects the assets to download based on the DPI of the device. Vous pouvez réutiliser les ressources de votre application Windows Runtime 8. x à des facteurs de mise à l’échelle tels que 140% et 220%, mais votre application s’exécutera à l’un des nouveaux facteurs de mise à l’échelle. par conséquent, la mise à l’échelle des bitmaps sera inévitable.You can re-use assets from your Windows Runtime 8.x app at scale factors such as 140% and 220%, but your app will run at one of the new scale factors and so some bitmap scaling will be unavoidable. Testez votre application sur divers appareils pour voir si vous êtes satisfait des résultats dans votre cas.Test your app on a range of devices to see whether you're happy with the results in your case.

Vous pouvez réutiliser le balisage XAML à partir d’une application Windows Runtime 8. x, où les valeurs de dimension littérale sont utilisées dans le balisage (par exemple, pour dimensionner des formes ou d’autres éléments, peut-être pour la typographie).You may be re-using XAML markup from a Windows Runtime 8.x app where literal dimension values are used in the markup (perhaps to size shapes or other elements, perhaps for typography). Mais dans certains cas, le facteur d’échelle utilisé sur un appareil pour une application Windows 10 est plus élevé que pour une application universelle 8.1 (par exemple, utilisation du facteur 150 % contre 140 % auparavant, et du facteur 200 % plutôt que 180 %).But, in some cases, a larger scale factor is used on a device for a Windows 10 app than for a Universal 8.1 app (for example, 150% is used where 140% was before, and 200% is used where 180% was). Si vous pensez que ces valeurs littérales sont trop élevées dans Windows 10, essayez de les multiplier par 0,8.So, if you find that these literal values are now too big on Windows 10, then try multiplying them by 0.8. Pour en savoir plus, voir Conception réactive 101 pour les applications UWP.For more info, see Responsive design 101 for UWP apps.

Modifications de GridView et de ListViewGridView and ListView changes

Plusieurs modifications ont été apportées aux accesseurs set de style par défaut pour GridView afin de faire défiler le contrôle verticalement (plutôt que horizontalement, comme c’était le cas par défaut).Several changes have been made to the default style setters for GridView to make the control scroll vertically (instead of horizontally, as it did previously by default). Si vous avez modifié une copie du style par défaut dans votre projet, votre copie ne comportera pas ces modifications. Vous devrez donc les effectuer manuellement.If you edited a copy of the default style in your project, then your copy won't have these changes, so you'll need to make them manually. Voici une liste des modifications apportées.Here is a list of the changes.

Si cette dernière modification (vers Orientation) vous semble contradictoire, rappelez-vous que nous parlons d’une grille de renvoi à la ligne.If that last change (the change to Orientation) seems contradictory, then remember that we're talking about a wrap grid. Une grille de renvoi à la ligne avec orientation horizontale (nouvelle valeur) est comparable à un système d’écriture dans lequel le texte s’affiche à l’horizontale et passe à la ligne suivante à la fin d’une page.A horizontally-oriented wrap grid (the new value) is similar to a writing system where text flows horizontally and breaks to the next line down at the end of a page. Une page de texte de ce type fait l’objet d’un défilement vertical.A page of text like that scrolls vertically. À l’inverse, une grille de renvoi à la ligne avec orientation verticale (valeur précédente) est similaire à un système d’écriture dans lequel le texte s’affiche à la verticale et, de ce fait, défile à l’horizontale.Conversely, a vertically-oriented wrap grid (the previous value) is similar to a writing system where text flows vertically and therefore scrolls horizontally.

Voici les aspects de GridView et de ListView qui ont changé ou qui ne sont pas pris en charge dans Windows 10.Here are the aspects of GridView and ListView that have change or are not supported in Windows 10.

  • La propriété IsSwipeEnabled (Windows Runtime les applications 8. x uniquement) n’est pas prise en charge pour les applications Windows 10.The IsSwipeEnabled property (Windows Runtime 8.x apps only) is not supported for Windows 10 apps. L’API est toujours présente, mais le paramètre n’a aucun effet.The API is still present, but setting it has no effect. Tous les précédents mouvements de sélection sont pris en charge, à l’exception du balayage vers le bas (non pris en charge, car les données montrent qu’il n’est pas détectable) et du clic avec le bouton droit (qui est réservé à l’affichage d’un menu contextuel).All previous selection gestures are supported except downward swipe (which is unsupported because data shows that it is not discoverable) and right-click (which is reserved for showing a context menu).
  • La propriété ReorderMode Windows Phone (applications du Windows Store uniquement) n’est pas prise en charge pour les applications Windows 10.The ReorderMode property (Windows Phone Store apps only) is not supported for Windows 10 apps. L’API est toujours présente, mais le paramètre n’a aucun effet.The API is still present, but setting it has no effect. En définissant AllowDrop et CanReorderItems sur true dans votre élément GridView ou ListView, vous permettrez à l’utilisateur d’effectuer une réorganisation à l’aide d’un mouvement d’appui prolongé (ou de clic et de glissement).Instead, set AllowDrop and CanReorderItems to true on your GridView or ListView and then the user will be able to reorder using a press-and-hold (or click-and-drag) gesture.
  • Lors du développement pour Windows 10, utilisez ListViewItemPresenter au lieu de GridViewItemPresenter dans votre style de conteneur d’éléments, à la fois pour ListView et pour GridView.When developing for Windows 10, use ListViewItemPresenter instead of GridViewItemPresenter in your item container style, both for ListView and for GridView. Si vous modifiez une copie des styles de conteneur d’éléments par défaut, vous obtiendrez le type correct.If you edit a copy of the default item container styles, then you will get the correct type.
  • Les éléments visuels de sélection ont été modifiés pour une application Windows 10.The selection visuals have changed for a Windows 10 app. Si vous définissez SelectionMode sur Multiple, une case à cocher est affichée par défaut pour chaque élément.If you set SelectionMode to Multiple, then by default, a check box is rendered for each item. Le paramétrage par défaut pour les éléments ListView signifie que la case à cocher est incluse en regard de l’élément, et par conséquent, l’espace occupé par le reste de l’élément sera légèrement réduit et déplacé.The default setting for ListView items means that the check box is laid out inline beside the item, and as a result, the space occupied by the rest of the item will be slightly reduced and shifted. Pour les éléments GridView, la case à cocher est placée sur l’élément par défaut.For GridView items, the check box is overlaid on top of the item by default. Toutefois, dans les deux cas, vous pouvez contrôler la disposition (Inline ou Overlay) des cases à cocher (avec la propriété CheckMode ) et indiquer si elles sont affichées (avec la propriété SelectionCheckMarkVisualEnabled ) sur l’élément ListViewItemPresenter à l’intérieur de votre style de conteneur d’éléments, comme dans l’exemple ci-dessous.But, in either case, you can control the layout (Inline or Overlay) of the check boxes (with the CheckMode property) and whether they are shown at all (with the SelectionCheckMarkVisualEnabled property) on the ListViewItemPresenter element inside your item container style as in the example below.
  • Dans Windows 10, l’événement ContainerContentChanging est déclenché deux fois par élément pendant la virtualisation de l’interface utilisateur : une fois pour la récupération et une fois pour la réutilisation.In Windows 10, the ContainerContentChanging event is raised twice per item during UI virtualization: once for the reclaim, and once for the re-use. Si InRecycleQueue est défini sur true et que vous n’avez aucun travail de récupération particulier à effectuer, vous pouvez quitter votre gestionnaire d’événements immédiatement avec la certitude qu’il se rouvrira quand ce même élément sera réutilisé (moment auquel InRecycleQueue prendra la valeur false).If the value of InRecycleQueue is true and you have no special reclaim work to do, then you can exit your event handler immediately with the assurance that it will be re-entered when that same item is re-used (at which time InRecycleQueue will be false).
<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem|GridViewItem">
    ...
    <Setter.Value>
        <ControlTemplate TargetType="ListViewItem|GridViewItem">
            <ListViewItemPresenter CheckMode="Inline|Overlay" ... />
        </ControlTemplate>
    </Setter.Value>
    ...
</Style>

ListViewItemPresenter avec case à cocher incluse

ListViewItemPresenter avec case à cocher incluseA ListViewItemPresenter with inline check box

ListViewItemPresenter avec case à cocher superposée

ListViewItemPresenter avec case à cocher superposéeA ListViewItemPresenter with an overlaid check box

Le tableau suivant décrit les modifications apportées aux états visuels et aux groupes d’états visuels dans les modèles de contrôle ListViewItem et GridViewItem.This table describes the changes to the visual states and visual state groups in the ListViewItem and GridViewItem control templates.

8.18.1 État de la fonctionnalitéFeature state Windows 10Windows 10 État de la fonctionnalitéFeature state
CommonStatesCommonStates CommonStatesCommonStates
NormalNormal NormalNormal
PointerOverPointerOver PointerOverPointerOver
AppuyéPressed AppuyéPressed
PointerOverPressedPointerOverPressed [non disponible][unavailable]
DésactivéDisabled [non disponible][unavailable]
[non disponible][unavailable] PointerOverSelectedPointerOverSelected
[non disponible][unavailable] SelectedSelected
[non disponible][unavailable] PressedSelectedPressedSelected
[non disponible][unavailable] DisabledStatesDisabledStates
[non disponible][unavailable] DésactivéDisabled
[non disponible][unavailable] activéEnabled
SelectionHintStatesSelectionHintStates [non disponible][unavailable]
VerticalSelectionHintVerticalSelectionHint [non disponible][unavailable]
HorizontalSelectionHintHorizontalSelectionHint [non disponible][unavailable]
NoSelectionHintNoSelectionHint [non disponible][unavailable]
[non disponible][unavailable] MultiSelectStatesMultiSelectStates
[non disponible][unavailable] MultiSelectDisabledMultiSelectDisabled
[non disponible][unavailable] MultiSelectEnabledMultiSelectEnabled
SelectionStatesSelectionStates [non disponible][unavailable]
DésélectionUnselecting [non disponible][unavailable]
Non sélectionnéUnselected [non disponible][unavailable]
UnselectedPointerOverUnselectedPointerOver [non disponible][unavailable]
UnselectedSwipingUnselectedSwiping [non disponible][unavailable]
SélectionnezSelecting [non disponible][unavailable]
SelectedSelected [non disponible][unavailable]
SelectedSwipingSelectedSwiping [non disponible][unavailable]
SelectedUnfocusedSelectedUnfocused [non disponible][unavailable]

Si vous avez personnalisé un modèle de contrôle ListViewItem ou GridViewItem, passez-le en revue en tenant compte des modifications ci-dessus.If you have a custom ListViewItem or GridViewItem control template, then review it in light of the above changes. Nous vous recommandons de commencer par modifier une copie du nouveau modèle par défaut, puis de lui réappliquer votre personnalisation.We recommend that you start over by editing a copy of the new default template and re-applying your customization to that. Si pour une raison quelconque, vous ne pouvez pas effectuer cette opération, mais que vous devez modifier votre modèle existant, voici quelques recommandations générales sur la procédure à suivre.If, for whatever reason, you can't do that and you need to edit your existing template, then here is some general guidance around how you might go about doing that.

  • Ajoutez le nouveau groupe d’états visuels MultiSelectStates.Add the new MultiSelectStates visual state group.
  • Ajoutez le nouvel état visuel MultiSelectDisabled.Add the new MultiSelectDisabled visual state.
  • Ajoutez le nouvel état visuel MultiSelectEnabled.Add the new MultiSelectEnabled visual state.
  • Ajoutez le nouveau groupe d’états visuels DisabledStates.Add the new DisabledStates visual state group.
  • Ajoutez le nouvel état visuel Enabled.Add the new Enabled visual state.
  • Dans le groupe d’états visuels CommonStates, supprimez l’état visuel PointerOverPressed.In the CommonStates visual state group, remove the PointerOverPressed visual state.
  • Déplacez l’état visuel Disabled vers le groupe d’états visuels DisabledStates.Move the Disabled visual state to the DisabledStates visual state group.
  • Ajoutez le nouvel état visuel PointerOverSelected.Add the new PointerOverSelected visual state.
  • Ajoutez le nouvel état visuel PressedSelected.Add the new PressedSelected visual state.
  • Supprimez le groupe d’états visuels SelectedHintStates.Remove the SelectedHintStates visual state group.
  • Dans le groupe d’états visuels SelectionStates, déplacez l’état visuel Selected vers le groupe d’états visuels CommonStates.In the SelectionStates visual state group, move the Selected visual state to the CommonStates visual state group.
  • Supprimez l’intégralité du groupe d’états visuels SelectionStates.Remove the entire SelectionStates visual state group.

Localisation et globalisationLocalization and globalization

Vous pouvez réutiliser les fichiers Resources.resw de votre projet 8.1 universel dans votre projet d’application UWP.You can re-use the Resources.resw files from your Universal 8.1 project in your UWP app project. Après avoir copié le fichier, ajoutez-le au projet et définissez Action de génération sur PRIResource et Copier dans le répertoire de sortie sur Ne pas copier.After copying the file over, add it to the project and set Build Action to PRIResource and Copy to Output Directory to Do not copy. La rubrique ResourceContext. QualifierValues explique comment charger des ressources spécifiques à la famille d’appareils en fonction du facteur de sélection des ressources de la famille d’appareils.The ResourceContext.QualifierValues topic describes how to load device family-specific resources based on the device family resource selection factor.

Lire surPlay To

Les API de l’espace de noms Windows.Media.PlayTo sont déconseillées pour les applications Windows 10 et doivent être remplacées par les API de l’espace de noms Windows.Media.Casting.The APIs in the Windows.Media.PlayTo namespace are deprecated for Windows 10 apps in favor of the Windows.Media.Casting APIs.

Clés de ressources et tailles de style TextBlockResource keys, and TextBlock style sizes

Le langage de conception a évolué pour Windows 10. Suite à cela, certains styles système ont été modifiés.The design language has evolved for Windows 10 and consequently certain system styles have changed. Dans certains cas, il vous sera utile de revoir les conceptions visuelles de vos affichages afin de les harmoniser avec les propriétés de style modifiées.In some cases, you will want to revisit the visual designs of your views so that they are in harmony with the style properties that have changed.

Dans d’autres cas, les clés de ressources ne sont plus prises en charge.In other cases, resource keys are no longer supported. L’éditeur de balisage XAML dans Visual Studio met en surbrillance les références aux clés de ressources qui ne peuvent pas être résolues.The XAML markup editor in Visual Studio highlights references to resource keys that can't be resolved. Par exemple, il souligne une référence à la clé de style ListViewItemTextBlockStyle d’une ligne ondulée rouge.For example, the XAML markup editor will underline a reference to the style key ListViewItemTextBlockStyle with a red squiggle. Si ce n’est pas corrigé, l’application s’arrête immédiatement lorsque vous essayez de la déployer vers l’émulateur ou l’appareil.If that isn't corrected, then the app will immediately terminate when you try to deploy it to the emulator or device. Il est donc important de veiller à l’exactitude du balisage XAML.So, it's important to attend to XAML markup correctness. Et vous allez découvrir que Visual Studio est un formidable outil pour intercepter ces problèmes.And you will find Visual Studio to be a great tool for catching such issues.

Pour les clés qui sont toujours prises en charge, les modifications apportées au langage de conception signifient que les propriétés définies par certains styles ont changé.For keys that are still supported, changes in design language mean that properties set by some styles have changed. Par exemple, TitleTextBlockStyle affecte à FontSize la valeur 14.667 PX dans une application Windows Runtime 8. x et 18.14 PX dans une application Windows Phone Store.For example, TitleTextBlockStyle sets FontSize to 14.667px in a Windows Runtime 8.x app and 18.14px in a Windows Phone Store app. Mais le même style définit FontSize sur la valeur plus élevée 24 px dans une application Windows 10.But, the same style sets FontSize to a much larger 24px in a Windows 10 app. Passez en revue vos conceptions et dispositions et utilisez les styles appropriés aux endroits adéquats.Review your designs and layouts and use the appropriate styles in the right places. Pour plus d’informations, voir Recommandations en matière de polices et Concevoir des applications UWP.For more info, see Guidelines for fonts and Design UWP apps.

Voici la liste complète des clés qui ne sont plus prises en charge.This is a full list of the keys that are no longer supported.

  • CheckBoxAndRadioButtonMinWidthSizeCheckBoxAndRadioButtonMinWidthSize
  • CheckBoxAndRadioButtonTextPaddingThicknessCheckBoxAndRadioButtonTextPaddingThickness
  • ComboBoxFlyoutListPlaceholderTextOpacityComboBoxFlyoutListPlaceholderTextOpacity
  • ComboBoxFlyoutListPlaceholderTextThemeMarginComboBoxFlyoutListPlaceholderTextThemeMargin
  • ComboBoxHighlightedBackgroundThemeBrushComboBoxHighlightedBackgroundThemeBrush
  • ComboBoxHighlightedBorderThemeBrushComboBoxHighlightedBorderThemeBrush
  • ComboBoxHighlightedForegroundThemeBrushComboBoxHighlightedForegroundThemeBrush
  • ComboBoxInlinePlaceholderTextForegroundThemeBrushComboBoxInlinePlaceholderTextForegroundThemeBrush
  • ComboBoxInlinePlaceholderTextThemeFontWeightComboBoxInlinePlaceholderTextThemeFontWeight
  • ComboBoxItemDisabledThemeOpacityComboBoxItemDisabledThemeOpacity
  • ComboBoxItemHighContrastBackgroundThemeMarginComboBoxItemHighContrastBackgroundThemeMargin
  • ComboBoxItemMinHeightThemeSizeComboBoxItemMinHeightThemeSize
  • ComboBoxPlaceholderTextBlockStyleComboBoxPlaceholderTextBlockStyle
  • ComboBoxPlaceholderTextThemeMarginComboBoxPlaceholderTextThemeMargin
  • CommandBarBackgroundThemeBrushCommandBarBackgroundThemeBrush
  • CommandBarForegroundThemeBrushCommandBarForegroundThemeBrush
  • ContentDialogButton1HostPaddingContentDialogButton1HostPadding
  • ContentDialogButton2HostPaddingContentDialogButton2HostPadding
  • ContentDialogButtonsMinHeightContentDialogButtonsMinHeight
  • ContentDialogContentLandscapeWidthContentDialogContentLandscapeWidth
  • ContentDialogContentMinHeightContentDialogContentMinHeight
  • ContentDialogDimmingColorContentDialogDimmingColor
  • ContentDialogTitleMinHeightContentDialogTitleMinHeight
  • ControlContextualInfoTextBlockStyleControlContextualInfoTextBlockStyle
  • ControlHeaderContentPresenterStyleControlHeaderContentPresenterStyle
  • ControlHeaderTextBlockStyleControlHeaderTextBlockStyle
  • FlyoutContentPanelLandscapeThemeMarginFlyoutContentPanelLandscapeThemeMargin
  • FlyoutContentPanelPortraitThemeMarginFlyoutContentPanelPortraitThemeMargin
  • GrabberMarginGrabberMargin
  • GridViewItemMarginGridViewItemMargin
  • GridViewItemPlaceholderBackgroundThemeBrushGridViewItemPlaceholderBackgroundThemeBrush
  • GroupHeaderTextBlockStyleGroupHeaderTextBlockStyle
  • HeaderContentPresenterStyleHeaderContentPresenterStyle
  • HighContrastBlackHighContrastBlack
  • HighContrastWhiteHighContrastWhite
  • HubHeaderCharacterSpacingHubHeaderCharacterSpacing
  • HubHeaderFontSizeHubHeaderFontSize
  • HubHeaderMarginThicknessHubHeaderMarginThickness
  • HubSectionHeaderCharacterSpacingHubSectionHeaderCharacterSpacing
  • HubSectionHeaderFontSizeHubSectionHeaderFontSize
  • HubSectionHeaderMarginThicknessHubSectionHeaderMarginThickness
  • HubSectionMarginThicknessHubSectionMarginThickness
  • InlineWindowPlayPauseMarginInlineWindowPlayPauseMargin
  • ItemTemplateItemTemplate
  • LeftFullWindowMarginLeftFullWindowMargin
  • LeftMarginLeftMargin
  • ListViewEmptyStaticTextBlockStyleListViewEmptyStaticTextBlockStyle
  • ListViewItemContentTextBlockStyleListViewItemContentTextBlockStyle
  • ListViewItemContentTranslateXListViewItemContentTranslateX
  • ListViewItemMarginListViewItemMargin
  • ListViewItemMultiselectCheckBoxMarginListViewItemMultiselectCheckBoxMargin
  • ListViewItemSubheaderTextBlockStyleListViewItemSubheaderTextBlockStyle
  • ListViewItemTextBlockStyleListViewItemTextBlockStyle
  • MediaControlPanelAudioThemeBrushMediaControlPanelAudioThemeBrush
  • MediaControlPanelPhoneVideoThemeBrushMediaControlPanelPhoneVideoThemeBrush
  • MediaControlPanelVideoThemeBrushMediaControlPanelVideoThemeBrush
  • MediaControlPanelVideoThemeColorMediaControlPanelVideoThemeColor
  • MediaControlPlayPauseThemeBrushMediaControlPlayPauseThemeBrush
  • MediaControlTimeRowThemeBrushMediaControlTimeRowThemeBrush
  • MediaControlTimeRowThemeColorMediaControlTimeRowThemeColor
  • MediaDownloadProgressIndicatorThemeBrushMediaDownloadProgressIndicatorThemeBrush
  • MediaErrorBackgroundThemeBrushMediaErrorBackgroundThemeBrush
  • MediaTextThemeBrushMediaTextThemeBrush
  • MenuFlyoutBackgroundThemeBrushMenuFlyoutBackgroundThemeBrush
  • MenuFlyoutBorderThemeBrushMenuFlyoutBorderThemeBrush
  • MenuFlyoutLandscapeThemePaddingMenuFlyoutLandscapeThemePadding
  • MenuFlyoutLeftLandscapeBorderThemeThicknessMenuFlyoutLeftLandscapeBorderThemeThickness
  • MenuFlyoutPortraitBorderThemeThicknessMenuFlyoutPortraitBorderThemeThickness
  • MenuFlyoutPortraitThemePaddingMenuFlyoutPortraitThemePadding
  • MenuFlyoutRightLandscapeBorderThemeThicknessMenuFlyoutRightLandscapeBorderThemeThickness
  • MessageDialogContentStyleMessageDialogContentStyle
  • MessageDialogTitleStyleMessageDialogTitleStyle
  • MinimalWindowMarginMinimalWindowMargin
  • PasswordBoxCheckBoxThemeMarginPasswordBoxCheckBoxThemeMargin
  • PhoneAccentBrushPhoneAccentBrush
  • PhoneBackgroundBrushPhoneBackgroundBrush
  • PhoneBackgroundColorPhoneBackgroundColor
  • PhoneBaseBlackColorPhoneBaseBlackColor
  • PhoneBaseHighColorPhoneBaseHighColor
  • PhoneBaseLowColorPhoneBaseLowColor
  • PhoneBaseLowSolidColorPhoneBaseLowSolidColor
  • PhoneBaseMediumHighColorPhoneBaseMediumHighColor
  • PhoneBaseMediumMidColorPhoneBaseMediumMidColor
  • PhoneBaseMediumMidSolidColorPhoneBaseMediumMidSolidColor
  • PhoneBaseMidColorPhoneBaseMidColor
  • PhoneBaseWhiteColorPhoneBaseWhiteColor
  • PhoneBorderThicknessPhoneBorderThickness
  • PhoneButtonBasePressedForegroundBrushPhoneButtonBasePressedForegroundBrush
  • PhoneButtonContentPaddingPhoneButtonContentPadding
  • PhoneButtonFontWeightPhoneButtonFontWeight
  • PhoneButtonMinHeightPhoneButtonMinHeight
  • PhoneButtonMinWidthPhoneButtonMinWidth
  • PhoneChromeBrushPhoneChromeBrush
  • PhoneChromeColorPhoneChromeColor
  • PhoneControlBackgroundColorPhoneControlBackgroundColor
  • PhoneControlDisabledColorPhoneControlDisabledColor
  • PhoneControlForegroundColorPhoneControlForegroundColor
  • PhoneDisabledBrushPhoneDisabledBrush
  • PhoneDisabledColorPhoneDisabledColor
  • PhoneFontFamilyLightPhoneFontFamilyLight
  • PhoneFontFamilySemiBoldPhoneFontFamilySemiBold
  • PhoneForegroundBrushPhoneForegroundBrush
  • PhoneForegroundColorPhoneForegroundColor
  • PhoneHighContrastSelectedBackgroundThemeBrushPhoneHighContrastSelectedBackgroundThemeBrush
  • PhoneHighContrastSelectedForegroundThemeBrushPhoneHighContrastSelectedForegroundThemeBrush
  • PhoneImagePlaceholderColorPhoneImagePlaceholderColor
  • PhoneLowBrushPhoneLowBrush
  • PhoneMidBrushPhoneMidBrush
  • PhonePageBackgroundColorPhonePageBackgroundColor
  • PhonePivotLockedTranslationPhonePivotLockedTranslation
  • PhonePivotUnselectedItemOpacityPhonePivotUnselectedItemOpacity
  • PhoneRadioCheckBoxBorderBrushPhoneRadioCheckBoxBorderBrush
  • PhoneRadioCheckBoxBrushPhoneRadioCheckBoxBrush
  • PhoneRadioCheckBoxCheckBrushPhoneRadioCheckBoxCheckBrush
  • PhoneRadioCheckBoxPressedBrushPhoneRadioCheckBoxPressedBrush
  • PhoneStrokeThicknessPhoneStrokeThickness
  • PhoneTextHighColorPhoneTextHighColor
  • PhoneTextLowColorPhoneTextLowColor
  • PhoneTextMidColorPhoneTextMidColor
  • PhoneTextOverAccentColorPhoneTextOverAccentColor
  • PhoneTouchTargetLargeOverhangPhoneTouchTargetLargeOverhang
  • PhoneTouchTargetOverhangPhoneTouchTargetOverhang
  • PivotHeaderItemPaddingPivotHeaderItemPadding
  • PlaceholderContentPresenterStylePlaceholderContentPresenterStyle
  • ProgressBarHighContrastAccentBarThemeBrushProgressBarHighContrastAccentBarThemeBrush
  • ProgressBarIndeterminateRectagleThemeSizeProgressBarIndeterminateRectagleThemeSize
  • ProgressBarRectangleStyleProgressBarRectangleStyle
  • ProgressRingActiveBackgroundOpacityProgressRingActiveBackgroundOpacity
  • ProgressRingElipseThemeMarginProgressRingElipseThemeMargin
  • ProgressRingElipseThemeSizeProgressRingElipseThemeSize
  • ProgressRingTextForegroundThemeBrushProgressRingTextForegroundThemeBrush
  • ProgressRingTextThemeMarginProgressRingTextThemeMargin
  • ProgressRingThemeSizeProgressRingThemeSize
  • RichEditBoxTextThemeMarginRichEditBoxTextThemeMargin
  • RightFullWindowMarginRightFullWindowMargin
  • RightMarginRightMargin
  • ScrollBarMinThemeHeightScrollBarMinThemeHeight
  • ScrollBarMinThemeWidthScrollBarMinThemeWidth
  • ScrollBarPanningThumbThemeHeightScrollBarPanningThumbThemeHeight
  • ScrollBarPanningThumbThemeWidthScrollBarPanningThumbThemeWidth
  • SliderThumbDisabledBorderThemeBrushSliderThumbDisabledBorderThemeBrush
  • SliderTrackBorderThemeBrushSliderTrackBorderThemeBrush
  • SliderTrackDisabledBorderThemeBrushSliderTrackDisabledBorderThemeBrush
  • TextBoxBackgroundColorTextBoxBackgroundColor
  • TextBoxBorderColorTextBoxBorderColor
  • TextBoxDisabledHeaderForegroundThemeBrushTextBoxDisabledHeaderForegroundThemeBrush
  • TextBoxFocusedBackgroundThemeBrushTextBoxFocusedBackgroundThemeBrush
  • TextBoxForegroundColorTextBoxForegroundColor
  • TextBoxPlaceholderColorTextBoxPlaceholderColor
  • TextControlHeaderMarginThemeThicknessTextControlHeaderMarginThemeThickness
  • TextControlHeaderMinHeightSizeTextControlHeaderMinHeightSize
  • TextStyleExtraExtraLargeFontSizeTextStyleExtraExtraLargeFontSize
  • TextStyleExtraLargePlusFontSizeTextStyleExtraLargePlusFontSize
  • TextStyleMediumFontSizeTextStyleMediumFontSize
  • TextStyleSmallFontSizeTextStyleSmallFontSize
  • TimeRemainingElementMarginTimeRemainingElementMargin

Remplacement de SearchBox par AutoSuggestBoxSearchBox deprecated in favor of AutoSuggestBox

Bien que la méthode SearchBox soit implémentée dans la famille d’appareils universelle, elle n’est pas entièrement fonctionnelle sur des appareils mobiles.Although SearchBox is implemented in the Universal device family, it is not fully functional on mobile devices. Utilisez AutoSuggestBox pour votre expérience de recherche universelle.Use AutoSuggestBox for your universal search experience. Voici une méthode classique pour implémenter une expérience de recherche avec AutoSuggestBox.Here's how you typically implement a search experience with AutoSuggestBox.

Quand l’utilisateur commence à taper, l’événement TextChanged est déclenché avec la raison UserInput.Once the user starts typing, the TextChanged event is raised, with a reason of UserInput. Vous complétez ensuite la liste des suggestions et définissez l’élément ItemsSource d’AutoSuggestBox.You then populate the list of suggestions and set the ItemsSource of the AutoSuggestBox. Lorsque l’utilisateur parcourt la liste, l’événement SuggestionChosen est déclenché (et si vous avez défini TextMemberDisplayPath, la zone de texte est complétée automatiquement avec la propriété spécifiée).As the user navigates the list, the SuggestionChosen event is raised (and if you have set TextMemberDisplayPath, the text box is auto-filled with the property specified). Quand l’utilisateur soumet un choix avec la touche Entrée, l’événement QuerySubmitted est déclenché. À ce stade, vous pouvez agir sur cette suggestion (dans ce cas, très probablement naviguer vers une autre page avec plus de détails sur le contenu spécifié).When the user submits a choice with the Enter key, the QuerySubmitted event is raised, at which point you can take action on that suggestion (in this case, most likely navigating to another page with more details on the specified content). Notez que les propriétés LinguisticDetails et Language de SearchBoxQuerySubmittedEventArgs ne sont plus prises en charge (il existe des API équivalentes pour prendre en charge ces fonctionnalités).Note that the LinguisticDetails and Language properties of SearchBoxQuerySubmittedEventArgs are no longer supported (there are equivalent APIs to support that functionality). KeyModifiers n’est plus pris en chargeAnd KeyModifiers is no longer supported.

AutoSuggestBox prend également en charge les éditeurs de méthode d’entrée (IME).AutoSuggestBox also has support for input method editors (IMEs). Et si vous souhaitez afficher une icône « Rechercher », vous le pouvez également (l’interaction avec l’icône déclenchera l’événement QuerySubmitted).And, if you want to show a "find" icon, then you can do that too (interacting with the icon will cause the QuerySubmitted event to be raised).

   <AutoSuggestBox ... >
        <AutoSuggestBox.QueryIcon>
            <SymbolIcon Symbol="Find"/>
        </AutoSuggestBox.QueryIcon>
    </AutoSuggestBox>

Voir également l’exemple de portage AutoSuggestBox (en anglais).Also, see AutoSuggestBox porting sample.

Modifications SemanticZoomSemanticZoom changes

Le mouvement de zoom arrière pour un SemanticZoom a convergé sur le modèle de Windows Phone, qui consiste à appuyer ou à cliquer sur un en-tête de groupe (par conséquent, sur les ordinateurs de bureau, le bouton moins permettant d’effectuer un zoom arrière n’est plus affiché).The zooming-out gesture for a SemanticZoom has converged on the Windows Phone model, which is to tap or click a group header (so, on desktop computers, the minus button affordance to zoom out is no longer displayed). Ainsi, nous avons donc garanti un comportement cohérent sur tous les appareils et ce, sans effort.Now, we get the same, consistent, behavior for free on all devices. Il existe cependant une différence d’ordre cosmétique avec le modèle doté de Windows Phone : la vue avec zoom arrière (liste de raccourcis) remplace la vue avec zoom avant au lieu de se superposer à elle.One cosmetic difference from the Windows Phone model is that the zoomed-out view (the jump list) replaces the zoomed-in view rather than overlaying it. Pour cette raison, vous pouvez supprimer tous les arrière-plans semi-opaques des vues avec zoom arrière.For this reason, you can remove any semi-opaque backgrounds from zoomed-out views.

Dans une application du Windows Phone Store, la vue avec zoom arrière s’adapte à la taille de l’écran.In a Windows Phone Store app, the zoomed-out view expands to the size of the screen. Dans une application Windows Runtime 8. x, et dans une application Windows 10, la taille de la vue de zoom arrière est limitée aux limites du contrôle SemanticZoom .In a Windows Runtime 8.x app, and in a Windows 10 app, the size of the zoomed-out view is constrained to the bounds of the SemanticZoom control.

Dans une application du Windows Phone Store, le contenu derrière la vue avec zoom arrière (dans l’ordre de plan) transparaît si la vue avec zoom arrière comporte une transparence dans son arrière-plan.In a Windows Phone Store app, content behind the zoomed-out view (in z-order) shows through if the zoomed-out view has any transparency in its background. Dans une application Windows Runtime 8. x et dans une application Windows 10, rien n’est visible derrière l’affichage zoom arrière.In a Windows Runtime 8.x app, and in a Windows 10 app, nothing is visible behind the zoomed out view.

Dans une application Windows Runtime 8. x, lorsque l’application est désactivée et réactivée, la vue avec zoom avant est fermée (si elle était affichée) et la vue avec zoom avant s’affiche à la place.In a Windows Runtime 8.x app, when the app is deactivated and reactivated, the zoomed-out view is dismissed (if it was being shown) and the zoomed-in view is shown instead. Dans une application du Windows Phone Store et dans une application Windows 10, la vue avec zoom arrière reste affichée si elle était visible précédemment.In a Windows Phone Store app, and in a Windows 10 app, the zoomed-out view will remain showing if it was being shown.

Dans une application du Windows Phone Store et dans une application Windows 10, la vue avec zoom arrière est masquée lorsque l’utilisateur appuie sur le bouton Précédent.In a Windows Phone Store app, and in a Windows 10 app, the zoomed-out view is dismissed when the back button is pressed. Pour une application Windows Runtime 8. x, il n’y a pas de traitement intégré du bouton précédent, donc la question ne s’applique pas.For a Windows Runtime 8.x app, there is no built-in back button processing, so the question doesn't apply.

ParamètresSettings

La classe Windows Runtime 8.x SettingsPane n’est pas adaptée à Windows 10.The Windows Runtime 8.x SettingsPane class is not appropriate for Windows 10. À la place, vous devez non seulement créer une page Paramètres, mais également permettre aux utilisateurs d’y accéder à partir de votre application.Instead, in addition to building a Settings page, you should give your users a way to access it from within your app. Nous vous recommandons d’exposer cette page Paramètres d’application au niveau supérieur, en tant que dernier élément épinglé sur votre volet de navigation. Toutefois, voici l’ensemble complet des options dont vous disposez.We recommend that you expose this app Settings page at the top level, as the last pinned item on your navigation pane, but here are the full set of your options.

  • Volet de navigation :Navigation pane. l’élément Paramètres doit être le dernier de la liste de choix de navigation et épinglé en bas.Settings should be the last item in the navigational list of choices, and pinned to the bottom.
  • Barre de l’application/barre d’outils (dans un affichage d’onglets ou dans une disposition de zone dynamique) :Appbar/toolbar (within a tabs view or pivot layout). l’élément Paramètres doit être le dernier du menu volant de barre de l’application ou de barre d’outils.Settings should be the last item in the appbar or toolbar menu flyout. Il est déconseillé de placer Paramètres parmi les éléments de niveau supérieur de la navigation.It is not recommended for Settings to be one of the top-level items within the navigation.
  • Hub :Hub. l’élément Paramètres doit figurer dans le menu volant (soit dans le menu de barre de l’application, soit dans le menu de barre d’outils de la disposition Hub).Settings should be located inside of the menu flyout (could be from the app bar menu or the toolbar menu within the Hub layout).

Il est déconseillé de reléguer l’élément Paramètres dans un volet maître/détail.It's also not recommended to bury Settings within a master-detail pane.

Votre page Paramètres doit remplir la totalité de la fenêtre de votre application, et doit également contenir les options À propos de et Commentaires.Your Settings page should fill the whole of your app's window, and your Settings page is also where About and Feedback should be. Pour obtenir des conseils sur la conception de votre page Paramètres, voir Recommandations en matière de paramètres d’application.For guidance on the design of your Settings page, see Guidelines for app settings.

TexteText

Le texte (ou la typographie) constitue un aspect important d’une application UWP et, pendant le portage, il vous sera peut-être utile de revoir les conceptions visuelles de vos vues afin de les harmoniser avec le nouveau langage de conception.Text (or typography) is an important aspect of a UWP app and, while porting, you may want to revisit the visual designs of your views so that they are in harmony with the new design language. Utilisez ces illustrations pour trouver les styles  TextBlock système de plateforme Windows universelle (UWP) qui sont disponibles.Use these illustrations to find the Universal Windows Platform (UWP) TextBlock system styles that are available. Recherchez ceux qui correspondent aux styles de Silverlight pour Windows Phone que vous avez utilisés.Find the ones that correspond to the Windows Phone Silverlight styles you used. Vous pouvez également créer vos propres styles universels et y copier les propriétés des styles système de Silverlight pour Windows Phone.Alternatively, you can create your own universal styles and copy the properties from the Windows Phone Silverlight system styles into those.

Styles TextBlock système pour les applications Windows 10
Styles TextBlock système pour les applications Windows 10System TextBlock styles for Windows 10 apps

Dans Windows Runtime applications 8. x et Windows Phone applications du Windows Store, la famille de polices par défaut est interface utilisateur globale.In Windows Runtime 8.x apps and Windows Phone Store apps, the default font family is Global User Interface. Dans une application Windows 10, la famille de polices par défaut est Segoe UI.In a Windows 10 app, the default font family is Segoe UI. Par conséquent, les métriques de police dans votre application peuvent être différentes.As a result, font metrics in your app may look different. Si vous souhaitez reproduire l’apparence de votre texte 8,1, vous pouvez définir vos propres mesures à l’aide de propriétés telles que LineHeight et LineStackingStrategy.If you want to reproduce the look of your 8.1 text, you can set your own metrics using properties such as LineHeight and LineStackingStrategy.

Dans Windows Runtime applications 8. x et Windows Phone applications du Windows Store, la langue par défaut pour le texte est définie sur la langue de la build, ou sur en-US.In Windows Runtime 8.x apps and Windows Phone Store apps, the default language for text is set to the language of the build, or to en-us. Dans une application Windows 10, la langue par défaut est définie sur la langue de l’application supérieure (substitution des polices).In a Windows 10 app, the default language is set to the top app language (font fallback). Vous pouvez définir explicitement la propriété FrameworkElement.Language, mais le comportement de substitution des polices se révélera plus efficace si vous ne définissez aucune valeur pour cette propriété.You can set FrameworkElement.Language explicitly, but you will enjoy better font fallback behavior if you do not set a value for that property.

Pour plus d’informations, voir Recommandations en matière de polices et Concevoir des applications UWP.For more info, see Guidelines for fonts and Design UWP apps. Voir également la section Contrôles ci-dessus relative aux modifications apportées aux contrôles de texte.Also, see the Controls section above for changes to text controls.

Modifications de thèmeTheme changes

Pour une application universelle 8.1, le thème par défaut est sombre.For a Universal 8.1 app, the default theme is dark by default. Pour les appareils Windows 10, le thème par défaut a changé, mais vous pouvez contrôler le thème utilisé en déclarant un thème demandé dans App.xaml.For Windows 10 devices, the default theme has changed, but you can control the theme used by declaring a requested theme in App.xaml. Par exemple, pour utiliser un thème sombre sur tous les appareils, ajoutez RequestedTheme="Dark" à l’élément racine Application.For example, to use a dark theme on all devices, add RequestedTheme="Dark" to the root Application element.

Vignettes et toastsTiles and toasts

Pour les vignettes et toasts, les modèles que vous utilisez actuellement continueront à fonctionner dans votre application Windows 10.For tiles and toasts, the templates you're currently using will continue to work in your Windows 10 app. Toutefois, de nouveaux modèles adaptatifs sont disponibles ; ils sont décrits dans Notifications, vignettes, toasts et badges.But, there are new, adaptive templates available for you to use, and these are described in Notifications, tiles, toasts, and badges.

Auparavant, sur les ordinateurs de bureau, une notification toast était un message transitoire.Previously, on desktop computers, a toast notification was a transitory message. Elle disparaissait et n’était plus récupérable si vous l’aviez manquée ou ignorée.It would disappear, and no longer be retrievable, once it was missed or ignored. Sur Windows Phone, si une notification toast est ignorée ou se ferme temporairement, elle est placée dans le Centre de maintenance.On Windows Phone, if a toast notification is ignored or temporarily dismissed, it would go into the Action Center. À présent, le Centre de maintenance n'est plus limité à la famille d’appareils mobiles.Now, Action Center is no longer limited to the Mobile device family.

Pour envoyer une notification toast, il n'est plus nécessaire de déclarer une fonctionnalité.To send a toast notification, there is no longer any need to declare a capability.

Taille de la fenêtreWindow size

Pour une application universelle 8.1, l’élément de manifeste d’application ApplicationView est utilisé pour déclarer une largeur minimale de fenêtre.For a Universal 8.1 app, the ApplicationView app manifest element is used to declare a minimum window width. Dans votre application UWP, vous pouvez spécifier une taille minimale (largeur et hauteur) avec le code impératif.In your UWP app, you can specify a minimum size (both width and height) with imperative code. La taille minimale par défaut est 500 x 320 epx (plus petite taille minimale acceptée).The default minimum size is 500x320epx, and that's also the smallest minimum size accepted. La plus grande taille minimale acceptée est de 500 x 500 epx.The largest minimum size accepted is 500x500epx.

   Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetPreferredMinSize
        (new Size { Width = 500, Height = 500 });

Rubrique suivante : Portage pour le modèle d’E/S, d’appareil et d’application.The next topic is Porting for I/O, device, and app model.