WPF|分享一個登入介面設計

分享一個登入介面，先看效果圖：

準備

文中使用到了一些圖示：

我們可以從 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