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

文中使用到了一些圖标：

我們可以從 iconfont免費下載：

請随手創建一個WPF項目（.NET Framework、.NET 5\6\7皆可），使用tree /f命令看看最終的文件結構，和上面的截圖一緻：

C:. │ ModernLoginPage.xaml │ ModernLoginPage.xaml.cs │ └─Images close.png email.png github.png google.png lock.png wechat.png

簡單吧，一個圖片目錄存放前面下載的圖标，一個xaml文件做登錄界面設計，xaml.cs做界面按鈕響應事件處理（實際項目建議使用Mvvm)。

看上面的截圖，重點說說這兩處：

1. 左側的圖形控件

公司有設計師，做這種圖片是很簡單的，沒有的時候，可以使用Polygon、Ellipse等實現一些簡單的效果，讓界面不要那麼單調：

<Canvas> <Polygon Points="0, 20 230,140 0,270" Fill="#4EB1B6" /> <Polygon Points="100, 400 200,370 180,470" Fill="#4EB1B6" /> <Ellipse Margin="250 450 0 0" Width="40" Height="40" Fill="#4EB1B6" /> <Ellipse Margin="50 400 0 0" Width="20" Height="20" Fill="#4EB1B6" /> </Canvas>

2. 右側的賬号文本框和密碼框

作者為了演示效果，賬号文本框使用的 一張圖片 一個标簽控件 一個文本框 控件組合實現：

<Border Padding="10" BorderThickness="1" BorderBrush="#acb0af" Margin="70 7" CornerRadius="5"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="/TerminalMACS.TestDemo;component/Views/ModernLogin/Images/email.png" Height="20" /> <TextBlock x:Name="textEmail" MouseDown="textEmail_MouseDown" Text="郵箱" Style="{StaticResource textHint}" /> <TextBox x:Name="txtEmail" TextChanged="txtEmail_TextChanged" Style="{StaticResource textBox}" /> </Grid> </Border>

private void textEmail_MouseDown(object sender, MouseButtonEventArgs e) { txtEmail.Focus(); } private void txtEmail_TextChanged(object sender, TextChangedEventArgs e) { if (!string.IsNullOrEmpty(txtEmail.Text) && txtEmail.Text.Length > 0) { textEmail.Visibility = Visibility.Collapsed; } else { textEmail.Visibility = Visibility.Visible; } }

代碼比較簡單，.cs文件代碼：

• 鼠标點擊标簽時，将賬号文本框設置為焦點控件，提高用戶體驗
• 文本框中輸入賬号信息時 顯示|隐藏 标簽

密碼框邏輯同賬号文本框：

<Border Padding="10" BorderThickness="1" BorderBrush="#acb0af" Margin="70 7" CornerRadius="5"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="/TerminalMACS.TestDemo;component/Views/ModernLogin/Images/lock.png" Height="20" /> <TextBlock x:Name="textPassword" MouseDown="textPassword_MouseDown" Text="密碼" Style="{StaticResource textHint}" /> <PasswordBox x:Name="txtPassword" PasswordChanged="txtPassword_TextChanged" Style="{StaticResource textBox}" /> </Grid> </Border>

private void textPassword_MouseDown(object sender, MouseButtonEventArgs e) { txtPassword.Focus(); } private void txtPassword_TextChanged(object sender, RoutedEventArgs e) { if (!string.IsNullOrEmpty(txtPassword.Password) && txtPassword.Password.Length > 0) { textPassword.Visibility = Visibility.Collapsed; } else { textPassword.Visibility = Visibility.Visible; } }

• 油管視頻：C# WPF UI | How to Design Modern Login Page in WPF
• 油管視頻作者：C# WPF UI Academy

本文代碼：ModernLogin

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!