UWP 才能使用的流畅设计效果好惊艳,写新的 UWP 程序可以做出更漂亮的 UI 啦!然而古老的 WPF 项目也想解解馋怎么办?

于是我动手实现了一个!


 

迫不及待看效果


▲ 是不是很像 UWP 中的 RevealBorderBrush

不止是效果像,连 XAML 写法也像:

<Border BorderThickness="1" Margin="50,34,526,348">
<Border.BorderBrush>
<demo:RevealBorderBrush />
</Border.BorderBrush>
</Border>
<Border BorderThickness="1" Margin="50,76,526,306">
<Border.BorderBrush>
<demo:RevealBorderBrush Color="White" FallbackColor="Gray" />
</Border.BorderBrush>
</Border>

▲ 模拟得很像的 RevealBorderBrush 的 XAML 写法

当然,窗口背景那张图是直接用的高斯模糊效果,并不是亚克力 Acrylic 效果。鉴于那张被模糊得看不清的图是我自己画的,所以我一定要单独放出来给大家看��!


▲ 我自己画的图,不忍直视,只好模糊掉作为背景了

话不多说看源码

UWP 里的 CompositionBrush 是用一个 ShaderEffect 做出所有控件的所有效果的。正如 叛逆者如何评价微软在 Build 2017 上提出的 Fluent Design System? - 知乎 一文中说的,只需要极少的计算量就能完成。

