前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[WPF] 在 Windows 11 中处理 WindowChrome 的圆角

[WPF] 在 Windows 11 中处理 WindowChrome 的圆角

作者头像
dino.c
发布于 2021-11-02 08:48:27
发布于 2021-11-02 08:48:27
3.1K00
代码可运行
举报
文章被收录于专栏:dino.c的专栏dino.c的专栏
运行总次数:0
代码可运行

1. Windows 11 的圆角

在直角统治了微软的 UI 设计多年以后,微软突然把直角骂了一顿,说还是圆角好看,于是 Windows 11 随处都可看到圆角设计。Windows 11 使用 3 个级别的圆角,具体取决于要应用圆角的 UI 组件及该组件相对于相邻元素的排列方式。

圆角半径

使用情况

8px

窗体、Flyout 、弹出菜单等 。另外,当窗体最大化或使用对齐布局时不应用圆角。

4px

页面内的元素,如按钮或列表等。

0px

与其它直边相交的直边不使用圆角。

也就是说在 Windows 11 上窗体需要应用半径为 8px 的圆角。

2. 处理 WindowChrome 的圆角

对于 WPF,如果使用原生 Window 的话不需要额外处理圆角,如果使用了 WindowChrome 自定义窗体样式的话呢?

结论是,如果自定义的 Window 使用了 1 像素的窄边框或无边框的样式,那就可能不需要额外处理。

下面这两张图是同一个自定义的 Window 分别在 Windows 11 和 10 上的样子:

可以看到这是个模仿 Windows 10 的 Window 样式,边框只有 1 像素。在 Windows 11 里 WindowChrome 会自动裁剪最外层那 1 像素边框和圆角的其它部分,然后补上一条灰色的边框。这做法简单粗暴但有效。被裁剪过后自定义的 Window 成了一个无边框圆角窗口,看着还挺时髦的。

但这个简单裁剪也可能遇到问题,如果 Window 里的内容正好有个直角的元素,而且这个直角还靠着圆角,就可能被裁剪掉;或者自定义的 Window 使用了无边框的样式,那么这个贴边的边框就会被裁剪掉一像素:

所以 Window 可能不需要额外处理,但内容可能需要,这取决于以前的设计。

还有一种情况,如果这个 Window 的边框大于一个像素(像 Windows 8 那样的粗边框),那就需要修改 Window 样式了:

3. 我就是喜欢直的,不想要圆角,怎么办

上图是 Aero2 的主题样式,这是 Windows 8 以后 WPF 程序的默认主题,再之后微软就没有更新过 WPF 的主题。即使在 Windows 11 上,WPF 的主题也没有获得更新。所以,假使现有的 WPF 程序使用了默认主题,或者自定义的主题按照微软一向的审美全使用了直角元素,那到了 Windows 11 上就会显得格格不入。

微软还是很贴心的,如果我们不想更改样式,可以使用 DwmSetWindowAttribute 和 DWM_WINDOW_CORNER_PREFERENCE 控制 Window 的圆角。

代码语言:javascript
代码运行次数:0
运行
复制
using System.Runtime.InteropServices;
using System.Windows.Interop;

public partial class MainWindow : Window
{

    public MainWindow()
    {
        InitializeComponent();

        IntPtr hWnd = new WindowInteropHelper(GetWindow(this)).EnsureHandle();
        var attribute = DWMWINDOWATTRIBUTE.DWMWA_WINDOW_CORNER_PREFERENCE;
        var preference = DWM_WINDOW_CORNER_PREFERENCE.DWMWCP_ROUND;
        DwmSetWindowAttribute(hWnd, attribute, ref preference, sizeof(uint));

        // ...
        // Perform any other work necessary
        // ...
    }


    // The enum flag for DwmSetWindowAttribute's second parameter, which tells the function what attribute to set.
    public enum DWMWINDOWATTRIBUTE
    {
        DWMWA_WINDOW_CORNER_PREFERENCE = 33
    }

    // The DWM_WINDOW_CORNER_PREFERENCE enum for DwmSetWindowAttribute's third parameter, which tells the function
    // what value of the enum to set.
    public enum DWM_WINDOW_CORNER_PREFERENCE
    {
        DWMWCP_DEFAULT = 0,
        DWMWCP_DONOTROUND = 1,
        DWMWCP_ROUND = 2,
        DWMWCP_ROUNDSMALL = 3
    }

    // Import dwmapi.dll and define DwmSetWindowAttribute in C# corresponding to the native function.
    [DllImport("dwmapi.dll", CharSet = CharSet.Unicode, SetLastError = true)]
    private static extern long DwmSetWindowAttribute(IntPtr hwnd,
                                                     DWMWINDOWATTRIBUTE attribute,
                                                     ref DWM_WINDOW_CORNER_PREFERENCE pvAttribute,
                                                     uint cbAttribute);

    // ...
    // Various other definitions
    // ...
}

其中 DWM_WINDOW_CORNER_PREFERENCE 枚举值的含义如下:

枚举值

说明

DWMWCP_DEFAULT

让系统决定是否对窗口采用圆角设置。

DWMWCP_DONOTROUND

