1. 效果展示

先来直接欣赏效果：

2. 准备

创建一个WPF工程，比如站长使用 .NET 7 创建名为 Dashboard3 的WPF项目，添加一些图片资源，项目目录如下：

2.1 图片资源

可在网站 iconfont 下载 关闭、最小化 图标，用于窗口右上角显示：

有看到美女图片没？在百度图片或者谷歌图片下载，比如 泰勒·斯威夫特 ，用于界面展示一个人的头像：

2.2 字体图标Nuget包：FontAwesome.WPF，该包提供一些图标字体：

<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”而不是项目目标框架“net7.0-windows7.0”还原包“FontAwesome.WPF 4.7.0.9”。此包可能与项目不完全兼容。

有.NET Core版本的字体图标库推荐吗？可在下面留言，谢谢，这里不影响使用。

3. 简单介绍

重点提及界面几个地方：

3.1 水平菜单

如上图，水平菜单是几个TextBlox标签，默认设置了字体的透明度为0.7，鼠标悬浮时设置为1：

3.2 竖直菜单

如上图，竖直菜单是几个按钮，按钮内容填充了字体图标和文字，设置一些效果样式：

3.3 部分图片和字体图标

这个就不多说了，上面的代码也有字体图标的使用。

4. 结尾

这个面板的效果个人感觉很漂亮，由基本的TextBlock、Button、字体图标、图片等组合、排版布局就能做到很多效果，有兴趣可以看看作者视频（非常推荐），以及下方给出的源码仓库链接：

参考：

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

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

• 参考代码：WPF-Social-Media-Info-Dashboard

本文代码：Dashboard3