Effet RévélerReveal Highlight

Image Hero

Révéler est un effet lumineux qui met en évidence les éléments interactifs, comme les barres de commandes, quand l’utilisateur place le pointeur à leur proximité.Reveal Highlight is a lighting effect that highlights interactive elements, such as command bars, when the user moves the pointer near them.

API importantes : classe RevealBrush, classe RevealBackgroundBrush, classe RevealBorderBrush, classe RevealBrushHelper, classe VisualStateImportant APIs: RevealBrush class, RevealBackgroundBrush class, RevealBorderBrush class, RevealBrushHelper class, VisualState class

FonctionnementHow it works

L’effet Révéler attire l’attention sur des éléments interactifs en révélant le conteneur de l’élément quand le pointeur se trouve à proximité, comme présenté dans l’illustration suivante :Reveal Highlight calls attention to interactive elements by revealing the element's container when the pointer is nearby, as shown in this illustration:

Visuel de l’effet Révéler

L’effet Révéler expose les bordures masquées qui se trouvent autour des objets, pour permettre aux utilisateurs de mieux comprendre l’espace avec lequel ils interagissent et voir les actions à leur disposition.By exposing the hidden borders around objects, Reveal gives users a better understanding of the space that they are interacting with, and helps them understand the actions available. Ceci est spécialement important dans les contrôles de liste et les groupes de boutons.This is especially important in list controls and groupings of buttons.

ExemplesExamples

Galerie de contrôles XAMLXAML Controls Gallery
XAML controls gallery

Si vous disposez de l’application Galerie de contrôles XAML, cliquez ici pour ouvrez l’application et voir l’effet Révéler en action .If you have the XAML Controls Gallery app installed, click here to open the app and see Reveal in action.

Résumé de la vidéoVideo summary

Comment l’utiliserHow to use it

L’effet Révéler fonctionne automatiquement pour certains contrôles.Reveal automatically works for some controls. Pour d’autres contrôles, vous pouvez activer l’effet Révéler en affectant un style spécial au contrôle, comme décrit dans les sections Activer Révéler sur d’autres contrôles et Activer Révéler sur les contrôles personnalisés de cet article.For other controls, you can enable Reveal by assigning a special style to the control, as described in the Enabling Reveal on other controls and Enabling Reveal on custom controls sections of this article.

Contrôles utilisant automatiquement RévélerControls that automatically use Reveal

Ces illustrations montrent l’effet Révéler sur plusieurs contrôles différents :These illustrations show Reveal Highlight on several different controls:

Exemples d’effets Révéler

Activer Révéler sur d’autres contrôlesEnabling Reveal on other controls

Si vous avez besoin d’appliquer Révéler pour votre scénario (ces contrôles se trouvent dans le contenu principal et/ou sont utilisés dans des contrôles de liste ou de collecte), nous mettons à votre disposition des styles de ressource qui vous permettent d’activer Révéler dans ces situations.If you have a scenario where Reveal should be applied (these controls are main content and/or are used in a list or collection orientation), we've provided opt-in resource styles that allow you to enable Reveal for those types of situations.

Ces contrôles n’utilisent pas Révéler par défaut, car il s’agit de contrôles mineurs, en général des contrôles annexes aux éléments essentiels de votre application ; cependant, chaque application est différente, et si ces contrôles sont ceux qui sont le plus utilisés dans votre application, nous proposons certains styles qui vous seront utiles pour ce faire :These controls do not have Reveal by default as they are smaller controls that are usually helper controls to the main focal points of your application; but every app is different, and if these controls are used the most in your app, we've provided some styles to aid with that:

Nom du contrôleControl Name Nom de ressourceResource Name
BoutonButton ButtonRevealStyleButtonRevealStyle
ToggleButtonToggleButton ToggleButtonRevealStyleToggleButtonRevealStyle
RepeatButtonRepeatButton RepeatButtonRevealStyleRepeatButtonRevealStyle
AppBarButtonAppBarButton AppBarButtonRevealStyleAppBarButtonRevealStyle
AppBarToggleButtonAppBarToggleButton AppBarToggleButtonRevealStyleAppBarToggleButtonRevealStyle
GridViewItem (Révéler le premier plan du contenu)GridViewItem (Reveal overtop of content) GridViewItemRevealBackgroundShowsAboveContentStyleGridViewItemRevealBackgroundShowsAboveContentStyle

