阅读目录

1. 效果展示

2. 准备

3. 简单说明 + 源码

4. 结尾（视频及源码仓库）

1. 效果展示

欣赏效果：

2. 准备

创建一个WPF工程，比如站长使用 .NET 7 创建名为 WalletPayment 的WPF项目。

这次我们不添加任何图片，只添加了一个Nuget包 MaterialDesignThemes：

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

原文作者使用的FontAwesome.WPF做为图标库，但该库自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”而不是项目目标框架“net7.0-windows7.0”还原包“FontAwesome.WPF 4.7.0.9”。此包可能与项目不完全兼容。

对于上文 《WPF|如何在 WPF 中设计漂亮的社交媒体信息仪表板》 使用到的该图标库站长也做了修改(仓库链接)。

3. 简单说明 + 源码

该仪表盘整体配色和布局非常优秀，给出几张站长觉得不错的部分截图：

左侧菜单

按钮切换

MainWindow.xaml

界面的整体布局都在这个文件内：

MainWindow.xaml.cs

就一个窗体拖动方式：

WalletPaymentRes.xaml

资源文件，界面的所有按钮、图标、文本等的样式全在这个文件：

4. 结尾（视频及源码仓库）

有兴趣可以看看原作者视频（非常推荐），以及下方给出的源码仓库链接：

参考：

• 油管视频作者：C# WPF UI Academy

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

• 参考代码：WPF-Dark-Wallet-Payment

• 本文代码：WalletPayment