分享一個登錄界面，先看效果圖：

準備

文中使用到了一些圖標：

我們可以從?iconfont免費下載：

代碼簡單說明

請隨手創(chuàng)建一個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