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

14人阅读 评论(0) 收藏 举报
分类:

在 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">
            <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 的模板的一部分,写了 RevealBorderBrushRevealBackgroundBrush

<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 DocsRevealBackgroundBrush 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.StatePointerOver,在按下时切换 RevealBrush.StatePressed。再次运行才发现背景光照效果正常出现了。

Reveal 背景光照效果出现

本文相关

查看评论

再一次惊艳!当Win10资源监视器UWP用上Fluent流畅设计体系

IT之家6月2日消息 微软在Build 2017开发者大会上首次演示了较为全面的Fluent Design System(流畅设计体系),微软流畅设计体系分为五个元素Light(光感)、Depth(深...
  • gyhg002
  • gyhg002
  • 2017年06月02日 20:34
  • 329

C语言接口与实现创建可重用软件的技术读书笔记(5)---内存管理

感觉这章主要就是在将如何对标准C库中malloc,calloc,realloc,和free函数进行封装,重新组织成Mem接口,还有就是对它们运行已检查的错误的跟踪和报告。 所有非平凡的C程序都会在运...
  • u013800219
  • u013800219
  • 2014年03月09日 17:09
  • 980

iOS 容易崩溃的地方总结。

● 数组越界 ● 向dic中插入一个key = nil ● 调用一个不存在的函数(#会有警告#) ● block为空。 + (NSIndexPath *)indexPathForRow:(NSInte...
  • hherima
  • hherima
  • 2013年08月26日 12:48
  • 1832

java中容易犯错的知识点

java中容易犯错的知识点该博客的内容是在看了《head first java》之后总结的一些知识点,是针对我个人的不足总结的知识点,我写博客还是newer,希望大神们多多指教。需要注意的是这篇内容的...
  • LilyNothing
  • LilyNothing
  • 2016年05月27日 18:56
  • 3731

计算机视觉领域稍微容易中的期刊(二)

计算机视觉领域稍微容易中的期刊系列 (1)适合于图像处理方向的SCI期刊杂志列表 (2)模式识别、计算机视觉领域期刊 模式识别、计算机视觉领域期刊   (1)pattern reco...
  • tiandijun
  • tiandijun
  • 2015年09月06日 15:54
  • 1795

App产品设计中,最容易忽视的问题有哪些?

作者分享了在App设计过程中容易忽视的几个问题,总结出来与大家分享。不知道在你在进行产品设计的时候,是否也入坑过?   低版本强制更新问题   这个问题是在产品不断迭代中容易忽视的问题,因...
  • qq_32506555
  • qq_32506555
  • 2017年01月01日 13:34
  • 218

网页设计过程中遇到的问题!

在平时的设计过程中,我发现在“素材”这个方面花的时间特别多,而且也容易卡在这里。 当我已经构思出一幅大致的网页效果图,并准备开始设计的时候,我会发现很难找到符合题材的素材,然后我会开始漫无目的的...
  • sinat_25330173
  • sinat_25330173
  • 2015年01月29日 11:00
  • 304

一些总是记不住又容易搞混淆的东西(不断更新)

angular 获取浏览器的宽高: $window.innerWidth;   //浏览器的宽 $window.innerHeight;   //浏览器的高 jquer...
  • longzhoufeng
  • longzhoufeng
  • 2018年02月26日 11:03
  • 71

C/C++ 关于字符串的处理容易出错的地方

首先先看一段代码: #include using namespace std; int main() {  char *name1 = "John";  *name1 = 'A'; ...
  • joshgu958
  • joshgu958
  • 2014年06月26日 17:17
  • 487

有些事情, 做起来要比想象中的容易

文章https://groups.google.com/forum/#!topic/pongba/mkWbbv6UmFo 的作者分享了自己的经验。一个问题,如果不实际动手做,仅仅是从外面看,往往会被一...
  • anzhsoft2008
  • anzhsoft2008
  • 2014年04月08日 18:36
  • 12775
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 1069
    排名: 4万+
    文章存档
    最新评论