Windows 10 应用创建模糊背景窗口的三种方法

简介: 原文 Windows 10 应用创建模糊背景窗口的三种方法 现代的操作系统中创建一张图片的高斯模糊效果非常容易,不过如果要在窗口中获得模糊支持就需要操作系统的原生支持了。iOS/Mac 和 Windows 系统都对此有支持。

原文 Windows 10 应用创建模糊背景窗口的三种方法

现代的操作系统中创建一张图片的高斯模糊效果非常容易,不过如果要在窗口中获得模糊支持就需要操作系统的原生支持了。iOS/Mac 和 Windows 系统都对此有支持。

本文将介绍三种创建模糊背景窗口的方法。有人可能喜欢称之为毛玻璃窗口、亚克力窗口。


This post is written in multiple languages. Please select yours:

 

最早我是在 StackOverflow 上回答一位网友的提问时写了一份非常长的答案,后来小伙伴建议我将答案改写成博客,于是我就改了。StackOverflow 上的答案在这里:colors - WPF: How to Style my form with Transparency levels - Stack Overflow

三种创建模糊背景窗口的方法

Windows 10 上创建带模糊背景的窗口有三种不同的方法,不过每一种都是既有好处又有坏处的:

  1. 调用 Win32 API —— SetWindowCompositionAttribute,使用这种方式能够获得一个背景轻微透明的窗口。当然,如果需要模拟亚克力效果或者是 iOS/Mac 上的模糊效果就 gg 了。
    The image from my post

  2. 为窗口中的背景图片添加 WPF 自带的模糊效果 BlurEffect。这种方式你想获得多大的模糊半径就能获得多大的模糊半径,不过带来的就是更高的性能损耗。同时,还得考虑在移动窗口的时候动态地去更新背景图片并再次模糊。
    BlurEffect of WPF

  3. 使用 Fluent Design System 中的亚克力效果 —— AcrylicBrush。这绝对是 Windows 10 上获得背景模糊效果中视觉效果最好,同时又最省性能的方法了。不过,这种方法只能在 UWP 应用中使用。
    The UWP AcrylicBrush from docs.microsoft.com


SetWindowCompositionAttribute API

SetWindowCompositionAttribute 并没有那么好调用,所以我为此写了一个辅助类类封装对背景模糊效果的调用。使用这个辅助类,你只需要使用一行代码就能开启背景模糊效果。

可以在 XAML 代码中使用 interop:WindowBlur.IsEnabled="True"

<Window x:Class="Walterlv.Demo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:interop="clr-namespace:Walterlv.Demo.Interop" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525" interop:WindowBlur.IsEnabled="True" Background="Transparent"> </Window> 

可以在 cs 代码中使用 WindowBlur.SetIsEnabled(this, true)

public class MainWindow : Window { public MainWindow() { InitializeComponent(); WindowBlur.SetIsEnabled(this, true); } } 

我为 WindowBlur 类准备了一个 GitHub Gist,在这里:https://gist.github.com/walterlv/752669f389978440d344941a5fcd5b00。你只需要将代码全部复制到你的项目中即可开始使用。

当然,我还写了一篇博客专门讲使用 SetWindowCompositionAttribute API 实现背景模糊效果:在 Windows 10 上为 WPF 窗口添加模糊特效(就像开始菜单和操作中心那样)

WPF BlurEffect

WPF 的 UIElement 都有 Effect 属性,将其设置为 BlurEffect 即可获得控件的高斯模糊效果。

<Window x:Class="MejirdrituTeWarqoudear.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" AllowsTransparency="True" WindowStyle="None" Width="540" Height="360"> <Grid> <Image Source="YourImageFile.jpg" Stretch="Fill" Margin="-60"> <Image.Effect> <BlurEffect KernelType="Gaussian" Radius="60" /> </Image.Effect> </Image> <Border CornerRadius="60" Margin="30" Background="#7F000000"> <TextBlock Foreground="White" FontSize="20" FontWeight="Light" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center"> <Run Text="Hello World" FontSize="48"/> <LineBreak/> <Run Text="walterlv.github.io"/> </TextBlock> </Border> </Grid> </Window> 

特别注意:此方法有严重地性能问题

如果你的窗口是一个异形窗口,例如是具有圆角的矩形,那么你需要额外为控件设置 RectangleGeometry 来裁剪控件。

Rounded Rectangle

<Window x:Class="MejirdrituTeWarqoudear.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="540" Height="360"> <Grid> <Grid.Clip> <RectangleGeometry RadiusX="60" RadiusY="60" Rect="30 30 480 300" /> </Grid.Clip> <Image Source="High+Sierra.jpg" Stretch="Fill" Margin="-60"> <Image.Effect> <BlurEffect KernelType="Gaussian" Radius="60" /> </Image.Effect> </Image> <Border Background="#7F000000"> <TextBlock Foreground="White" FontSize="20" FontWeight="Light" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center"> <Run Text="Hello World" FontSize="48"/> <LineBreak/> <Run Text="walterlv.github.io"/> </TextBlock> </Border> </Grid> </Window> 

如果是圆形窗口,我另外写了一篇文章来说明进行圆形裁剪:WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆)

UWP AcyclicBrush

微软的官方文档 Acrylic material - UWP app developer - Microsoft Docs 讲解了如何使用亚克力效果。

本文会经常更新,请阅读原文: https://walterlv.com/post/create-blur-background-window.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。 

目录
相关文章
|
3月前
|
XML C# 数据格式
掌握了在Windows平台上查看DLL依赖的方法
掌握了在Windows平台上查看DLL依赖的方法
376 4
|
2月前
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理,重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本,通过初始化、检查更新、下载更新、验证签名和安装更新等步骤,确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理,确保更新高效且安全。
46 4
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
|
1月前
|
存储 缓存 安全
硬盘数据恢复:恢复硬盘数据的9个实用方法(Windows版)
无论是工作文档、家庭照片,还是其他珍贵的数字资产,数据丢失总是一件让人头疼的事情。然而,当硬盘发生问题时,不必过于慌张——只要正确应对,许多数据都可以被成功恢复。本文将从常见数据丢失原因到具体恢复方法,为您提供全面的硬盘数据恢复指导。
|
3月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
3月前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的?
本文首发于微信公众号“前端徐徐”,作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件,涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容,并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容,读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
222 0
|
3月前
|
弹性计算 数据安全/隐私保护 Windows
阿里云国际版无法远程连接Windows服务器的排查方法
阿里云国际版无法远程连接Windows服务器的排查方法
|
Windows 搜索推荐 开发者
快速构建Windows 8风格应用12-SearchContract概述及原理
原文:快速构建Windows 8风格应用12-SearchContract概述及原理 本篇博文主要介绍Search Contract概述、Search Contract面板结构剖析、Search Contract实现原理、Search Contract最佳实践。
908 0
|
搜索推荐 Windows 开发者
快速构建Windows 8风格应用13-SearchContract构建
原文:快速构建Windows 8风格应用13-SearchContract构建 本篇博文主要介绍如何在应用中构建SearchContract,相应的原理已经在博文《快速构建Windows 8风格应用12-SearchContract概述及原理》中阐述清楚。
958 0