突出显示

突出显示是当用户在交互式元素(如命令栏)附近移动指针时突出显示这些元素的灯光效果。

重要的 APIRevealBrush 类RevealBackgroundBrush 类RevealBorderBrush 类RevealBrushHelper 类VisualState 类

工作原理

当指针靠近时,突出显示通过显示元素的容器来引起对交互式元素的注意,如此图所示:

显示视觉

通过显示对象周围的隐藏边框,“展示”可以帮助用户更好地理解他们与之交互的空间以及可用操作。 这一点在列表控件和按钮分组方面尤其重要。

示例

XAML 控件库
XAML controls gallery

如果你已安装了 XAML 控件库应用,单击此处打开此应用,了解“展示”的实际应用

视频摘要

如何使用

“展示”针对某些控件自动运行。 对于其他控件,你可以通过向控件分配特殊样式来启用“展示”,如本文的在其他常见控件上启用“展示”在自定义控件上启用“展示”部分所述。

自动使用“展示”的控件

这些插图显示几种不同控件的展示效果:

展示示例

在其他控件上启用“展示”

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

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

控件名称 资源名称
按钮 ButtonRevealStyle
ToggleButton ToggleButtonRevealStyle
RepeatButton RepeatButtonRevealStyle
AppBarButton AppBarButtonRevealStyle
AppBarToggleButton AppBarToggleButtonRevealStyle
GridViewItem(显示内容的置顶) GridViewItemRevealBackgroundShowsAboveContentStyle

若要应用这些样式,只需设置控件的样式属性:

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

在主题中显示

显示会根据请求的控件、应用或用户设置的主题略微更改。 在深色主题显示的边框中,悬停灯光是白色,但在浅色主题中,边框只要变暗为浅灰色。

深色和浅色显示

若要在浅色主题时启用白色边框,只需将请求的控件主题设置为“深色”。

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

或将 RevealBorderBrush 上的 TargetTheme 更改为“深色”。 记住! 如果将 TargetTheme 设置为“深色”,那么“展示”将为白色,但如果将其设置为“浅色”,“展示”的边框将为灰色。

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

在自定义控件上启用“展示”

你可以向自定义控件添加“展示”。 你执行操作前,最好先对“展示”效果的工作原理多些了解。 “展示”由两种单独的效果组成:边框展示悬停展示

  • 边框会在指针靠近时显示交互式元素的边框。 此效果会向你显示,这些邻近项目可以与当前的聚焦项目采用类似操作。
  • 悬停会在悬停或聚焦的项目周围应用一个柔和的光晕形状,并在单击时播放按下动画。

“展示”层

这些效果由两个画笔定义:

  • 边框展示由 RevealBorderBrush 定义
  • 悬停展示由 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}" />

在大多数情况下,我们会通过为某些控件自动打开“展示”来处理这两种效果的使用。 但是,其他控件将需要通过应用样式或直接更改其模板来启用。

何时添加“展示”

你可以将“展示”添加到你的自定义控件 - 但在此之前,请考虑控件的类型及其行为方式。

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

例如,按钮本身不应使用“展示”,但命令栏中的一组按钮则应使用“展示”。

使用控件模板添加“展示”

若要对自定义控件或重新模板化的控件启用“展示”,请修改控件的控件模板。 大多数控件模板在根部有一个网格;请更新该根网格的 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>
</VisualState>

请务必注意,“展示”在其视觉状态中既需要画笔也需要资源库,这样才能正确工作。 单是将一个控件的画笔设置为“展示”画笔资源中的一个资源,不会为该控件启用“展示”。 相反,只有目标或设置而没有“展示”画笔值,“展示”也不会启用。

若要了解有关修改控件模板的详细信息,请参阅 XAML 控件模板一文。

我们已创建了一组系统“展示”画笔,你可以用来自定义自己的模板。 例如,你可以使用 ButtonRevealBackground 画笔来创建自定义按钮背景,或使用 ListViewItemRevealBackground 画笔创建自定义列表,等等。 (若要了解资源在 XAMl 中有何作用,请查阅 Xaml 资源字典一文。)

完整模板示例

以下是一个呈现“展示”按钮外观的完整模板:

<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>

微调自定义控件的“展示”效果

当你对自定义或重新模板化的控件或自定义命令处理表面启用展示时,这些技巧可帮助你优化此效果:

  • 在邻近的未在高度或宽度上对齐(尤其是在列表中)的项目上:删除边框方法行为,并让边框只在悬停时显示。
  • 对于频繁出入禁用状态的命令处理项目:将边框方法画笔放在元素的背板及其边框上,以强调它们的状态。
  • 对于它们接触的非常靠近的邻近命令处理元素:在两个元素之间增加 1px 边距。

应做事项和禁止事项

  • 应对用户可以对其执行很多操作的元素使用“展示”(命令栏、导航菜单)
  • 应在默认没有视觉分隔符的交互式元素分组中使用“展示”(列表、功能区)
  • 应在具有高密度交互式元素的区域使用“展示”(命令处理情况)
  • 在“展示”项目之间加入 1px 边距空间
  • 不应对静态内容使用“展示”(背景、文本)
  • 不应对弹出窗口、浮出控件或下拉列表使用“展示”
  • 不应在一次性隔离情况中使用“展示”
  • 不应对非常大的项目(大于 500epx)使用“展示”
  • 不应在安全决策中使用“展示”,因为这可能会使你不再关注需要向用户提供的消息

获取示例代码

展示和 Fluent Design 系统

Fluent 设计系统可帮助你创建包含光线、深度、动画、材料和比例的现代、粗体 UI。 展示是 Fluent 设计系统组件,它将光线添加到你的应用。 要了解详细信息,请参阅 UWP 的 Fluent Design 概述