WPF|一個比較簡單帶點設計的登入介面

閱讀目錄

1. 效果展示
2. 準備
3. 簡單說明 + 原始碼
4. 結尾（影片及原始碼倉庫）

1. 效果展示

欣賞效果：

2. 準備

建立一個 WPF 專案，例如站長使用 .NET 7 建立名為 Login5 的 WPF 專案。

找一張圖片作為裝飾，放登入表單左側：

新增 NuGet 套件 MaterialDesignThemes：

<PackageReference Include="MaterialDesignThemes" Version="4.6.0-ci176" />

3. 簡單說明 + 原始碼

介面比較簡單，程式碼也不多，我們直接貼程式碼。

MainWindow.xaml

介面的整體佈局與樣式都在這個檔案內：

<Window
    x:Class="Login5.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    ResizeMode="NoResize"
    WindowStartupLocation="CenterScreen"
    WindowStyle="None"
    mc:Ignorable="d">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Red.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid MouseDown="Border_MouseDown">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0.1,0" EndPoint="0.9,1">
                <GradientStop Offset="1" Color="#FFE63070" />
                <GradientStop Offset="0" Color="#FFFE8704" />
            </LinearGradientBrush>
        </Grid.Background>
        <Border
            Height="390"
            VerticalAlignment="Top"
            Background="#100E17"
            CornerRadius="0 0 180 0" />
        <StackPanel Orientation="Horizontal">
            <StackPanel Width="350">
                <Image
                    Width="300"
                    Height="300"
                    Margin="30"
                    VerticalAlignment="Top"
                    Source="pack://application:,,,/Login5;component/Images/ICON4801.png"
                    Stretch="Fill" />
            </StackPanel>
            <StackPanel Width="350">
                <StackPanel Margin="20,40">
                    <TextBlock
                        Margin="20"
                        FontFamily="Great Vibes"
                        FontSize="38"
                        Foreground="White"
                        Text="使用者登入"
                        TextAlignment="Center" />
                    <StackPanel Margin="10" Orientation="Horizontal">
                        <materialDesign:PackIcon
                            Width="25"
                            Height="25"
                            Foreground="White"
                            Kind="User" />
                        <TextBox
                            x:Name="txtUsername"
                            Width="250"
                            Margin="10,0"
                            materialDesign:HintAssist.Hint="輸入 使用者名稱 / 電子郵件"
                            BorderBrush="White"
                            CaretBrush="#FFD94448"
                            Foreground="White"
                            SelectionBrush="#FFD94448" />
                    </StackPanel>
                    <StackPanel Margin="10" Orientation="Horizontal">
                        <materialDesign:PackIcon
                            Width="25"
                            Height="25"
                            Foreground="White"
                            Kind="Lock" />
                        <PasswordBox
                            x:Name="txtPassword"
                            Width="250"
                            Margin="10,0"
                            materialDesign:HintAssist.Hint="********"
                            BorderBrush="White"
                            CaretBrush="#FFD94448"
                            Foreground="White"
                            SelectionBrush="#FFD94448" />
                    </StackPanel>
                    <StackPanel Margin="10" HorizontalAlignment="Center">
                        <Button
                            x:Name="btnLogin"
                            Width="100"
                            Height="40"
                            materialDesign:ButtonAssist.CornerRadius="10"
                            Background="#D94448"
                            BorderBrush="#D94448"
                            BorderThickness="2"
                            Content="登入"
                            Foreground="White"
                            Style="{StaticResource MaterialDesignRaisedButton}"
                            ToolTip="登入" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
            <StackPanel Width="100">
                <Button
                    x:Name="btnExit"
                    Margin="10,20"
                    Background="{x:Null}"
                    Click="btnExit_Click"
                    Style="{StaticResource MaterialDesignFloatingActionButton}"
                    ToolTip="關閉">
                    <materialDesign:PackIcon
                        Width="30"
                        Height="30"
                        Foreground="White"
                        Kind="Close" />
                </Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

MainWindow.xaml.cs

視窗拖曳與關閉按鈕事件：

using System.Windows;
using System.Windows.Input;

namespace Login5;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Border_MouseDown(object sender, MouseButtonEventArgs e)
    {
        this.DragMove();
    }

    private void btnExit_Click(object sender, RoutedEventArgs e)
    {
        this.Close();
    }
}

4. 結尾（影片及原始碼倉庫）

有興趣可以看看原作者影片（推薦），下方提供影片及原始碼倉庫連結：

參考：

• 油管影片作者：C# Code Academy
• 油管影片：Multiple User Login Form | C# WPF
• 參考程式碼：Multi-login-CSharp-WPF
• 本文程式碼：Login5