Pour appliquer ces styles, définissez simplement la propriété Style du contrôle :To apply these styles, simply set the control's Style property:

<Button Content="Button Content" Style="{ThemeResource ButtonRevealStyle}"/>

Révéler dans les thèmesReveal in themes

Révéler change légèrement en fonction du thème demandé pour le contrôle, l’application ou le paramètre utilisateur.Reveal changes slightly depending on the requested theme of the control, app or user setting. Dans le thème Dark, la bordure et les éléments sélectionnés apparaissent en blanc avec Révéler, tandis que dans le thème Light, seules les bordures sont obscurcies en gris clair.In Dark theme Reveal's Border and Hover light is white, but in Light theme just the Borders darken to a light gray.

Révéler dans les thèmes Dark et Light

Pour activer les bordures blanches dans le thème Light, définissez simplement le thème demandé pour le contrôle sur « Dark ».To enabled white borders while in light theme, simply set the requested theme on the control to Dark.

<Grid RequestedTheme="Dark">
    <Button Content="Button" Click="Button_Click" Style="{ThemeResource ButtonRevealStyle}"/>
</Grid>

Vous pouvez aussi changer le TargetTheme pour RevealBorderBrush en « Dark ».Or change the TargetTheme on the RevealBorderBrush to Dark. Rappelez-vous de ceci :Remember! si TargetTheme est défini sur « Dark », l’effet Révéler sera blanc, tandis que s’il est défini sur « Light », les bordures avec Révéler seront grises.If the TargetTheme is set to Dark, then Reveal will be white, but if it's set to Light, Reveal's borders will be gray.

 <RevealBorderBrush x:Key="MyLightBorderBrush" TargetTheme="Dark" Color="{ThemeResource SystemAccentColor}" FallbackColor="{ThemeResource SystemAccentColor}" />

Activer Révéler sur les contrôles personnalisésEnabling Reveal on custom controls

Vous pouvez ajouter l’effet Révéler à des contrôles personnalisés.You can add Reveal to custom controls. Avant de le faire, il est utile d’en savoir un peu plus sur le fonctionnement de l’effet Révéler.Before you do, it's helpful to know a little more about how the Reveal effect works. Révéler est composé de deux effets distincts : Révéler la bordure et Révéler le pointage.Reveal is made up of two separate effects: Reveal border and Reveal hover.

  • Révéler la bordure montre les bordures des éléments interactifs quand un pointeur se trouve à proximité.Border shows the borders of interactive elements when a pointer is nearby by. Cet effet vous indique que vous pouvez réaliser des actions avec les objets à proximité, similaires à celles de l’élément sélectionné.This effect shows you that those nearby objects can take actions similar to the one currently focused.
  • Révéler le pointage applique un halo léger autour de l’élément pointé ou qui a le focus, et produit une animation par pression lancée d’un clic.Hover applies a gentle halo shape around the hovered or focused item and plays a press animation on click.

Couches de l’effet Révéler

Ces effets sont définis par deux pinceaux :These effects are defined by two brushes:

  • Révéler la bordure est défini par RevealBorderBrushBorder Reveal is defined by RevealBorderBrush
  • Révéler le pointage est défini par RevealBackgroundBrushHover Reveal is defined by RevealBackgroundBrush
<RevealBorderBrush x:Key="MyRevealBorderBrush" TargetTheme="Light" Color="{ThemeResource SystemAccentColor}" FallbackColor="{ThemeResource SystemAccentColor}"/>
<RevealBackgroundBrush x:Key="MyRevealBackgroundBrush" TargetTheme="Light" Color="{StaticResource SystemAccentColor}" FallbackColor="{StaticResource SystemAccentColor}" />

Dans la plupart des cas, nous gérons l’utilisation des deux effets en activant Révéler automatiquement pour certains contrôles.In most cases we handle the usage of both of them by turning Reveal on automatically for a certain controls. Cependant, d’autres contrôles doivent être activés en appliquant un style ou en modifiant directement leurs modèles.However, other controls will need to be enabled through applying a style, or changing their templates directly.

