主頁 > .NET開發 > [WPF] 在 Windows 11 中處理 WindowChrome 的圓角

[WPF] 在 Windows 11 中處理 WindowChrome 的圓角

2021-11-02 06:02:52 .NET開發

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 的圓角,

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 自定義表單的內容,可以參考這幾篇文章:

  • Window(表單)的UI元素及行為:這篇文章主要討論標準 Window 的 UI 元素和行為,

  • 使用WindowChrome自定義Window Style:介紹使用 WindowChrome 自定義 Window 的原理及各種細節,

  • 使用WindowChrome的問題:介紹如何處理使用 WindowChrome 自定義 Window 會遇到的各種問題,

  • WPF 制作高性能的透明背景異形視窗(使用 WindowChrome 而不要使用 AllowsTransparency=True)

另外,關于圓角我要抱怨一下:

在 Windows 11 中,我們對視窗邊框進行了圓角處理, 我們的用戶研究團隊發現,圓潤的幾何圖形在心理上提供一種安全感,并且使應用的 UI 更易于掃描, 這使用戶更少感覺威懾,也使應用更具吸引力, 圓角處理的量也是精心選擇的, 我們公司對此進行了研究,努力在專業性、柔和感和吸引度之間取得平衡,

微軟的檔案這樣聲稱,我是一個字都不信的,難道這么多年來區區 Windows 的直角就讓我感覺到威懾和沒有安全感了?微軟還有比 UWP 更能讓我沒有安全感的東西?我倒想看看幾年后又流行直角時微軟要怎么解釋,

5. 參考

在 Windows 11 的桌面應用中應用圓角

在 Windows 11 上,為增強應用功能而可以執行的最常見的 11 種操作

Windows 11 中的幾何圖形

6. 原始碼

我做了個小 Demo 用戶看看這篇文章提到的不同邊框和 DWM_WINDOW_CORNER_PREFERENCE 設定下的效果,原始碼可以從這里獲取:

  • https://github.com/DinoChan/WindowChromeApplyRoundedCorners


作者:dino.c
出處:http://www.cnblogs.com/dino623/
說明:歡迎轉載并請標明來源和作者,如有錯漏請指出,謝謝,

轉載請註明出處,本文鏈接:https://www.uj5u.com/net/343857.html

標籤:.NET技术

上一篇:Envoy實作.NET架構的網關(四)集成IdentityServer4實作OAuth2認證

