UWP 流畅设计中的光照效果（容易的 RevealBorderBrush 和不那么容易的 RevealBackgroundBrush）

最新推荐文章于 2022-04-22 23:00:58 发布

walter lv

最新推荐文章于 2022-04-22 23:00:58 发布

阅读量667

点赞数

本文链接：https://blog.csdn.net/wpwalter/article/details/79947274

版权

本文介绍了如何在Windows 10的UWP应用中实现RevealBrush带来的流畅设计光照和高亮效果。通过分析微软官方XAML Controls Gallery应用中的示例，展示了使用系统自带样式的方法。同时，文章详细讨论了自定义控件模板以实现Reveal效果的过程，特别是解决RevealBackgroundBrush背景光照缺失的问题。最后，提到了相关项目的GitHub源码链接及WPF实现光照效果的博客文章。

摘要由CSDN通过智能技术生成

在 Windows 10.0.16299 中，RevealBrush 被引入，可以实现炫酷的鼠标滑过高亮效果和点击光照。本文将告诉大家如何完整地实现这样的效果。

Reveal 的效果（自带）

在微软官方推荐的 XAML Controls Gallery 应用中，我们可以找到 Reveal 的实现章节。下图是应用中演示的 Reveal 效果：

Reveal in XAML Controls Gallery

不过在其实现中，全都是使用的系统自带的样式，例如：

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