Taille et densité du contrôle

  • Article

Utilisez une combinaison de taille et de densité du contrôle pour optimiser votre application Windows et fournir une expérience utilisateur qui convient le mieux pour les exigences de fonctionnalités et d’interaction de votre application.

Par défaut, les applications UWP sont rendues avec une mise en page à faible densité (ou Standard). Toutefois, depuis WinUI 2.1, une option de mise en page à haute densité (ou Compact), pour une interface utilisateur riche en informations et des scénarios similaires spécialisés, est également prise en charge. Il est possible de la spécifier via une ressource de style de base (voir les exemples ci-dessous).

Alors que la fonctionnalité et le comportement n’ont pas changé et restent cohérents entre les deux options de taille et de densité, la taille de police de corps par défaut a été mise à jour sur 14px pour tous les contrôles afin de prendre en charge ces deux options de densité. Cette taille de police est compatible entre les divers appareils et régions, et garantit que votre application demeure équilibrée et agréable pour les utilisateurs.

Exemples

Si vous avez installé l’application WinUI 2 Gallery , cliquez ici pour [ouvrir l’application et voir le dimensionnement compact en action](winui2gallery:/item/Compact Sizing).

Taille Fluent Standard

La taille Fluent Standard a été créée pour fournir un équilibre entre le confort de l’utilisateur et la densité des informations. Tous les éléments sur l’écran s’alignent sur une cible de pixels effectifs (epx) de 40x40, ce qui permet d’aligner les éléments de l’interface utilisateur sur une grille et de les mettre à l’échelle de manière appropriée en fonction de la mise à l’échelle au niveau du système.

La taille Standard est conçue pour prendre en charge les entrées tactiles et du pointeur.

Notes

Pour plus d’informations sur les pixels effectifs et la mise à l’échelle, consultez Tailles d’écran et points d’arrêt

Pour plus d’informations sur la mise à l’échelle au niveau du système, consultez Alignement, marge, remplissage.

Pour Windows 10 October 2018 Update (version 1809), la taille standard par défaut de tous les contrôles UWP a été diminuée pour accroître la facilité d’utilisation dans tous les scénarios d’utilisation.

L’illustration suivante montre certains changements de la mise en forme du contrôle qui ont été introduits dans Windows 10 October 2018 Update. Plus précisément, la marge entre un en-tête et le haut d’un contrôle a été réduite de 8epx à 4epx, et la grille 44epx a été remplacée par une grille 40epx.

Exemple de mise en forme de contrôle standard

*Exemple de disposition de contrôle standard

L’image suivante montre les modifications apportées aux tailles de contrôle pour Windows 10 October 2018 Update. Plus précisément, l’alignement sur la grille 40epx.

Exemple de commande standard

Taille Fluent Compact

La taille Compact permet d’obtenir des groupes de contrôles denses et riches en informations, et elle peut être utile pour ce qui suit :

  • Parcourir de grandes quantités de contenu.
  • Optimisation du contenu visible sur une page.
  • Navigation et interaction avec les contrôles et le contenu

La taille Compact est principalement conçue pour prendre en charge les entrées du pointeur.

Exemples de dimensionnement compact

La taille Compact est implémentée via un dictionnaire de ressources spécial qui peut être spécifié dans votre application au niveau de la page ou dans une mise en forme spécifique. Le dictionnaire de ressources est disponible dans le package Nuget WinUI.

Les exemples suivants montrent comment le Compact style peut être appliqué à la page et à un contrôle Grid individuel.

Niveau page

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

Niveau grille

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

Obtenir l’exemple de code