1. 效果展示

先來直接欣賞效果：

2. 準(zhǔn)備

創(chuàng)建一個WPF工程，比如站長使用?.NET 7?創(chuàng)建名為?Dashboard3?的WPF項目，添加一些圖片資源，項目目錄如下：

2.1 圖片資源

可在網(wǎng)站?iconfont?下載 關(guān)閉、最小化 圖標(biāo)，用于窗口右上角顯示：

有看到美女圖片沒？在百度圖片或者谷歌圖片下載，比如 泰勒·斯威夫特 ，用于界面展示一個人的頭像：

2.2 字體圖標(biāo)Nuget包：FontAwesome.WPF，該包提供一些圖標(biāo)字體：

<PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" />

編譯時，此包有如下提示：

已使用“.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8”而不是項目目標(biāo)框架“net7.0-windows7.0”還原包“FontAwesome.WPF 4.7.0.9”。此包可能與項目不完全兼容。

有.NET?Core版本的字體圖標(biāo)庫推薦嗎？可在下面留言，謝謝，這里不影響使用。

3. 簡單介紹

重點提及界面幾個地方：

3.1 水平菜單

如上圖，水平菜單是幾個TextBlox標(biāo)簽，默認(rèn)設(shè)置了字體的透明度為0.7，鼠標(biāo)懸浮時設(shè)置為1：

3.2 豎直菜單

如上圖，豎直菜單是幾個按鈕，按鈕內(nèi)容填充了字體圖標(biāo)和文字，設(shè)置一些效果樣式：

3.3 部分圖片和字體圖標(biāo)

這個就不多說了，上面的代碼也有字體圖標(biāo)的使用。

4. 結(jié)尾

這個面板的效果個人感覺很漂亮，由基本的TextBlock、Button、字體圖標(biāo)、圖片等組合、排版布局就能做到很多效果，有興趣可以看看作者視頻（非常推薦），以及下方給出的源碼倉庫鏈接：

參考：

• 油管視頻作者：C# WPF UI Academy

• 油管視頻：C# WPF UI | How to Design Beautiful Social Media Info Dashboard in WPF

• 參考代碼：WPF-Social-Media-Info-Dashboard

本文代碼：Dashboard3