Partager via

Ombres dans les applications Windows

Windows applications utilisent des ombres pour exprimer la profondeur et ajouter une hiérarchie visuelle. Les ombres permettent de créer l’apparence de l’élévation, guidant l’attention de l’utilisateur sur les éléments les plus importants de votre interface.

L’ombre est une façon dont un utilisateur perçoit l’élévation. La lumière au-dessus d’un objet élevé crée une ombre sur le surface ci-dessous. Plus l’objet est élevé, plus l’ombre devient plus grande et plus douce. Les objets élevés dans votre interface utilisateur n’ont pas besoin d’ombres, mais ils aident à créer l’apparence de l’élévation.

Dans Windows applications, les ombres doivent être utilisées de manière délibérée plutôt que esthétique. L’utilisation d’un trop grand nombre d’ombres diminue ou élimine la capacité de l’ombre à concentrer l’utilisateur.

Si vous utilisez des contrôles standard, les ombres sont déjà incorporées dans votre interface utilisateur. Toutefois, vous pouvez inclure manuellement des ombres dans votre interface utilisateur à l’aide des API ThemeShadow ou DropShadow .

ThemeShadow

Le type ThemeShadow peut être appliqué à n’importe quel élément XAML pour dessiner les ombres de manière appropriée en fonction des coordonnées x, y, z.

  • Il applique des ombres aux éléments basés sur la valeur de profondeur z, en émulant la profondeur.
  • Il maintient les ombres cohérentes dans l’ensemble et dans les applications grâce à l’esthétique intégrée de l’ombre.

Voici comment ThemeShadow a été implémenté sur un MenuFlyout. MenuFlyout a une ombre intégrée avec une profondeur de 32px appliquée au menu principal et à tous les menus imbriqués.

Capture d’écran de ThemeShadow appliquée à un MenuFlyout avec trois menus ouverts et imbriqués.

Ouvrez l’application Galerie WinUI et consultez ThemeShadow en action

ThemeShadow dans les contrôles courants

Les contrôles courants suivants utilisent automatiquement ThemeShadow pour caster des ombres à partir de 32 px de profondeur, sauf indication contraire :

ThemeShadow dans les fenêtres contextuelles

Il arrive souvent que l’interface utilisateur de votre application utilise une fenêtre contextuelle pour les scénarios où vous avez besoin de l’attention de l’utilisateur et d’une action rapide. Il s’agit d’exemples exceptionnels lorsque l’ombre doit être utilisée pour aider à créer une hiérarchie dans l’interface utilisateur de votre application.

ThemeShadow convertit automatiquement les ombres lorsqu’elles sont appliquées à n’importe quel élément XAML dans une fenêtre contextuelle. Il projette des ombres sur le fond de l'application et sur les autres pop-ups ouverts en dessous.

Pour utiliser ThemeShadow avec des fenêtres contextuelles, utilisez la Shadow propriété pour appliquer un ThemeShadow à un élément XAML. Ensuite, élever l’élément par rapport aux autres éléments derrière eux, par exemple en utilisant le composant z de la propriété Translation. Pour la plupart des interfaces utilisateur contextuelles, l’élévation par défaut recommandée par rapport au contenu d’arrière-plan de l’application est de 32 pixels effectifs.

Cet exemple montre un rectangle dans une fenêtre contextuelle projetant une ombre sur le contenu de l'arrière-plan de l'application et toute autre fenêtre contextuelle située derrière.

<Popup>
    <Rectangle x:Name="PopupRectangle" Fill="Lavender" Height="48" Width="96">
        <Rectangle.Shadow>
            <ThemeShadow />
        </Rectangle.Shadow>
    </Rectangle>
</Popup>

// Elevate the rectangle by 32px
PopupRectangle.Translation += new Vector3(0, 0, 32);

Fenêtre contextuelle rectangulaire unique avec une ombre.

Désactivation du ThemeShadow par défaut sur les contrôles Flyout personnalisés

Les contrôles basés sur flyout, DatePickerFlyout, MenuFlyout ou TimePickerFlyout utilisent automatiquement ThemeShadow pour caster une ombre.

Si l’ombre par défaut ne semble pas correcte sur le contenu de votre contrôle, vous pouvez la désactiver en définissant la propriété false sur l’élément FlyoutPresenter associé :

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="IsDefaultShadowEnabled" Value="False" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
</Flyout>

ThemeShadow dans d’autres éléments

Note

À compter de Windows 11, si l’application cible le kit sdk Windows version 22000 ou ultérieure, la collection Receivers est ignorée. Toutefois, il n’y aura pas d’erreurs et l’ombre continue de fonctionner.

En général, nous vous encourageons à réfléchir attentivement à votre utilisation de l’ombre et à limiter son utilisation aux cas où il introduit une hiérarchie visuelle significative. Toutefois, nous fournissons un moyen de caster une ombre à partir de n’importe quel élément d’interface utilisateur si vous avez des scénarios avancés qui en ont besoin.

Pour projeter une ombre à partir d’un élément XAML qui n’est pas dans une fenêtre contextuelle, vous devez spécifier explicitement les autres éléments qui peuvent recevoir l’ombre dans la collection ThemeShadow.Receivers. Les récepteurs ne peuvent pas être un ancêtre de l'émetteur dans l’arborescence visuelle.

Cet exemple montre deux rectangles qui cassent des ombres sur une grille derrière eux :

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>

    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />

    <Rectangle x:Name="Rectangle1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />

    <Rectangle x:Name="Rectangle2" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
</Grid>

/// Add BackgroundGrid as a shadow receiver and elevate the casting buttons above it
SharedShadow.Receivers.Add(BackgroundGrid);

Rectangle1.Translation += new Vector3(0, 0, 16);
Rectangle2.Translation += new Vector3(120, 0, 32);

Deux rectangles turquoises à côté de l’autre, tous deux avec des ombres.

Ombre portée

DropShadow ne fournit pas de valeurs d’ombre intégrées et vous devez les spécifier vous-même. Pour obtenir des exemples d’implémentations, consultez la classe DropShadow .

Conseil / Astuce

À compter de Windows 11, si l’application cible le kit sdk Windows version 22000 ou ultérieure, ThemeShadow se comporte comme une ombre portée. Si vous utilisez DropShadow, vous pouvez envisager d’utiliser ThemeShadow à la place.

Quelle ombre dois-je utiliser ?

Propriété ThemeShadow DropShadow
Kit de développement logiciel (SDK) Min SDK 18362 SDK 14393
Adaptabilité Oui Non
Personnalisation Non Oui
Source de lumière Aucun Aucun
Pris en charge dans les environnements 3D Oui (Pendant qu’elle fonctionne dans un environnement 3D, les ombres sont émulées.) Non
  • Gardez à l’esprit que l’objectif de l’ombre est de fournir une hiérarchie significative, pas comme un traitement visuel simple.
  • En règle générale, nous vous recommandons d’utiliser ThemeShadow, qui fournit des valeurs d’ombre cohérentes.
  • Pour des problèmes de performances, limitez le nombre d’ombres, utilisez d’autres traitements visuels ou utilisez DropShadow.
  • Si vous avez des scénarios plus avancés pour atteindre la hiérarchie visuelle, envisagez d’utiliser d’autres traitements visuels (par exemple, couleur). Si l’ombre est nécessaire, utilisez DropShadow.
  • Last updated on