显示突出显示Reveal Highlight

主图

显示突出显示是当用户附近移动指针它们时突出显示交互性元素,如命令栏,一种灯光效果。Reveal Highlight is a lighting effect that highlights interactive elements, such as command bars, when the user moves the pointer near them.

重要的 APIRevealBrush 类RevealBackgroundBrush 类RevealBorderBrush 类RevealBrushHelper 类VisualState 类Important APIs: RevealBrush class, RevealBackgroundBrush class, RevealBorderBrush class, RevealBrushHelper class, VisualState class

工作原理How it works

显示突出显示引起对交互式元素通过显示元素的容器时指针在附近,此图所示:Reveal Highlight calls attention to interactive elements by revealing the element's container when the pointer is nearby, as shown in this illustration:

显示视觉

通过显示对象周围的隐藏边框,“展示”可以帮助用户更好地理解他们与之交互的空间以及可用操作。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. 这一点在列表控件和按钮分组方面尤其重要。This is especially important in list controls and groupings of buttons.

示例Examples

XAML 控件库XAML Controls Gallery
XAML controls gallery

如果你已安装了 XAML 控件库应用,单击此处打开此应用,了解“展示”的实际应用If you have the XAML Controls Gallery app installed, click here to open the app and see Reveal in action.

视频摘要Video summary

如何使用How to use it

“展示”针对某些控件自动运行。Reveal automatically works for some controls. 对于其他控件,你可以通过向控件分配特殊样式来启用展示在本文的其他控件上启用展示自定义控件上启用展示部分中所述。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.

自动使用“展示”的控件Controls that automatically use Reveal

这些插图显示几个不同的控件上显示突出显示:These illustrations show Reveal Highlight on several different controls:

展示示例

在其他控件上启用“展示”Enabling Reveal on other controls

如果你在某个场景中需要应用“展示”(此类控件是主要内容并且/或者用于列表或集合中),我们提供了可选资源样式,能帮助你在这类场景中启用“展示”。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.

默认情况下此类控件没有启用“展示”,因为这些控件属于小型控件,通常是应用程序主要焦点的辅助控件;但是每个应用均各不相同,如果这些控件是应用中使用最多的控件,我们提供了一些样式以在以下方面提供帮助: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:

控件名称Control Name 资源名称Resource Name
按钮Button ButtonRevealStyleButtonRevealStyle
ToggleButtonToggleButton ToggleButtonRevealStyleToggleButtonRevealStyle
RepeatButtonRepeatButton RepeatButtonRevealStyleRepeatButtonRevealStyle
AppBarButtonAppBarButton AppBarButtonRevealStyleAppBarButtonRevealStyle
AppBarToggleButtonAppBarToggleButton AppBarToggleButtonRevealStyleAppBarToggleButtonRevealStyle
GridViewItem(显示内容的置顶)GridViewItem (Reveal overtop of content) GridViewItemRevealBackgroundShowsAboveContentStyleGridViewItemRevealBackgroundShowsAboveContentStyle

若要应用这些样式,只需设置控件的样式属性:To apply these styles, simply set the control's Style property:

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

在主题中显示Reveal in themes

显示会根据请求的控件、应用或用户设置的主题略微更改。Reveal changes slightly depending on the requested theme of the control, app or user setting. 在深色主题显示的边框中,悬停灯光是白色,但在浅色主题中,边框只要变暗为浅灰色。In Dark theme Reveal's Border and Hover light is white, but in Light theme just the Borders darken to a light gray.

深色和浅色显示

若要在浅色主题时启用白色边框,只需将请求的控件主题设置为“深色”。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>

或将 RevealBorderBrush 上的 TargetTheme 更改为“深色”。Or change the TargetTheme on the RevealBorderBrush to Dark. 记住!Remember! 如果将 TargetTheme 设置为“深色”,那么“展示”将为白色,但如果将其设置为“浅色”,“展示”的边框将为灰色。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}" />

在自定义控件上启用“展示”Enabling Reveal on custom controls

你可以向自定义控件添加“展示”。You can add Reveal to custom controls. 你执行操作前,最好先对“展示”效果的工作原理多些了解。Before you do, it's helpful to know a little more about about how the Reveal effect works. “展示”由两种单独的效果组成:边框展示悬停展示Reveal is made up of two separate effects: Reveal border and Reveal hover.

  • 边框会在指针靠近时显示交互式元素的边框。Border shows the borders of interactive elements when a pointer is nearby by. 此效果会向你显示,这些邻近项目可以与当前的聚焦项目采用类似操作。This effect shows you that those nearby objects can take actions similar to the one currently focused.
  • 悬停会在悬停或聚焦的项目周围应用一个柔和的光晕形状,并在单击时播放按下动画。Hover applies a gentle halo shape around the hovered or focused item and plays a press animation on click.

“展示”层

这些效果由两个画笔定义:These effects are defined by two brushes:

  • 边框展示由RevealBorderBrush定义Border Reveal is defined by RevealBorderBrush
  • 悬停展示定义的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}" />

在大多数情况下,我们会通过为某些控件自动打开“展示”来处理这两种效果的使用。In most cases we handle the usage of both of them by turning Reveal on automatically for a certain controls. 但是,其他控件将需要通过应用样式或直接更改其模板来启用。However, other controls will need to be enabled through applying a style, or changing their templates directly.