Quand ajouter l’effet RévélerWhen to add Reveal

Vous pouvez ajouter Révéler à vos contrôles personnalisés, mais avant de le faire, examinez le type de contrôle ainsi que son comportement.You can add Reveal to your custom controls--but before you do, consider the type of control and how it behaves.

  • Si votre contrôle personnalisé est un élément interactif unique et qu’aucun contrôle similaire ne partage son espace (comme des éléments de menu dans un menu), il est probable que votre contrôle personnalisé n’ait pas besoin de Révéler.If your custom control is a single interactive element and doesn't have similar controls sharing it's space (such as menu items in a menu), it's likely that your custom control doesn't need Reveal.
  • Si vous avez un regroupement de contenus ou d’éléments interactifs associés, il est alors probable que cette zone de votre application ait besoin de l’effet Révéler. Cette zone est communément appelée une surface Commandes.If you have a grouping of related interactive content or elements, then it's likely that that region of your app does need Reveal - this is commonly referred to as a Commanding surface.

Par exemple, vous ne devez pas utiliser Révéler sur un bouton seul, mais vous devez l’utiliser sur un ensemble de boutons d’une barre de commandes.For example, a button by itself shouldn't use reveal, but a set of buttons in a command bar should use Reveal.

Utilisation du modèle de contrôle pour ajouter RévélerUsing the control template to add Reveal

Pour activer Révéler sur des contrôles personnalisés ou des contrôles remodélisés, vous devez modifier le modèle de contrôle du contrôle.To enable Reveal on custom controls or re-templated controls, you modify the control's control template. La plupart des modèles de contrôle ont une grille à la racine ; mettez à jour le VisualState de cette grille racine pour utiliser Révéler :Most control templates have a grid at the root; update the VisualState of that root grid to use Reveal:

<VisualState x:Name="PointerOver">
    <VisualState.Setters>
        <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver" />
        <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
        <Setter Target="ContentPresenter.BorderBrush" Value="Transparent"/>
        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
    </VisualState.Setters>
</VisualState>

Il est important de noter que Révéler a besoin du pinceau et des méthodes setter dans son état visuel pour fonctionner correctement.It's important to note that Reveal needs both the brush and the setters in it's Visual State to work correctly. Il ne suffit pas de définir le pinceau d’un contrôle sur une des ressources de pinceaux Révéler pour que Révéler soit activé pour ce contrôle.Simply setting a control's brush to one of our Reveal brush resources alone won't enable Reveal for that control. À l’opposé, avoir seulement les cibles ou les paramètres sans les valeurs des pinceaux Révéler ne suffit pas non plus pour activer cet effet.Conversely, having only the targets or settings without the values being Reveal brushes will also not enable Reveal.

Pour plus d’informations sur la modification des modèles de contrôle, consultez l’article Modèles de contrôles XAML.To learn more about modifying control templates, see the XAML control templates article.

Nous avons créé un ensemble de pinceaux Révéler système que vous pouvez utiliser pour personnaliser votre modèle.We've created a set of system Reveal brushes you can use to customize your template. Par exemple, vous pouvez utiliser le pinceau ButtonRevealBackground pour créer un arrière-plan de bouton personnalisé, ou le pinceau ListViewItemRevealBackground pour les listes personnalisées, etc.For example, you can use the ButtonRevealBackground brush to create a custom button background, or the ListViewItemRevealBackground brush for custom lists, and so on. (Pour plus d’informations sur le fonctionnement des ressources en XAML, consultez l’article Dictionnaire des ressources XAML.)(To learn about how resources work in XAML, check out the Xaml Resource Dictionary article.)

Exemple de modèle completFull template example

Voici un modèle complet illustrant l’aspect d’un bouton Révéler :Here's an entire template for what a Reveal Button would look like:

