WPF|黑暗模式的钱包支付仪表盘界面设计

阅读目录

1. 效果展示
2. 准备
3. 简单说明 + 源码
4. 结尾（视频及源码仓库）

1. 效果展示

欣赏效果：

[图片上传失败...(image-6053a5-1652541476316)]

2. 准备

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

4101.gif

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

原文作者使用的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. 简单说明 + 源码

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

左侧菜单

4103.gif

按钮切换

4104.gif

MainWindow.xaml

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

MainWindow.xaml.cs

就一个窗体拖动方式：

using System.Windows;
using System.Windows.Input;

namespace WalletPayment;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Border_MouseDown(object sender, MouseButtonEventArgs e)
    {
        if (e.ChangedButton == MouseButton.Left)
            DragMove();
    }
}

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