不过 Win32 窗口并没有得到眷恋,所以我只好自己实现。但限于只能使用 WPF 内建机制,故性能上当然不能比了。但在小型项目的局部用用还是非常不错的——尤其是个人项目!不过话说现在个人项目谁还用 WPF 呢 (逃

思路是画一个径向渐变,即 RadialGradientBrush,然后当鼠标在窗口内移动时,改变径向渐变的渐变中心为鼠标所在点。

以下是全部源码。不要在意基类啦!WPF 不让我们实现自己的 Brush,所以只好用 MarkupExtension 绕道实现了。

using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Input;
using System.Windows.Markup;
using System.Windows.Media; namespace Walterlv.Demo
{
/// <summary>
/// Paints a control border with a reveal effect using composition brush and light effects.
/// </summary>
public class RevealBorderBrushExtension : MarkupExtension
{
/// <summary>
/// The color to use for rendering in case the <see cref="MarkupExtension"/> can't work correctly.
/// </summary>
public Color FallbackColor { get; set; } = Colors.White; /// <summary>
/// Gets or sets a value that specifies the base background color for the brush.
/// </summary>
public Color Color { get; set; } = Colors.White; public Transform Transform { get; set; } = Transform.Identity; public Transform RelativeTransform { get; set; } = Transform.Identity; public double Opacity { get; set; } = 1.0; public double Radius { get; set; } = 100.0; public override object ProvideValue(IServiceProvider serviceProvider)
{
// 如果没有服务,则直接返回。
if (!(serviceProvider.GetService(typeof(IProvideValueTarget)) is IProvideValueTarget service)) return null;
// MarkupExtension 在样式模板中,返回 this 以延迟提供值。
if (service.TargetObject.ToString().EndsWith("SharedDp")) return this;
if (!(service.TargetObject is FrameworkElement element)) return this;
if (DesignerProperties.GetIsInDesignMode(element)) return new SolidColorBrush(FallbackColor); var window = Window.GetWindow(element);
if (window == null) return this;
var brush = CreateBrush(window, element);
return brush;
} private Brush CreateBrush(Window window, FrameworkElement element)
{
var brush = new RadialGradientBrush(Colors.White, Colors.Transparent)
{
MappingMode = BrushMappingMode.Absolute,
RadiusX = Radius,
RadiusY = Radius,
Opacity = Opacity,
Transform = Transform,
RelativeTransform = RelativeTransform,
};
window.MouseMove += OnMouseMove;
window.Closed += OnClosed;
return brush; void OnMouseMove(object sender, MouseEventArgs e)
{
var position = e.GetPosition(element);
brush.GradientOrigin = position;
brush.Center = position;
} void OnClosed(object o, EventArgs eventArgs)
{
window.MouseMove -= OnMouseMove;
window.Closed -= OnClosed;
}
}
}
}

参考资料

流畅设计 Fluent Design System 中的光照效果 RevealBrush,WPF 也能模拟实现啦!的更多相关文章

  1. 微软最新设计Fluent Design System初体验

    微软最新设计Fluent Design System初体验 本文图片不全!建议移步知乎专栏查看!!! https://zhuanlan.zhihu.com/p/30582886 原创 2017-11- ...

  2. [UWP]如何使用Fluent Design System (上)

    1. 前言 微软在Build 2017中公布了新的设计语言Fluent Design System(以下简称FDS),不过官网只是堆砌了各种华丽的词语以及一堆动画.至于在UWP中要做成怎么样,怎么做, ...

  3. [UWP]如何使用Fluent Design System (下)

    4. 兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall C ...

  4. Microsoft Fluent Design System

    转载自:http://www.ui.cn/detail/131217.html 就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言--"Fluen ...

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

    在 Windows 10.0.16299 中,RevealBrush 被引入,可以实现炫酷的鼠标滑过高亮效果和点击光照.本文将告诉大家如何完整地实现这样的效果. Reveal 的效果(自带) 在微软官 ...

  6. 设计系统(Design System),设计和开发之间的“DevOps”

    最近,我们网站的上新增了几个新功能,比如通过导航栏的QR Code可以下载App:通过Carousel的方式,显示多条信息. 以往这样的功能可能需要2-3个Sprints完成,但是现在这些功能都是在一 ...

  7. 【转】【UML】使用Visual Studio 2010 Team System中的架构师工具(设计与建模)

    Lab 1: 应用程序建模 实验目标 这个实验的目的是展示如何在Visual Studio 2010旗舰版中进行应用程序建模.团队中的架构师会通过建模确定应用程序是否满足客户的需求. 你可以创建不同级 ...

  8. Android 5.0之应用中实现材料设计—Material Design

    上午的时候在刷Google+,看到了Abraham Williams转发了一篇强文,是Android Developers网站新发的一篇博客—Implementing Material Design ...

  9. Qsys 设计流程---Qsys System Design Tutorial

    Qsys 设计流程 ---Qsys System Design Tutorial 1.Avalon-MM Pipeline Bridge Avalon-MM Pipeline Bridge在slave ...

随机推荐

  1. Springboot依赖注入 Service类中使用静态变量

    @Component public class ServerHandler extends IoHandlerAdapter { @Autowired protected HealthDataServ ...

  2. RequestMaping url带参数及参数带“."的解决办法

    使用@PathVariable可以给url带参数,从而实现动态url的目的,如: @RequestMapping(value = "/ping/{version}", method ...

  3. 学习webpack3.x过程中遇到的问题:webpack-dev-server

    这篇博客主要记录的是本人在学习webpack3.x的过程中遇到的问题(虽然这几天4.0刚出来,但是我还是先学一下3.x吧) 1.配置文件可以用webpack启服务和热更新,步骤如下: ① 先下载:we ...

  4. springboot获取配置文件中的内容

    代码: GrilApplication.java @SpringBootApplication public class GrilApplication { public static void ma ...

  5. Java管理扩展指南之JMX技术总览

    JMX(Java管理扩展)系列 JMX(Java管理扩展)系列旨在介绍包含于Java基础版本(Java SE)中的JMX技术.本系列提供了如何使用JMX重要技术特性的诸多示例. 一.JMX技术总览简要 ...

  6. 微信公众平台开发(一) 配置接口与验证URL

    一.简介 微信公众平台是腾讯公司在微信的基础上新增的功能模块,通过这一平台,个人和企业都可以打造一个微信的公众号,并实现和特定群体的文字.图片.语音的全方位沟通.互动. 二.通讯机制 三.注册微信平台 ...

  7. Spring ApplicationListener 理解

    在开发时有时候需要在整个应用开始运行时执行一些特定代码,比如初始化环境,准备测试数据.加载一些数据到内存等等. 在spring中可以通过ApplicationListener来实现相关的功能,加载完成 ...

  8. pahlcon:循环调度(Dispatch Loop)或跳转

    循环调度将会在分发器执行,直到没有action需要执行为止.在上面的例子中,只有一个action 被执行到.现在让我们来看下“forward”(转发)怎样才能在循环调度里提供一个更加复杂的操作流,从而 ...

  9. python中如何剔除字符串

    问题: 过滤用户输入中前后多余的空白字符 ‘    ++++abc123---    ‘ 过滤某windows下编辑文本中的’\r’: ‘hello world \r\n’ 去掉文本中unicode组 ...

  10. 搞懂分布式技术3:初探分布式协调服务zookeeper

    搞懂分布式技术3:初探分布式协调服务zookeeper 1.Zookeepr是什么 Zookeeper是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它实现诸如数据发布/订阅,负载均衡, ...