Dimensionnement compact pour les contrôles

Les contrôles WinUI 3 sont conçus avec un espacement optimisé pour l’interaction tactile. Pour les applications de bureau où les utilisateurs utilisent principalement une souris ou un clavier, vous pouvez appliquer un style de densité compact pour réduire la hauteur et le remplissage des contrôles. Cela rend plus de contenu visible à l’écran sans demander à l’utilisateur de faire défiler.

Le dimensionnement compact s’applique aux contrôles interactifs courants tels que Button, , CheckBoxComboBox, TextBox, , Slideret d’autres.

Appliquer une taille compacte à une page

Ajoutez le dictionnaire de ressources de dimensionnement compact aux ressources de votre page ou panneau :

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

Cette substitution s’applique à tous les contrôles présents sur la page. Vous pouvez l’étendre à un panneau spécifique en plaçant le dictionnaire de ressources dans le panneau Resources au lieu de la page Resources.

Appliquer le dimensionnement compact à l’ensemble de l’application

Pour appliquer le dimensionnement compact à toutes les pages de votre application, ajoutez le dictionnaire de ressources à App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Important

Fusionnez le dictionnaire compact aprèsXamlControlsResources afin qu’il remplace correctement les valeurs de taille par défaut.

Changer de dimensionnement au moment de l’exécution

Vous pouvez activer le dimensionnement compact au moment de l’exécution en ajoutant ou en supprimant le dictionnaire de ressources des ressources d’un panneau :

// Apply compact sizing
var compactDict = new ResourceDictionary
{
    Source = new Uri("ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml")
};
MyPanel.Resources.MergedDictionaries.Add(compactDict);

// Remove compact sizing (restore default sizing)
MyPanel.Resources.MergedDictionaries.Remove(compactDict);

Choix d’une densité

Scénario Recommendation
Applications de productivité ou d’entrée de données (tables, formulaires, paramètres) Dimensionnement compact
Applications ou applications grand public conçues pour l’entrée tactile Dimensionnement par défaut
Applications mixtes avec un panneau de paramètres Appliquer une taille compacte uniquement au panneau Paramètres

WinUI 3 fournit uniquement deux niveaux de densité : par défaut et compact. Il n’existe aucune API pour définir une valeur de densité arbitraire.

Ouvrez l’application WinUI 3 Gallery et découvrez le dimensionnement compact en action

Icône galerie WinUI 3 L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI. Obtenez l’application à partir du Microsoft Store ou parcourez le code source sur GitHub.
  • Last updated on