绝不对窗口采用圆角设置。

DWMWCP_ROUND

适当时采用圆角设置。

DWMWCP_ROUNDSMALL

适当时可采用半径较小的圆角设置。

在 Windows 11 上,使用了上面 4 钟枚举值的窗口效果如下:

4. 最后

关于使用 WindowChrome 自定义窗体的内容,可以参考这几篇文章:

另外,关于圆角我要抱怨一下:

在 Windows 11 中,我们对窗口边框进行了圆角处理。 我们的用户研究团队发现,圆润的几何图形在心理上提供一种安全感,并且使应用的 UI 更易于扫描。 这使用户更少感觉威慑,也使应用更具吸引力。 圆角处理的量也是精心选择的。 我们公司对此进行了研究,努力在专业性、柔和感和吸引度之间取得平衡。

微软的文档这样声称,我是一个字都不信的,难道这么多年来区区 Windows 的直角就让我感觉到威慑和没有安全感了?微软还有比 UWP 更能让我没有安全感的东西?我倒想看看几年后又流行直角时微软要怎么解释。

5. 参考

在 Windows 11 的桌面应用中应用圆角

在 Windows 11 上,为增强应用功能而可以执行的最常见的 11 种操作

Windows 11 中的几何图形

6. 源码

我做了个小 Demo 用户看看这篇文章提到的不同边框和 DWM_WINDOW_CORNER_PREFERENCE 设定下的效果,源码可以从这里获取:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-11-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
Hololens开发学习(八)——Hololens视频流输出方法
之前分享过Hololens开发学习的心得,最近在做Hololens视频流输出的任务,我也尝试了各种方式,今天给大家分享一下。
医学处理分析专家
2020/06/29
2.5K0
Hololens开发学习(八)——Hololens视频流输出方法
苹果MacOS电脑使用内网穿透轻松远程桌面本地Windows系统电脑
首先要注意windows电脑需要有设置账号密码,以及苹果电脑跟windows电脑需要在同一个局域网下,由于windows系统自带的是微软远程桌面,所以在Mac上我们需要先下载相应的客户端,可以在网上下载Mac版本的微软远程桌面客户端
YY的秘密代码小屋
2024/03/20
1.4K0
苹果MacOS电脑使用内网穿透轻松远程桌面本地Windows系统电脑
Hololens开发学习(三)——凝视,手势和语音交互操作实现
前两篇给大家介绍了Hololens开发的工具安装和开发SDK介绍。从这篇开始我将给大家分享Hololens开发实例。这一篇主要讲解凝视,手势和语音交互的实现。
医学处理分析专家
2020/06/29
1.7K0
Hololens开发学习(三)——凝视,手势和语音交互操作实现
Windows 11 及其安卓子系统折腾记
值此程序员日,记录一下这两天折腾最新的 Windows11 系统及预览发行的安卓子系统(Windows Subsystem for Android)的过程。
独立观察员
2022/12/06
3.5K0
Windows 11 及其安卓子系统折腾记
Hololens开发学习(二)——HoloToolkit组件
对微软Hololens进行开发,要使用微软提供的工具HoloToolkit工具包。我使用的版本是HoloToolkit5.8.0,下载地址:
医学处理分析专家
2020/06/29
1.8K0
Hololens开发学习(二)——HoloToolkit组件
[新手向]Hololens 安装appx
https://github.com/microsoft/MixedRealityToolkit-Unity/releases/download/v2.1.0/MRTKExamplesHub2.1.0.0_x86_HoloLens1.zip
魔都路易斯
2020/11/13
1.5K0
[新手向]Hololens 安装appx
远程管理服务器从未如此简单:1Panel面板结合cpolar内网穿透轻松搞定
不知道大家是不是经常为远程管理服务器头疼?特别是当你没有公网IP或者复杂的路由器设置时,想要轻松搞定服务器运维简直就是天方夜谭!但今天我要给大家介绍一个超级实用的神器组合——在CasaOS轻NAS系统的香橙派Zero3上使用Docker本地部署1Panel开源Linux服务器运维管理面板,并结合cpolar内网穿透实现浏览器远程访问。
命运之光
2025/01/07
2990
远程管理服务器从未如此简单:1Panel面板结合cpolar内网穿透轻松搞定
使用香橙派Zero3和Melody轻松搭建你的私人在线音乐库
今天我要给大家分享一个超级实用的项目——如何在香橙派Zero3上使用Docker部署个人在线音乐平台Melody,并且通过cpolar内网穿透工具实现随时随地在线访问。是不是听起来就很酷炫呢?快来一起看看吧!
aosei
2024/12/03
1970
使用香橙派Zero3和Melody轻松搭建你的私人在线音乐库
香橙派开发板玩法分享:Docker部署1Panel打造全能控制台远程访问
详细很多人一听到到要远程管理服务器就头疼得不得了,特别是没有公网IP或路由器设置复杂时,简直让人抓狂!但今天我要告诉大家一个绝招——在CasaOS香橙派Zero3上用Docker部署1Panel开源运维面板,并结合cpolar内网穿透实现远程访问。想象一下,无论你是在世界的哪个角落,还是躺在家里的沙发上,都能轻松管理服务器,是不是感觉自己瞬间高大上了?对于运维人员和个人站长来说,这简直就是一大福音!最近看到不少小伙伴在fnOS上分享1Panel的使用体验,真心觉得它让Docker容器管理变得简单又高效。今天就来手把手教大家如何在这台小巧但强大的设备上部署1Panel,并通过cpolar内网穿透实现远程访问。准备好了吗?让我们一起开启这场运维革命吧!
FGGIT
2025/04/01
1570
香橙派开发板玩法分享:Docker部署1Panel打造全能控制台远程访问
打造个人云端电子书库:Docker部署Talebook实现远程阅读
在追求便捷与高效的数字时代,将香橙派Orange Pi Zero3刷入CasaOS轻NAS系统,无疑为家庭数据存储与共享提供了新的选择。而结合Docker与cpolar内网穿透技术,更能让你的香橙派化身个人云端电子书库,实现远程管理与在线阅读的无缝衔接。
大海里的番茄
2024/11/08
4340
打造个人云端电子书库:Docker部署Talebook实现远程阅读
上传代码 CodePlex 注册新建项目上传代码Page
CodePlex是微软开源项目网站,有很多人都在上面传代码,我们也可以上传自己的代码
林德熙
2018/09/18
8760
上传代码 CodePlex
            注册新建项目上传代码Page
