分享一个登录界面，先看效果图：

准备

文中使用到了一些图标：

我们可以从 iconfont免费下载：

代码简单说明

请随手创建一个WPF项目（.NET Framework、.NET 5\6\7皆可），使用tree /f命令看看最终的文件结构，和上面的截图一致：

简单吧，一个图片目录存放前面下载的图标，一个xaml文件做登录界面设计，xaml.cs做界面按钮响应事件处理（实际项目建议使用Mvvm)。

看上面的截图，重点说说这两处：

1. 左侧的图形控件

公司有设计师，做这种图片是很简单的，没有的时候，可以使用Polygon、Ellipse等实现一些简单的效果，让界面不要那么单调：

1. 右侧的账号文本框和密码框

作者为了演示效果，账号文本框使用的 一张图片 + 一个标签控件 + 一个文本框 控件组合实现：

代码比较简单，.cs文件代码：

• 鼠标点击标签时，将账号文本框设置为焦点控件，提高用户体验

• 文本框中输入账号信息时 显示|隐藏 标签

密码框逻辑同账号文本框：

参考：

• 油管视频：C# WPF UI | How to Design Modern Login Page in WPF

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

本文代码：ModernLogin