下一篇:IdentityServer4 負載均衡配置

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • WebAPI簡介

    Web體系結構: 有三個核心:資源(resource),URL(統一資源識別符號)和表示 他們的關系是這樣的:一個資源由一個URL進行標識,HTTP客戶端使用URL定位資源,表示是從資源回傳資料,媒體型別是資源回傳的資料格式。 接下來我們說下HTTP. HTTP協議的系統是一種無狀態的方式,使用請求/ ......

    uj5u.com 2020-09-09 22:07:47 more
  • asp.net core 3.1 入口:Program.cs中的Main函式

    本文分析Program.cs 中Main()函式中代碼的運行順序分析asp.net core程式的啟動,重點不是剖析原始碼,而是理清程式開始時執行的順序。到呼叫了哪些實體,哪些法方。asp.net core 3.1 的程式入口在專案Program.cs檔案里,如下。ususing System; us ......

    uj5u.com 2020-09-09 22:07:49 more
  • asp.net網站作為websocket服務端的應用該如何寫

    最近被websocket的一個問題困擾了很久,有一個需求是在web網站中搭建websocket服務。客戶端通過網頁與服務器建立連接,然后服務器根據ip給客戶端網頁發送資訊。 其實,這個需求并不難,只是剛開始對websocket的內容不太了解。上網搜索了一下,有通過asp.net core 實作的、有 ......

    uj5u.com 2020-09-09 22:08:02 more
  • ASP.NET 開源匯入匯出庫Magicodes.IE Docker中使用

    Magicodes.IE在Docker中使用 更新歷史 2019.02.13 【Nuget】版本更新到2.0.2 【匯入】修復單列匯入的Bug,單元測驗“OneColumnImporter_Test”。問題見(https://github.com/dotnetcore/Magicodes.IE/is ......

    uj5u.com 2020-09-09 22:08:05 more
  • 在webform中使用ajax

    如果你用過Asp.net webform, 說明你也算是.NET 開發的老兵了。WEBform應該是2011 2013左右,當時還用visual studio 2005、 visual studio 2008。后來基本都用的是MVC。 如果是新開發的專案,估計沒人會用webform技術。但是有些舊版 ......

    uj5u.com 2020-09-09 22:08:50 more
  • iis添加asp.net網站,訪問提示:由于擴展配置問題而無法提供您請求的

    今天在iis服務器配置asp.net網站,遇到一個問題,記錄一下: 問題:由于擴展配置問題而無法提供您請求的頁面。如果該頁面是腳本,請添加處理程式。如果應下載檔案,請添加 MIME 映射。 WindowServer2012服務器,添加角色安裝完.netframework和iis之后,運行aspx頁面 ......

    uj5u.com 2020-09-09 22:10:00 more
  • WebAPI-處理架構

    帶著問題去思考,大家好! 問題1:HTTP請求和回傳相應的HTTP回應資訊之間發生了什么? 1:首先是最底層,托管層,位于WebAPI和底層HTTP堆疊之間 2:其次是 訊息處理程式管道層,這里比如日志和快取。OWIN的參考是將訊息處理程式管道的一些功能下移到堆疊下端的OWIN中間件了。 3:控制器處理 ......

    uj5u.com 2020-09-09 22:11:13 more
  • 微信門戶開發框架-使用指導說明書

    微信門戶應用管理系統,采用基于 MVC + Bootstrap + Ajax + Enterprise Library的技術路線,界面層采用Boostrap + Metronic組合的前端框架,資料訪問層支持Oracle、SQLServer、MySQL、PostgreSQL等資料庫。框架以MVC5,... ......

    uj5u.com 2020-09-09 22:15:18 more
  • WebAPI-HTTP編程模型

    帶著問題去思考,大家好!它是什么?它包含什么?它能干什么? 訊息 HTTP編程模型的核心就是訊息抽象,表示為:HttPRequestMessage,HttpResponseMessage.用于客戶端和服務端之間交換請求和回應訊息。 HttpMethod類包含了一組靜態屬性: private stat ......

    uj5u.com 2020-09-09 22:15:23 more
  • 部署WebApi隨筆

    一、跨域 NuGet參考Microsoft.AspNet.WebApi.Cors WebApiConfig.cs中配置: // Web API 配置和服務 config.EnableCors(new EnableCorsAttribute("*", "*", "*")); 二、清除默認回傳XML格式 ......

    uj5u.com 2020-09-09 22:15:48 more
最新发布
  • C#多執行緒學習(二) 如何操縱一個執行緒

    <a href="https://www.cnblogs.com/x-zhi/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/2943582/20220801082530.png" alt="" /></...

    uj5u.com 2023-04-19 09:17:20 more
  • C#多執行緒學習(二) 如何操縱一個執行緒

    C#多執行緒學習(二) 如何操縱一個執行緒 執行緒學習第一篇:C#多執行緒學習(一) 多執行緒的相關概念 下面我們就動手來創建一個執行緒,使用Thread類創建執行緒時,只需提供執行緒入口即可。(執行緒入口使程式知道該讓這個執行緒干什么事) 在C#中,執行緒入口是通過ThreadStart代理(delegate)來提供的 ......

    uj5u.com 2023-04-19 09:16:49 more
  • 記一次 .NET某醫療器械清洗系統 卡死分析

    <a href="https://www.cnblogs.com/huangxincheng/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/214741/20200614104537.png" alt="" /&g...

    uj5u.com 2023-04-18 08:39:04 more
  • 記一次 .NET某醫療器械清洗系統 卡死分析

    一:背景 1. 講故事 前段時間協助訓練營里的一位朋友分析了一個程式卡死的問題,回過頭來看這個案例比較經典,這篇稍微整理一下供后來者少踩坑吧。 二:WinDbg 分析 1. 為什么會卡死 因為是表單程式,理所當然就是看主執行緒此時正在做什么? 可以用 ~0s ; k 看一下便知。 0:000> k # ......

    uj5u.com 2023-04-18 08:33:10 more
  • SignalR, No Connection with that ID,IIS

    <a href="https://www.cnblogs.com/smartstar/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/u36196.jpg" alt="" /></a>...

    uj5u.com 2023-03-30 17:21:52 more
  • 一次對pool的誤用導致的.net頻繁gc的診斷分析

    <a href="https://www.cnblogs.com/dotnet-diagnostic/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/3115652/20230225090434.png" alt=""...

    uj5u.com 2023-03-28 10:15:33 more
  • 一次對pool的誤用導致的.net頻繁gc的診斷分析

    <a href="https://www.cnblogs.com/dotnet-diagnostic/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/3115652/20230225090434.png" alt=""...

    uj5u.com 2023-03-28 10:13:31 more
  • C#遍歷指定檔案夾中所有檔案的3種方法

    <a href="https://www.cnblogs.com/xbhp/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/957602/20230310105611.png" alt="" /></a&...

    uj5u.com 2023-03-27 14:46:55 more
  • C#/VB.NET:如何將PDF轉為PDF/A

    <a href="https://www.cnblogs.com/Carina-baby/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/2859233/20220427162558.png" alt="" />...

    uj5u.com 2023-03-27 14:46:35 more
  • 武裝你的WEBAPI-OData聚合查詢

    <a href="https://www.cnblogs.com/podolski/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/616093/20140323000327.png" alt="" /><...

    uj5u.com 2023-03-27 14:46:16 more