閱讀目錄

1. 效果展示

2. 準(zhǔn)備

3. 簡單說明 + 源碼

4. 結(jié)尾（視頻及源碼倉庫）

1. 效果展示

欣賞效果：

2. 準(zhǔn)備

創(chuàng)建一個WPF工程，比如站長使用?.NET 7?創(chuàng)建名為?WalletPayment?的WPF項目。

這次我們不添加任何圖片，只添加了一個Nuget包?MaterialDesignThemes：

<PackageReference Include="MaterialDesignThemes" Version="4.6.0-ci176" />

原文作者使用的FontAwesome.WPF做為圖標(biāo)庫，但該庫自17年起就沒升級了，對.NET?5\6\7編譯有不兼容提示

已使用“.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”。此包可能與項目不完全兼容。

對于上文 《WPF|如何在 WPF 中設(shè)計漂亮的社交媒體信息儀表板》 使用到的該圖標(biāo)庫站長也做了修改(倉庫鏈接)。

3. 簡單說明 + 源碼

該儀表盤整體配色和布局非常優(yōu)秀，給出幾張站長覺得不錯的部分截圖：

左側(cè)菜單

按鈕切換

MainWindow.xaml

界面的整體布局都在這個文件內(nèi)：

MainWindow.xaml.cs

就一個窗體拖動方式：

WalletPaymentRes.xaml

資源文件，界面的所有按鈕、圖標(biāo)、文本等的樣式全在這個文件：

4. 結(jié)尾（視頻及源碼倉庫）

有興趣可以看看原作者視頻（非常推薦），以及下方給出的源碼倉庫鏈接：

參考：

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

• 油管視頻：C# WPF UI | How to Design Dark Mode Wallet Payment Dashboard in WPF

• 參考代碼：WPF-Dark-Wallet-Payment

• 本文代碼：WalletPayment