PowerBI本地部署服务器
之前在和其他小伙伴们沟通的时候,发现很多小伙伴对于数据刷新的频率要求比较高,经常问白茶有没有解决办法。本期呢,白茶决定分享给各位小伙伴们,PowerBI本地服务器的配置与搭建。
PowerBI丨白茶
2021/09/02
4.1K0
PowerBI本地部署服务器
飞牛 fnos 利用docker部署安装——宝塔
名称:随意 主机:fnOS的ip地址 端口:22,不改 用户名:fnOS管理员账号 密码:管理员密码 确定
季春二九
2025/01/10
3.1K0
飞牛 fnos 利用docker部署安装——宝塔
0202了,你会用手机操控电脑吗?
当时只是开启了,然而并不知道怎么连接。然后看到空间有人发了一个微软远程桌面APP,这个手机软件我以前一直用来连接自己的服务器。恍然发现还能连接局域网内的电脑。
SingYi
2022/07/14
1.1K0
0202了,你会用手机操控电脑吗?
搭建AD域环境
链接:https://pan.baidu.com/s/1k26xh04pK0vzXZ3J0D0SZw 提取码:191t
Gcow安全团队
2020/03/06
3.6K0
DIY云相册:香橙派Zero3使用Lsky Pro打造个人在线图片管理系统
本文将详细介绍如何在香橙派Zero3小主机上,利用安装了CasaOS轻NAS系统的环境,通过Docker搭建开源在线图片管理系统Lsky Pro兰空图床,并结合cpolar内网穿透工具,实现远程图片管理的功能。
命运之光
2024/12/15
1420
DIY云相册:香橙派Zero3使用Lsky Pro打造个人在线图片管理系统
树莓派4B系统搭建(超详细版)
树莓派需要一个操作系统才能工作。树莓派操作系统(以前称为 Raspbian)是官方支持的操作系统,现在更名为Raspios,所以原先博客的Raspbian含有下载链接都失效了。 目前最新的是Buster版本,如果官网更新了就下载最新的即可,要注意后面修改软件源的时候要选择Buster的源。 附上下载链接: 点击下载提取码:vfq7 我下载的是这个
全栈程序员站长
2022/07/01
3.8K0
树莓派4B系统搭建(超详细版)
网工神器PNET安装教程,步骤很详细!
最近很多朋友都用到一款模拟器,外观非常漂亮,功能非常实用, 这个模拟器就是PNET,今天给大家分享一下如何对PNET 模拟器进行初始化安装。
网络工程师笔记
2021/09/29
4.7K0
应急响应--windows入侵检查思路及流程
服务器被入侵,业务出现蠕虫事件,用户以及公司员工被钓鱼攻击,业务被 DDoS 攻击,核心业务出现DNS、链路劫持攻击等等
红队蓝军
2024/08/01
3090
应急响应--windows入侵检查思路及流程
懒人福音!CasaOS设备上轻松部署小雅AList,内网穿透远程观影不是梦!
本文主要介绍如何在安装了轻NAS系统CasaOS的小主机中部署小雅AList,并使用AList挂载小雅alist,结合cpolar内网穿透工具轻松实现远程访问小雅中的海量资源。无需公网IP,也不用设置路由器那么麻烦。
E绵绵
2024/11/15
1.4K0
懒人福音!CasaOS设备上轻松部署小雅AList,内网穿透远程观影不是梦!
推荐阅读
相关推荐
Hololens开发学习(八)——Hololens视频流输出方法
更多 >
目录
  • 1. Windows 11 的圆角
  • 2. 处理 WindowChrome 的圆角
  • 3. 我就是喜欢直的,不想要圆角,怎么办
  • 4. 最后
  • 5. 参考
  • 6. 源码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档