Portage du code XAML et de l’interface utilisateur Windows Runtime 8.x vers UWP
La rubrique précédente était Résolution des problèmes.
La pratique de la définition de l’interface utilisateur sous la forme de balisage XAML déclaratif traduit extrêmement bien les applications Universal 8.1 en applications plateforme Windows universelle (UWP). Vous constaterez que la plupart de vos marques de balisage sont compatibles, même si vous devrez peut-être apporter des ajustements aux clés de ressources système ou aux modèles personnalisés que vous utilisez. Le code impératif dans vos modèles d’affichage nécessite peu ou pas de modification. Même beaucoup, ou la plupart, du code dans votre couche de présentation qui manipule les éléments d’interface utilisateur doit également être simple à porter.
Code impératif
Si vous souhaitez simplement accéder à la phase où votre projet est généré, vous pouvez commenter ou extraire n’importe quel code non essentiel. Effectuez ensuite une itération, un problème à la fois et reportez-vous aux rubriques suivantes de cette section (et 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 résolus et que votre port soit terminé.
Interface utilisateur adaptative/réactive
Étant donné que votre application peut s’exécuter sur un large éventail d’appareils( chacun avec sa propre taille d’écran et sa résolution), vous souhaitez aller au-delà des étapes minimales pour porter votre application et vous souhaiterez adapter votre interface utilisateur pour qu’elle ressemble le mieux à ces appareils. Vous pouvez utiliser la fonctionnalité Visual State Manager adaptative pour détecter dynamiquement la taille de la fenêtre et modifier la disposition en réponse, et un exemple de procédure à suivre dans la section Interface utilisateur adaptative dans la rubrique d’étude de cas Bookstore2.
Gestion des boutons Précédents
Pour les applications universelles 8.1, les applications Windows Runtime 8.x et les applications du Windows Phone Store ont différentes approches de l’interface utilisateur que vous affichez et des événements que vous gérez pour le bouton Précédent. Toutefois, pour les applications Windows 10, vous pouvez utiliser une approche unique dans votre application. Sur les appareils mobiles, le bouton est fourni pour vous en tant que bouton de capacité sur l’appareil ou en tant que bouton dans l’interpréteur de commandes. Sur un appareil de bureau, vous ajoutez un bouton au chrome de votre application chaque fois que la navigation arrière est possible dans l’application, et cela apparaît dans la barre de titre des applications fenêtrés ou dans la barre des tâches pour le mode Tablette (Windows 10 uniquement) . L’événement de bouton Précédent est un concept universel pour toutes les familles d’appareils, et les boutons implémentés dans le matériel ou dans le logiciel déclenchent le même événement BackRequested.
L’exemple ci-dessous fonctionne pour toutes les familles d’appareils et il est judicieux pour les cas où le même traitement s’applique à toutes les pages et où vous n’avez pas besoin de confirmer la navigation (par exemple, pour avertir des modifications non enregistrées).
// 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 pour quitter l’application par programmation.
Windows.UI.Xaml.Application.Current.Exit();
Charmes
Vous n’avez pas besoin de modifier votre code qui s’intègre avec des icônes, mais vous devez ajouter une interface utilisateur à votre application pour prendre la place de la barre Charms, qui ne fait pas partie de l’interpréteur de commandes Windows 10. Une application Universelle 8.1 s’exécutant sur Windows 10 possède son propre interface utilisateur de remplacement fournie par chrome rendu par le système dans la barre de titre de l’application.
Contrôles et styles de contrôle et modèles
Une application universelle 8.1 s’exécutant sur Windows 10 conserve l’apparence et le comportement 8.1 en ce qui concerne les contrôles. Toutefois, lorsque vous transférez cette application vers une application Windows 10, il existe des différences d’apparence et de comportement à prendre en compte. L’architecture et la conception des contrôles sont essentiellement inchangées pour les applications Windows 10. Les modifications sont donc principalement liées au langage de conception, à la simplification et à l’utilisation.
Notez que l’état visuel PointerOver est pertinent dans les styles/modèles personnalisés dans les applications Windows 10 et dans les applications Windows Runtime 8.x, mais pas dans les applications du Windows Phone Store. 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 de vos applications Windows Runtime 8.x lorsque vous transférez votre application vers Windows 10. Si vous souhaitez être certain que vos styles/modèles personnalisés utilisent le dernier ensemble d’états visuels et bénéficient d’améliorations des performances apportées aux styles/modèles par défaut, modifiez une copie du nouveau modèle par défaut Windows 10 et appliquez à nouveau votre personnalisation. Un exemple d’amélioration des performances est que toute bordure précédemment placée entre un ContentPresenter ou un panneau a été supprimée et qu’un élément enfant affiche désormais la bordure.
Voici quelques exemples plus spécifiques de modifications apportées aux contrôles.
| Nom du contrôle | Modifier |
|---|---|
| AppBar | Si vous utilisez le contrôle AppBar (CommandBar est recommandé à la place), il n’est pas masqué par défaut dans une application Windows 10. Vous pouvez le contrôler avec la propriété AppBar.ClosedDisplayMode. |
| AppBar, CommandBar | Dans une application Windows 10, AppBar et CommandBar ont un bouton Afficher plus (les points de suspension). |
| CommandBar | Dans une application Windows Runtime 8.x, les commandes secondaires d’une barre de commandes sont toujours visibles. Dans une application du Windows Phone Store et dans une application Windows 10, l’affichage n’apparaît pas tant que la barre de commandes n’est pas ouverte. |
| CommandBar | Pour une application du Windows Phone Store, la valeur de CommandBar.IsSticky n’affecte pas si la barre est légèrement ignorée. Pour une application Windows 10, si IsSticky a la valeur true, la barre de commandes ignore un mouvement d’abandon clair. |
| CommandBar | Dans une application Windows 10, CommandBar ne gère pas les événements EdgeGesture.Completed ni UIElement.RightTapped. Il ne répond pas non plus à un appui ni à un mouvement de balayage vers le haut. Vous avez toujours la possibilité de gérer ces événements et de définir IsOpen. |
| DatePicker, TimePicker | Passez en revue l’apparence de votre application avec les modifications visuelles apportées à DatePicker et 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 utilisent plutôt une fenêtre contextuelle légèrement ignorée. |
| DatePicker, TimePicker | Dans une application Windows 10, vous ne pouvez pas placer DatePicker ou TimePicker à l’intérieur d’un menu volant. Si vous souhaitez que ces contrôles soient affichés dans un contrôle de type contextuel, vous pouvez utiliser DatePickerFlyout et TimePickerFlyout. |
| GridView, ListView | Pour GridView ListView/, consultez les modifications GridView et ListView. |
| Hub | Dans une application du Windows Phone Store, un contrôle Hub s’encapsule de la dernière section vers la première. Dans une application Windows Runtime 8.x et dans une application Windows 10, les sections hub ne sont pas encapsulables. |
| Hub | 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 du hub. Dans une application Windows Runtime 8.x et dans une application Windows 10, la parallaxe n’est pas utilisée. |
| Hub | Dans une application Universal 8.1, la propriété HubSection.IsHeaderInteractive provoque l’en-tête de section et un glyphe de chevron affiché à côté de celui-ci pour devenir interactif. Dans une application Windows 10, il existe une affordance interactive « Voir plus » à côté de l’en-tête, mais l’en-tête lui-même n’est pas interactif. IsHeaderInteractive détermine toujours si l’interaction déclenche l’événement Hub.SectionHeaderClick . |
| MessageDialog | Si vous utilisez MessageDialog, envisagez plutôt d’utiliser le ContentDialog plus flexible. Consultez également l’exemple De base de l’interface utilisateur XAML. |
| ListPickerFlyout, PickerFlyout | ListPickerFlyout et PickerFlyout sont déconseillés pour une application Windows 10. Pour un menu volant de sélection unique, utilisez MenuFlyout ; pour des expériences plus complexes, utilisez le menu volant. |
| PasswordBox | La propriété PasswordBox.IsPasswordRevealButtonEnabled est déconseillée dans une application Windows 10 et sa définition n’a aucun effet. Utilisez passwordBox.PasswordRevealMode à la place, qui est défini par défaut sur Peek (dans lequel un glyphe oculaire est affiché, comme dans une application Windows Runtime 8.x). Consultez également les instructions relatives aux zones de mot de passe. |
| Tableau croisé dynamique | Le contrôle Pivot est désormais universel, il n’est plus limité à l’utilisation sur les appareils mobiles. |
| SearchBox | Bien que SearchBox soit implémenté dans la famille d’appareils universels, elle n’est pas entièrement fonctionnelle sur les appareils mobiles. Voir SearchBox déconseillé en faveur d’AutoSuggestBox. |
| SemanticZoom | Pour SemanticZoom, consultez les modifications de SemanticZoom. |
| ScrollViewer | Certaines propriétés par défaut de ScrollViewer ont changé. HorizontalScrollMode est automatique, VerticalScrollMode est automatique et ZoomMode est désactivé. Si les nouvelles valeurs par défaut ne sont pas appropriées pour votre application, vous pouvez les modifier dans un style ou en tant que valeurs locales sur le contrôle lui-même. |
| TextBox | Dans une application Windows Runtime 8.x, la vérification orthographique est désactivée par défaut pour une zone de texte. Dans une application Windows Phone Store et dans une application Windows 10, elle est activée par défaut. |
| TextBox | La taille de police par défaut d’un TextBox est passée de 11 à 15. |
| TextBox | La valeur par défaut de TextBox.TextReadingOrder est passée de Default à DetectFromContent. Si cela n’est pas souhaitable, utilisez UseFlowDirection. La valeur par défaut est déconseillée. |
| Divers | La couleur d’accentuation s’applique à une application du Windows Phone Store et aux applications Windows 10, mais pas aux applications Windows Runtime 8.x. |
Pour plus d’informations sur les contrôles d’application UWP, consultez Contrôles par fonction, liste contrôles et instructions pour les contrôles.
Langage de conception dans Windows 10
Il existe quelques différences mineures mais importantes dans le langage de conception entre les applications universelles 8.1 et les applications Windows 10. Pour plus d’informations, consultez Conception. Malgré les changements de langage de conception, nos principes de conception restent cohérents : soyez attentifs aux détails, mais s’efforcent toujours de s’efforcer de s’assurer que le contenu n’est pas chrome, réduisant systématiquement les éléments visuels et restant authentiques au domaine numérique ; utiliser la hiérarchie visuelle en particulier avec la typographie ; conception sur une grille ; et apportez vos expériences à la vie avec des animations fluides.
Pixels effectifs, distance d’affichage et facteurs d’échelle
Auparavant, les pixels d’affichage étaient le moyen d’extraire la taille et la disposition des éléments d’interface utilisateur loin de la taille physique réelle et de la résolution des appareils. Les pixels d’affichage ont maintenant évolué en pixels effectifs, et voici une explication de ce terme, de ce qu’il signifie et de la valeur supplémentaire qu’il offre.
Le terme « résolution » fait référence à une mesure de densité de pixels et non, comme on le pense généralement, le nombre de pixels. La « résolution effective » est la façon dont les pixels physiques qui composent une image ou un glyphe se résolvent à l’œil en fonction des différences de distance d’affichage et de la taille des pixels physiques de l’appareil (densité de pixels étant la réciproque de la taille des pixels physiques). La résolution efficace est une bonne métrique pour créer une expérience autour de, car elle est centrée sur l’utilisateur. En comprenant tous les facteurs et en contrôlant la taille des éléments d’interface utilisateur, vous pouvez en faire une bonne expérience de l’utilisateur.
Les différents appareils sont un nombre différent de pixels effectifs larges, allant de 320 epx pour les plus petits appareils, à 1024 epx pour un moniteur de taille modeste, et bien au-delà de largeurs beaucoup plus élevées. Tout ce que vous devez faire est de continuer à utiliser des éléments de dimensionnement automatique et des panneaux de disposition dynamique comme vous l’avez toujours fait. Il existe également certains cas où vous allez définir les propriétés de vos éléments d’interface utilisateur sur une taille fixe dans le balisage XAML. Un facteur d’échelle est automatiquement appliqué à votre application en fonction de l’appareil sur lequel il s’exécute et des paramètres d’affichage effectués par l’utilisateur. Et ce facteur d’échelle sert à conserver n’importe quel élément d’interface utilisateur avec une taille fixe présentant une cible tactile de taille plus ou moins constante (et lecture) à l’utilisateur sur une grande variété de tailles d’écran. Et avec la disposition dynamique, votre interface utilisateur n’est pas simplement mise à l’échelle optique sur différents appareils. Il fera plutôt ce qui est nécessaire pour ajuster la quantité appropriée de contenu dans l’espace disponible.
Pour que votre application dispose de la meilleure expérience sur tous les affichages, nous vous recommandons de créer chaque ressource bitmap dans une plage de tailles, chacune adaptée à un facteur d’échelle particulier. Fournir des ressources à une échelle de 100 %, 200 % et une échelle de 400 % (dans cet ordre de priorité) vous donnera d’excellents résultats dans la plupart des cas à tous les facteurs d’échelle intermédiaires.
Notez que, pour une raison quelconque, vous ne pouvez pas créer des ressources de plusieurs tailles, puis créer des ressources à l’échelle de 100 %. Dans Microsoft Visual Studio, le modèle de projet par défaut pour les applications UWP fournit des ressources de personnalisation (images de vignette et logos) dans une seule taille, mais elles ne sont pas de 100 % à l’échelle. Lors de la création de ressources pour votre propre application, suivez les instructions de cette section et fournissez 100 %, 200 % et 400 % de tailles et utilisez des packs d’éléments multimédias.
Si vous avez des œuvres d’art complexes, vous voudrez peut-être fournir vos ressources en plus de tailles. Si vous commencez avec l’art vectoriel, il est relativement facile de générer des ressources de haute qualité à n’importe quel facteur d’échelle.
Nous vous déconseillons de prendre en charge tous les facteurs d’échelle, mais la liste complète des facteurs d’échelle pour les applications Windows 10 est de 100 %, 125 %, 150 %, 200 %, 250 %, 300 % et 400 %. Si vous les fournissez, le Windows Store choisit la ou les ressources de taille correcte pour chaque appareil, et seules ces ressources seront téléchargées. Le Windows Store sélectionne les ressources à télécharger en fonction de l’ppp de l’appareil. Vous pouvez réutiliser des ressources à partir de votre application Windows Runtime 8.x à des facteurs d’échelle tels que 140 % et 220 %, mais votre application s’exécute à l’un des nouveaux facteurs d’échelle et donc une mise à l’échelle bitmap sera inévitable. Testez votre application sur une gamme d’appareils pour voir si vous êtes satisfait des résultats dans votre cas.
Vous pouvez réutiliser le balisage XAML à partir d’une application Windows Runtime 8.x où les valeurs de dimension littérales sont utilisées dans le balisage (peut-être pour dimensionner des formes ou d’autres éléments, peut-être pour la typographie). Toutefois, dans certains cas, un facteur d’échelle plus important est utilisé sur un appareil pour une application Windows 10 que pour une application universelle 8.1 (par exemple, 150 % est utilisé où 140 % était avant, et 200 % est utilisé où 180 % était). Par conséquent, si vous constatez que ces valeurs littérales sont maintenant trop volumineuses sur Windows 10, essayez de les multiplier par 0.8. Pour plus d’informations, consultez La conception réactive 101 pour les applications UWP.
Modifications gridView et ListView
Plusieurs modifications ont été apportées aux setters de style par défaut pour GridView pour faire défiler le contrôle verticalement (au lieu d’horizontalement, comme il l’a fait précédemment par défaut). Si vous avez modifié une copie du style par défaut dans votre projet, votre copie n’aura pas ces modifications. Vous devrez donc les effectuer manuellement. Voici une liste des modifications.
- Le setter pour ScrollViewer.HorizontalScrollBarVisibility a changé de auto à désactivé.
- Le setter pour ScrollViewer.VerticalScrollBarVisibility a changé de Désactivé à Auto.
- Le setter pour ScrollViewer.HorizontalScrollMode est passé de Activé à Désactivé.
- Le setter pour ScrollViewer.VerticalScrollMode est passé de Désactivé à Activé.
- Dans le setter pour ItemsPanel, la valeur d’ItemsWrapGrid.Orientation est passée de Vertical à Horizontal.
Si ce dernier changement (la modification de l’orientation) semble contradictoire, n’oubliez pas que nous parlons d’une grille de wrap. Une grille d’enveloppe horizontalement orientée (la nouvelle valeur) est similaire à un système d’écriture où le texte circule horizontalement et se décompose vers la ligne suivante à la fin d’une page. Une page de texte telle que celle-ci défile verticalement. À l’inverse, une grille de retour à la ligne verticale (la valeur précédente) est similaire à un système d’écriture où le texte circule verticalement et fait donc défiler horizontalement.
Voici les aspects de GridView et listView qui ont changé ou qui ne sont pas pris en charge dans Windows 10.
- La propriété IsSwipeEnabled (applications Windows Runtime 8.x uniquement) n’est pas prise en charge pour les applications Windows 10. L’API est toujours présente, mais sa définition n’a aucun effet. Tous les mouvements de sélection précédents sont pris en charge à l’exception du balayage vers le bas (qui n’est pas pris en charge, car les données indiquent qu’elles ne sont pas détectables) et cliquez avec le bouton droit (qui est réservé pour afficher un menu contextuel).
- La propriété ReorderMode (applications du Windows Phone Store uniquement) n’est pas prise en charge pour les applications Windows 10. L’API est toujours présente, mais sa définition n’a aucun effet. Au lieu de cela, définissez AllowDrop et CanReorderItems sur true sur votre GridView ou ListView, puis l’utilisateur sera en mesure de réorganiser à l’aide d’un mouvement d’appui et de suspension (ou clic et glisser).
- 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. Si vous modifiez une copie des styles de conteneur d’éléments par défaut, vous obtiendrez le type correct.
- Les visuels de sélection ont changé pour une application Windows 10. Si vous définissez SelectionMode sur Multiple, par défaut, une case à cocher est affichée pour chaque élément. Le paramètre par défaut pour les éléments ListView signifie que la case à cocher est disposée en dehors 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écalé. Pour les éléments GridView , la case à cocher est superposée par défaut sur l’élément. Toutefois, dans les deux cas, vous pouvez contrôler la disposition (inline ou superposition) des cases à cocher (avec la propriété CheckMode) et s’ils sont affichés du tout (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.
- 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. Si la valeur de InRecycleQueue est vraie et que vous n’avez aucune tâche de récupération spéciale à effectuer, vous pouvez quitter immédiatement votre gestionnaire d’événements avec l’assurance qu’il sera entré à nouveau lorsque ce même élément est réutilisé (à quel moment InRecycleQueue sera false).
<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem|GridViewItem">
...
<Setter.Value>
<ControlTemplate TargetType="ListViewItem|GridViewItem">
<ListViewItemPresenter CheckMode="Inline|Overlay" ... />
</ControlTemplate>
</Setter.Value>
...
</Style>
Une case à cocher ListViewItemPresenter avec la case à cocher inline
ListViewItemPresenter avec une case à cocher superposée
- Avec la suppression des mouvements de balayage vers le bas et de clic droit pour la sélection (pour les raisons indiquées ci-dessus), le modèle d’interaction a changé, une conséquence qui est que les événements ItemClick et SelectionChanged ne sont plus mutuellement exclusifs. Pour votre application Windows 10, passez en revue vos scénarios et décidez s’il faut adopter le modèle d’interaction « sélection » ou « appeler ». Pour plus d’informations, consultez Comment modifier le mode d’interaction.
- Il existe des modifications apportées aux propriétés que vous utilisez pour styler ListViewItemPresenter. Les propriétés nouvelles sont CheckBoxBrush, PressedBackground, SelectedPressedBackground et FocusSecondaryBorderBrush. Les propriétés qui sont ignorées pour une application Windows 10 sont padding (utiliser ContentMargin à la place), CheckHintBrush, CheckSelectingBrush, PointerOverBackgroundMargin, ReorderHintOffset, SelectedBorderThickness et SelectedPointerOverBorderBrush.
Ce tableau 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.
| 8.1 | État de la fonctionnalité | Windows 10/11 | État de la fonctionnalité |
|---|---|---|---|
| CommonStates | CommonStates | ||
| Normale | Normale | ||
| PointerOver | PointerOver | ||
| Activé | Activé | ||
| PointerOverPressed | [indisponible] | ||
| Désactivé | [indisponible] | ||
| [indisponible] | PointerOverSelected | ||
| [indisponible] | Volumes sélectionnés | ||
| [indisponible] | PressedSelected | ||
| [indisponible] | DisabledStates | ||
| [indisponible] | Désactivé | ||
| [indisponible] | Activé(e) | ||
| SelectionHintStates | [indisponible] | ||
| VerticalSelectionHint | [indisponible] | ||
| HorizontalSelectionHint | [indisponible] | ||
| NoSelectionHint | [indisponible] | ||
| [indisponible] | MultiSelectStates | ||
| [indisponible] | MultiSelectDisabled | ||
| [indisponible] | MultiSelectEnabled | ||
| SelectionStates | [indisponible] | ||
| Désélectionner | [indisponible] | ||
| Non sélectionné | [indisponible] | ||
| UnselectedPointerOver | [indisponible] | ||
| UnselectedSwiping | [indisponible] | ||
| Sélectionnez | [indisponible] | ||
| Volumes sélectionnés | [indisponible] | ||
| SelectedSwiping | [indisponible] | ||
| SelectedUnfocused | [indisponible] |
Si vous disposez d’un modèle de contrôle ListViewItem ou GridViewItem personnalisé, examinez-le en fonction des modifications ci-dessus. Nous vous recommandons de recommencer en modifiant une copie du nouveau modèle par défaut et en appliquant à nouveau votre personnalisation. Si, pour quelque raison que ce soit, vous ne pouvez pas le faire et que vous devez modifier votre modèle existant, voici quelques conseils généraux sur la façon dont vous pourriez y aller.
- Ajoutez le nouveau groupe d’états visuels MultiSelectStates.
- Ajoutez le nouvel état visuel MultiSelectDisabled.
- Ajoutez le nouvel état visuel MultiSelectEnabled.
- Ajoutez le nouveau groupe d’états visuels DisabledStates.
- Ajoutez le nouvel état visuel Activé.
- Dans le groupe d’états visuels CommonStates, supprimez l’état visuel PointerOverPressed.
- Déplacez l’état visuel Désactivé vers le groupe d’états visuels DisabledStates.
- Ajoutez le nouvel état visuel PointerOverSelected.
- Ajoutez le nouvel état visuel PressedSelected.
- Supprimez le groupe d’états visuels SelectedHintStates.
- Dans le groupe d’états visuels SelectionStates, déplacez l’état visuel Sélectionné vers le groupe d’états visuels CommonStates.
- Supprimez l’intégralité du groupe d’états visuels SelectionStates.
Localisation et globalisation
Vous pouvez réutiliser les fichiers Resources.resw à partir de votre projet Universal 8.1 dans votre projet d’application UWP. Après avoir copié le fichier, ajoutez-le au projet et définissez l’action de génération sur PRIResource et copiez dans le répertoire de sortie pour ne pas copier. La rubrique ResourceContext.QualifierValues décrit comment charger des ressources spécifiques à la famille d’appareils en fonction du facteur de sélection des ressources de la famille d’appareils.
Jouer à
Les API de l’espace de noms Windows.Media.PlayTo sont déconseillées pour les applications Windows 10 en faveur des API Windows.Media.Cast.
Clés de ressource et tailles de style TextBlock
Le langage de conception a évolué pour Windows 10 et, par conséquent, certains styles système ont changé. Dans certains cas, vous souhaiterez revoir les conceptions visuelles de vos vues afin qu’elles soient en harmonie avec les propriétés de style qui ont changé.
Dans d’autres cas, les clés de ressource ne sont plus prises en charge. L’éditeur de balisage XAML dans Visual Studio met en évidence les références aux clés de ressource qui ne peuvent pas être résolues. Par exemple, l’éditeur de balisage XAML souligne une référence à la clé ListViewItemTextBlockStyle de style avec une bascule rouge. Si ce n’est pas corrigé, l’application se termine immédiatement lorsque vous essayez de le déployer sur l’émulateur ou l’appareil. Il est donc important d’assister à la correction du balisage XAML. Et vous trouverez Visual Studio pour être un excellent outil pour intercepter ces problèmes.
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é. Par exemple, TitleTextBlockStyle définit FontSize sur 14.667px dans une application Windows Runtime 8.x et 18.14px dans une application du Windows Phone Store. Toutefois, le même style définit FontSize sur une taille beaucoup plus grande de 24 px dans une application Windows 10. Passez en revue vos conceptions et dispositions et utilisez les styles appropriés dans les emplacements appropriés. Pour plus d’informations, consultez Instructions pour les polices et Concevoir des applications UWP.
Il s’agit d’une liste complète des clés qui ne sont plus prises en charge.
- CheckBoxAndRadioButtonMinWidthSize
- CheckBoxAndRadioButtonTextPaddingThickness
- ComboBoxFlyoutListPlaceholderTextOpacity
- ComboBoxFlyoutListPlaceholderTextThemeMargin
- ComboBoxHighlightedBackgroundThemeBrush
- ComboBoxHighlightedBorderThemeBrush
- ComboBoxHighlightedForegroundThemeBrush
- ComboBoxInlinePlaceholderTextForegroundThemeBrush
- ComboBoxInlinePlaceholderTextThemeFontWeight
- ComboBoxItemDisabledThemeOpacity
- ComboBoxItemHighContrastBackgroundThemeMargin
- ComboBoxItemMinHeightThemeSize
- ComboBoxPlaceholderTextBlockStyle
- ComboBoxPlaceholderTextThemeMargin
- CommandBarBackgroundThemeBrush
- CommandBarForegroundThemeBrush
- ContentDialogButton1HostPadding
- ContentDialogButton2HostPadding
- ContentDialogButtonsMinHeight
- ContentDialogContentLandscapeWidth
- ContentDialogContentMinHeight
- ContentDialogDimmingColor
- ContentDialogTitleMinHeight
- ControlContextualInfoTextBlockStyle
- ControlHeaderContentPresenterStyle
- ControlHeaderTextBlockStyle
- FlyoutContentPanelLandscapeThemeMargin
- FlyoutContentPanelPortraitThemeMargin
- GrabberMargin
- GridViewItemMargin
- GridViewItemPlaceholderBackgroundThemeBrush
- GroupHeaderTextBlockStyle
- HeaderContentPresenterStyle
- HighContrastBlack
- HighContrastWhite
- HubHeaderCharacterSpacing
- HubHeaderFontSize
- HubHeaderMarginThickness
- HubSectionHeaderCharacterSpacing
- HubSectionHeaderFontSize
- HubSectionHeaderMarginThickness
- HubSectionMarginThickness
- InlineWindowPlayPauseMargin
- ItemTemplate
- LeftFullWindowMargin
- LeftMargin
- ListViewEmptyStaticTextBlockStyle
- ListViewItemContentTextBlockStyle
- ListViewItemContentTranslateX
- ListViewItemMargin
- ListViewItemMultiselectCheckBoxMargin
- ListViewItemSubheaderTextBlockStyle
- ListViewItemTextBlockStyle
- MediaControlPanelAudioThemeBrush
- MediaControlPanelPhoneVideoThemeBrush
- MediaControlPanelVideoThemeBrush
- MediaControlPanelVideoThemeColor
- MediaControlPlayPauseThemeBrush
- MediaControlTimeRowThemeBrush
- MediaControlTimeRowThemeColor
- MediaDownloadProgressIndicatorThemeBrush
- MediaErrorBackgroundThemeBrush
- MediaTextThemeBrush
- MenuFlyoutBackgroundThemeBrush
- MenuFlyoutBorderThemeBrush
- MenuFlyoutLandscapeThemePadding
- MenuFlyoutLeftLandscapeBorderThemeThickness
- MenuFlyoutPortraitBorderThemeThickness
- MenuFlyoutPortraitThemePadding
- MenuFlyoutRightLandscapeBorderThemeThickness
- MessageDialogContentStyle
- MessageDialogTitleStyle
- MinimalWindowMargin
- PasswordBoxCheckBoxThemeMargin
- PhoneAccentBrush
- PhoneBackgroundBrush
- PhoneBackgroundColor
- PhoneBaseBlackColor
- PhoneBaseHighColor
- PhoneBaseLowColor
- PhoneBaseLowSolidColor
- PhoneBaseMediumHighColor
- PhoneBaseMediumMidColor
- PhoneBaseMediumMidSolidColor
- PhoneBaseMidColor
- PhoneBaseWhiteColor
- PhoneBorderThickness
- PhoneButtonBasePressedForegroundBrush
- PhoneButtonContentPadding
- PhoneButtonFontWeight
- PhoneButtonMinHeight
- PhoneButtonMinWidth
- PhoneChromeBrush
- PhoneChromeColor
- PhoneControlBackgroundColor
- PhoneControlDisabledColor
- PhoneControlForegroundColor
- PhoneDisabledBrush
- PhoneDisabledColor
- PhoneFontFamilyLight
- PhoneFontFamilySemiBold
- PhoneForegroundBrush
- PhoneForegroundColor
- PhoneHighContrastSelectedBackgroundThemeBrush
- PhoneHighContrastSelectedForegroundThemeBrush
- PhoneImagePlaceholderColor
- PhoneLowBrush
- PhoneMidBrush
- PhonePageBackgroundColor
- PhonePivotLockedTranslation
- PhonePivotUnselectedItemOpacity
- PhoneRadioCheckBoxBorderBrush
- PhoneRadioCheckBoxBrush
- PhoneRadioCheckBoxCheckBrush
- PhoneRadioCheckBoxPressedBrush
- PhoneStrokeThickness
- PhoneTextHighColor
- PhoneTextLowColor
- PhoneTextMidColor
- PhoneTextOverAccentColor
- PhoneTouchTargetLargeOverhang
- PhoneTouchTargetOverhang
- PivotHeaderItemPadding
- PlaceholderContentPresenterStyle
- ProgressBarHighContrastAccentBarThemeBrush
- ProgressBarIndeterminateRectagleThemeSize
- ProgressBarRectangleStyle
- ProgressRingActiveBackgroundOpacity
- ProgressRingElipseThemeMargin
- ProgressRingElipseThemeSize
- ProgressRingTextForegroundThemeBrush
- ProgressRingTextThemeMargin
- ProgressRingThemeSize
- RichEditBoxTextThemeMargin
- RightFullWindowMargin
- RightMargin
- ScrollBarMinThemeHeight
- ScrollBarMinThemeWidth
- ScrollBarPanningThumbThemeHeight
- ScrollBarPanningThumbThemeWidth
- SliderThumbDisabledBorderThemeBrush
- SliderTrackBorderThemeBrush
- SliderTrackDisabledBorderThemeBrush
- TextBoxBackgroundColor
- TextBoxBorderColor
- TextBoxDisabledHeaderForegroundThemeBrush
- TextBoxFocusedBackgroundThemeBrush
- TextBoxForegroundColor
- TextBoxPlaceholderColor
- TextControlHeaderMarginThemeThickness
- TextControlHeaderMinHeightSize
- TextStyleExtraExtraLargeFontSize
- TextStyleExtraLargePlusFontSize
- TextStyleMediumFontSize
- TextStyleSmallFontSize
- TimeRemainingElementMargin
SearchBox déconseillé en faveur de AutoSuggestBox
Bien que SearchBox soit implémenté dans la famille d’appareils universels, elle n’est pas entièrement fonctionnelle sur les appareils mobiles. Utilisez AutoSuggestBox pour votre expérience de recherche universelle. Voici comment implémenter généralement une expérience de recherche avec AutoSuggestBox.
Une fois que l’utilisateur commence à taper, l’événement TextChanged est déclenché, avec une raison d’UserInput. Vous remplissez ensuite la liste des suggestions et définissez ItemsSource du AutoSuggestBox. Lorsque l’utilisateur navigue dans la liste, l’événement SuggestionChosen est déclenché (et si vous avez défini TextMemberDisplayPath, la zone de texte est renseignée automatiquement avec la propriété spécifiée). Lorsque l’utilisateur envoie un choix avec la clé Entrée, l’événement QuerySubmitted est déclenché, à quel moment vous pouvez effectuer des actions sur cette suggestion (dans ce cas, la navigation vers une autre page avec plus d’informations sur le contenu spécifié). Notez que les propriétés LanguageDetails et Language de SearchBoxQuerySubmittedEventArgs ne sont plus prises en charge (il existe des API équivalentes pour prendre en charge cette fonctionnalité). KeyModifiers n’est plus pris en charge.
AutoSuggestBox prend également en charge les éditeurs de méthode d’entrée (IMEs). Et, si vous souhaitez afficher une icône « rechercher », vous pouvez également le faire (l’interaction avec l’icône entraîne l’déclencher de l’événement QuerySubmitted ).
<AutoSuggestBox ... >
<AutoSuggestBox.QueryIcon>
<SymbolIcon Symbol="Find"/>
</AutoSuggestBox.QueryIcon>
</AutoSuggestBox>
Consultez également l’exemple de portage AutoSuggestBox.
Modifications semanticZoom
Le mouvement de zoom arrière d’une SémantiqueZoom a convergé sur le modèle Windows Phone, qui consiste à appuyer ou cliquer sur un en-tête de groupe (par conséquent, sur les ordinateurs de bureau, l’affordance du bouton moins pour effectuer un zoom arrière n’est plus affichée). Maintenant, nous obtenons le même comportement cohérent et gratuit sur tous les appareils. L’une des différences esthétiques du modèle Windows Phone est que l’affichage zoom arrière (la liste de raccourcis) remplace la vue zoomée plutôt que de la superposition. Pour cette raison, vous pouvez supprimer tous les arrière-plans semi-opaques des vues avec zoom arrière-plan.
Dans une application du Windows Phone Store, la vue avec zoom arrière s’étend à la taille de l’écran. Dans une application Windows Runtime 8.x et dans une application Windows 10, la taille de la vue avec zoom arrière est limitée aux limites du contrôle SemanticZoom .
Dans une application du Windows Phone Store, le contenu derrière la vue zoom arrière (dans l’ordre z) s’affiche si la vue avec zoom arrière-plan a une transparence en arrière-plan. Dans une application Windows Runtime 8.x et dans une application Windows 10, rien n’est visible derrière la vue zoom arrière.
Dans une application Windows Runtime 8.x, lorsque l’application est désactivée et réactivée, la vue avec zoom arrière est ignorée (si elle était affichée) et la vue zoomée est affichée à la place. Dans une application Windows Phone Store et dans une application Windows 10, la vue avec zoom arrière reste affichée si elle était affichée.
Dans une application du Windows Phone Store et dans une application Windows 10, la vue avec zoom arrière est ignorée lorsque le bouton Précédent est enfoncé. Pour une application Windows Runtime 8.x, il n’existe aucun traitement de bouton précédent intégré. Par conséquent, la question ne s’applique pas.
Paramètres
La classe SettingsPane Windows Runtime 8.x n’est pas appropriée pour Windows 10. Au lieu de cela, en plus de créer une page Paramètres, vous devez permettre à vos utilisateurs d’y accéder à partir de votre application. Nous vous recommandons d’exposer cette page Paramètres de l’application au niveau supérieur, en tant que dernier élément épinglé dans votre volet de navigation, mais voici l’ensemble complet de vos options.
- Volet de navigation. Les paramètres doivent être le dernier élément de la liste de choix de navigation et épinglés au bas.
- Barre d’applications/barre d’outils (dans une vue onglets ou disposition de tableau croisé dynamique). Les paramètres doivent être le dernier élément dans le menu volant de la barre d’applications ou de la barre d’outils. Il n’est pas recommandé que les paramètres soient l’un des éléments de niveau supérieur dans la navigation.
- Hub. Les paramètres doivent se trouver à l’intérieur du menu volant du menu (peut se trouver à partir du menu de la barre d’application ou du menu de la barre d’outils dans la disposition hub).
Il n’est pas également recommandé d’enterrer les paramètres dans un volet maître-détail.
Votre page Paramètres doit remplir l’ensemble de la fenêtre de votre application, et votre page Paramètres est également l’endroit où About et Feedback doivent être. Pour obtenir des conseils sur la conception de votre page Paramètres, consultez Recommandations pour les paramètres de l’application.
Détails
Le texte (ou la typographie) est un aspect important d’une application UWP et, lors du portage, vous pouvez revoir les conceptions visuelles de vos vues afin qu’elles soient en harmonie avec le nouveau langage de conception. Utilisez ces illustrations pour rechercher les styles système TextBlock plateforme Windows universelle (UWP) disponibles. Recherchez ceux qui correspondent aux styles Silverlight windows Phone que vous avez utilisés. Vous pouvez également créer vos propres styles universels et copier les propriétés des styles système Silverlight Windows Phone dans celles-ci.
Styles TextBlock système pour les applications Windows 10
Dans les applications Windows Runtime 8.x et les applications du Windows Phone Store, la famille de polices par défaut est l’interface utilisateur globale. Dans une application Windows 10, la famille de polices par défaut est Segoe UI. Par conséquent, les métriques de police dans votre application peuvent sembler différentes. Si vous souhaitez reproduire l’apparence de votre texte 8.1, vous pouvez définir vos propres métriques à l’aide de propriétés telles que LineHeight et LineStackingStrategy.
Dans les applications Windows Runtime 8.x et les applications du Windows Phone Store, la langue par défaut du texte est définie sur la langue de la build ou sur en-us. Dans une application Windows 10, la langue par défaut est définie sur la langue de l’application supérieure (secours de police). Vous pouvez définir explicitement FrameworkElement.Language , mais vous apprécierez un meilleur comportement de secours de police si vous ne définissez pas de valeur pour cette propriété.
Pour plus d’informations, consultez Instructions pour les polices et Concevoir des applications UWP. Consultez également la section Contrôles ci-dessus pour connaître les modifications apportées aux contrôles de texte.
Modifications du thème
Pour une application 8.1 universelle, le thème par défaut est sombre par défaut. 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. Par exemple, pour utiliser un thème sombre sur tous les appareils, ajoutez RequestedTheme="Dark" à l’élément Application racine.
Vignettes et toasts
Pour les vignettes et les toasts, les modèles que vous utilisez continueront de fonctionner dans votre application Windows 10. Toutefois, il existe de nouveaux modèles adaptatifs disponibles pour vous permettre d’utiliser, et ceux-ci sont décrits dans notifications, vignettes, toasts et badges.
Auparavant, sur les ordinateurs de bureau, une notification toast était un message transitoire. Elle disparaîtrait et ne serait plus récupérable, une fois qu’elle a été manquée ou ignorée. Sur Windows Phone, si une notification toast est ignorée ou temporairement ignorée, elle se trouve dans le Centre de notifications. À présent, le Centre de notifications n’est plus limité à la famille d’appareils mobiles.
Pour envoyer une notification toast, il n’est plus nécessaire de déclarer une fonctionnalité.
Taille de la fenêtre
Pour une application universelle 8.1, l’élément manifeste de l’application ApplicationView est utilisé pour déclarer une largeur de fenêtre minimale. Dans votre application UWP, vous pouvez spécifier une taille minimale (largeur et hauteur) avec du code impératif. La taille minimale par défaut est 500x320epx, et c’est également la plus petite taille minimale acceptée. La plus grande taille minimale acceptée est 500x500epx.
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetPreferredMinSize
(new Size { Width = 500, Height = 500 });
La rubrique suivante porte sur le portage des E/S, des appareils et du modèle d’application.