版權聲明：本作品采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名呂毅（包含鏈接：http://blog.csdn.net/wpwalter/），不得用於商業目的，基於本文修改後的作品務必以相同的許可發布。如有任何疑問，請與我聯系（[email protected]）。 https://blog.csdn.net/WPwalter/article/details/79947274

在 Windows 10.0.16299 中，RevealBrush 被引入，可以實現炫酷的鼠標滑過高亮效果和點擊光照。本文將告訴大家如何完整地實現這樣的效果。

Reveal 的效果（自帶）

在微軟官方推薦的 XAML Controls Gallery 應用中，我們可以找到 Reveal 的實現章節。下圖是應用中演示的 Reveal 效果：

不過在其實現中，全都是使用的系統自帶的樣式，例如：

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

<Grid HorizontalAlignment="Center" Margin="5" Background="{ThemeResource CustomAcrylicInAppBrush_dark}" RequestedTheme="Dark">
    <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
            <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}"
 
 Icon="World" Margin="1, 2, 0, 0"/>
            <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Icon="CellPhone" Margin="0, 2, 1, 0"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Icon="Delete" Margin="1, 2, 0, 2"/>
            <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Icon="Comment" Margin="0, 2, 1, 2"/>
        </StackPanel>
    </StackPanel>
</Grid>

Reveal 的制作（自己實現）

采用自帶效果的控件看起來實現很容易，不過 UWP 控件的自帶樣式略坑，自己實現控件樣式和模板是不可避免的事兒。

這是定制的 ListViewItem 的模板的一部分，寫了 RevealBorderBrush 和 RevealBackgroundBrush。

<Grid x:Name="Root" Width="120" Height="40" BorderThickness="0 1 1 0">
    <Grid.BorderBrush>
        <RevealBorderBrush />
    </Grid.BorderBrush>
    <Grid.Background>
        <RevealBackgroundBrush />
    </Grid.Background>
    <ContentPresenter />
</Grid>

運行看，發現只有邊框效果，背景效果是不存在的。

然而官方文檔對於 RevealBackgroundBrush 的實現竟然沒有提及，也是挺奇怪的。比如：Reveal highlight - UWP app developer - Microsoft Docs 和 RevealBackgroundBrush Class (Windows.UI.Xaml.Media) - UWP app developer - Microsoft Docs 。

註意到 RevealBackgroundBrush 有一個附加屬性 RevealBrush.State，設置到控件上用於指定采用哪一種光照效果：RevealBrush.State="Pressed"。直接將其設置到控件上，發現依然是沒有效果的：

看來需要動態地改變，於是必須加上 VisualStateManager。

<Grid x:Name="Root" Width="120" Height="40" BorderThickness="0 1 1 0">
    <Grid.BorderBrush>
        <RevealBorderBrush />
    </Grid.BorderBrush>
    <Grid.Background>
        <RevealBackgroundBrush />
    </Grid.Background>
    <ContentPresenter />
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="Selected" />
            <VisualState x:Name="PointerOver">
                <VisualState.Setters>
                    <Setter Target="Root.(RevealBrush.State)" Value="PointerOver"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PointerOverSelected">
                <VisualState.Setters>
                    <Setter Target="Root.(RevealBrush.State)" Value="PointerOver"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PointerOverPressed">
                <VisualState.Setters>
                    <Setter Target="Root.(RevealBrush.State)" Value="Pressed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Target="Root.(RevealBrush.State)" Value="Pressed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PressedSelected">
                <VisualState.Setters>
                    <Setter Target="Root.(RevealBrush.State)" Value="Pressed"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
        <VisualStateGroup x:Name="DisabledStates">
            <VisualState x:Name="Enabled"/>
            <VisualState x:Name="Disabled">
                <VisualState.Setters>
                    <Setter Target="Root.RevealBorderThickness" Value="0"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

在以上這段新的代碼中，我們適時在指針設備滑過的時候切換 RevealBrush.State 為 PointerOver，在按下時切換 RevealBrush.State 為 Pressed。再次運行才發現背景光照效果正常出現了。

本文相關

• 本文所設計的源碼來自我的一個個人興趣項目，已在 GitHub 上開源：walterlv/AssembleMailing。
• 我寫過另一篇讓 WPF 實現光照效果的博客：流暢設計 Fluent Design System 中的光照效果 RevealBrush，WPF 也能模擬實現啦！

UWP 流暢設計中的光照效果（容易的 RevealBorderBrush 和不那麽容易的 RevealBackgroundBrush）