何时添加“展示”When to add Reveal

你可以将“展示”添加到你的自定义控件 - 但在此之前,请考虑控件的类型及其行为方式。You can add Reveal to your custom controls--but before you do, consider the type of control and how it behaves.

  • 如果你的自定义控件是单个交互式元素,并且没有类似控件与它共用空间(如菜单中的菜单项),那么你的自定义控件可能不需要“展示”。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.
  • 如果你有一组相关的交互式内容或元素,则有可能应用的这一区域不需要“展示”- 这通常称为命令处理表面。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.

例如,按钮本身不应使用“展示”,但命令栏中的一组按钮则应使用“展示”。For example, a button by itself shouldn't use reveal, but a set of buttons in a command bar should use Reveal.

使用控件模板添加“展示”Using the control template to add Reveal

若要对自定义控件或重新模板化的控件启用“展示”,请修改控件的控件模板。To enable Reveal on custom controls or re-templated controls, you modify the control's control template. 大多数控件模板在根部有一个网格;请更新该根网格的 VisualState 以使用“展示”: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>

请务必注意,“展示”在其视觉状态中既需要画笔也需要资源库,这样才能正确工作。It's important to note that Reveal needs both the brush and the setters in it's Visual State to work correctly. 单是将一个控件的画笔设置为“展示”画笔资源中的一个资源,不会为该控件启用“展示”。Simply setting a control's brush to one of our Reveal brush resources alone won't enable Reveal for that control. 相反,只有目标或设置而没有“展示”画笔值,“展示”也不会启用。Conversely, having only the targets or settings without the values being Reveal brushes will also not enable Reveal.

若要了解有关修改控件模板的详细信息,请参阅 XAML 控件模板一文。To learn more about modifying control templates, see the XAML control templates article.

我们已创建了一组系统“展示”画笔,你可以用来自定义自己的模板。We've created a set of system Reveal brushes you can use to customize your template. 例如,你可以使用 ButtonRevealBackground 画笔来创建自定义按钮背景,或使用 ListViewItemRevealBackground 画笔创建自定义列表,等等。For example, you can use the ButtonRevealBackground brush to create a custom button background, or the ListViewItemRevealBackground brush for custom lists, and so on. (若要了解资源在 XAML 中有何作用,请查阅 Xaml 资源字典一文。)(To learn about how resources work in XAML, check out the Xaml Resource Dictionary article.)

完整模板示例Full template example

以下是一个呈现“展示”按钮外观的完整模板: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>

微调自定义控件的“展示”效果Fine-tuning the Reveal effect on a custom control

自定义或重新模板化控件或自定义命令处理表面启用展示时,这些技巧可以帮助你优化此效果:When you enable Reveal on a custom or re-templated control or a custom commanding surface, these tips can help you optimize the effect:

  • 在邻近的未在高度或宽度上对齐(尤其是在列表中)的项目上:删除边框方法行为,并让边框只在悬停时显示。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.
  • 对于频繁出入禁用状态的命令处理项目:将边框方法画笔放在元素的背板及其边框上,以强调它们的状态。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.
  • 对于它们接触的非常靠近的邻近命令处理元素:在两个元素之间增加 1px 边距。For adjacent commanding elements that are so close they touch: Add a 1px margin between the two elements.

应做事项和禁止事项Do's and don'ts

执行此操作:Do:

  • 应对用户可以对其执行很多操作的元素使用“展示”(命令栏、导航菜单)Do use Reveal on elements where the user can take many actions (CommandBars, Navigation menus)
  • 应在默认没有视觉分隔符的交互式元素分组中使用“展示”(列表、功能区)Do use Reveal in groupings of interactive elements that do not have visual separators by default (lists, ribbons)
  • 应在具有高密度交互式元素的区域使用“展示”(命令处理情况)Do use Reveal in areas with a high density of interactive elements (commanding scenarios)
  • 在“展示”项目之间加入 1px 边距空间Do put 1px margin spaces between Reveal items

禁止事项Don't

  • 不应对静态内容使用“展示”(背景、文本)Don’t use Reveal on static content (backgrounds, text)
  • 不应对弹出窗口、浮出控件或下拉列表使用“展示”Don't use Reveal on popups, flyouts or dropdowns
  • 不应在一次性隔离情况中使用“展示”Don’t use Reveal in one-off, isolated situations
  • 不应对非常大的项目(大于 500epx)使用“展示”Don’t use Reveal on very large items (greater than 500epx)
  • 不应在安全决策中使用“展示”,因为这可能会使你不再关注需要向用户提供的消息Don’t use Reveal in security decisions, as it may draw attention away from the message you need to deliver to your user

获取示例代码Get the sample code

展示和 Fluent Design 系统Reveal and the Fluent Design System

Fluent 设计系统可帮助你创建包含光线、深度、动画、材料和比例的现代、粗体 UI。The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. 展示是 Fluent 设计系统组件,它将光线添加到你的应用。Reveal is a Fluent Design System component that adds light to your app. 要了解详细信息,请参阅 UWP 的 Fluent Design 概述To learn more, see the Fluent Design for UWP overview.