<Style TargetType="Button" x:Key="ButtonStyle1">
    <Setter Property="Background" Value="{ThemeResource ButtonRevealBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonRevealBorderBrush}" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Padding" Value="8,4,8,4" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="FocusVisualMargin" Value="-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver" />
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
                                    <Setter Target="ContentPresenter.BorderBrush" Value="Transparent"/>
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed" />
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPressed}" />
                                    <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBackgroundPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundDisabled}" />
                                    <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushDisabled}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundDisabled}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>

              </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Content="{TemplateBinding Content}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Padding="{TemplateBinding Padding}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    AutomationProperties.AccessibilityView="Raw" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Optimisation de l’effet Révéler sur un contrôle personnaliséFine-tuning the Reveal effect on a custom control

Quand vous activez Révéler sur un contrôle personnalisé, un contrôle remodélisé ou une surface de commandes personnalisées, les conseils suivants peuvent vous aider à optimiser l’effet :When you enable Reveal on a custom or re-templated control or a custom commanding surface, these tips can help you optimize the effect:  

  • Sur les éléments adjacents avec des tailles qui ne s’alignent pas en hauteur ou en largeur (en particulier dans les listes) : Supprimez le comportement lié à l’approche des bordures et conservez les bordures affichées seulement en cas de pointage.On adjacent items with sizes that do not align either in height or width (particularly in lists): Remove the border approach behavior and keep the borders shown on hover only.
  • Pour les éléments de commandes dont l’état Désactivé change fréquemment : Placez le pinceau d’approche des bordures sur les fonds des éléments et sur leurs bordures pour mettre en évidence leur état.For commanding items that frequently go in and out of the disabled state: Place the border approach brush on the elements' backplates as well as their borders to emphasize their state.
  • Pour les éléments de commandes adjacents qui sont si près qu’ils se touchent : Ajoutez une marge de 1 px entre les deux éléments.For adjacent commanding elements that are so close they touch: Add a 1px margin between the two elements.

Pratiques conseillées et déconseilléesDo's and don'ts

Pratiques conseillées :Do:

  • Utilisez Révéler sur des éléments où l’utilisateur peut effectuer de nombreuses actions (barres de commandes, menus de navigation)Do use Reveal on elements where the user can take many actions (CommandBars, Navigation menus)
  • Utilisez Révéler dans les regroupements d’éléments interactifs qui n’ont pas de séparateurs visuels par défaut (listes, rubans)Do use Reveal in groupings of interactive elements that do not have visual separators by default (lists, ribbons)
  • Utilisez Révéler dans les zones où il y a une forte densité d’éléments interactifs (scénarios de commandes)Do use Reveal in areas with a high density of interactive elements (commanding scenarios)
  • Ajoutez une marge de 1 pixel entre les éléments auxquels vous appliquez l’effet RévélerDo put 1px margin spaces between Reveal items

Pratiques déconseilléesDon't

  • N’utilisez pas Révéler sur du contenu statique (arrière-plans, texte)Don’t use Reveal on static content (backgrounds, text)
  • N’utilisez pas Révéler sur les fenêtres contextuelles, les menus volants ou les listes déroulantesDon't use Reveal on popups, flyouts or dropdowns
  • N’utilisez pas Révéler dans des situations d’isolement ou d’unicitéDon’t use Reveal in one-off, isolated situations
  • N’utilisez pas Révéler sur les éléments de très grande taille (plus de 500 px)Don’t use Reveal on very large items (greater than 500epx)
  • N’utilisez pas Révéler pour des décisions concernant la sécurité, car cela pourrait distraire l’attention de l’utilisateur auquel vous devez délivrer le messageDon’t use Reveal in security decisions, as it may draw attention away from the message you need to deliver to your user

Obtenir l’exemple de codeGet the sample code

Révéler et le système Fluent DesignReveal and the Fluent Design System

Le système Fluent Design vous aide à créer une interface utilisateur moderne et claire, qui incorpore de la lumière, de la profondeur, du mouvement, des matériaux et une mise à l’échelle.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Révéler est un composant du système Fluent Design qui ajoute de la lumière à votre application.Reveal is a Fluent Design System component that adds light to your app. Pour plus d’informations, consultez Vue d’ensemble de Fluent Design.To learn more, see the Fluent Design overview.