C# WPF 通常ログイン画面

本記事は単純なログイン画面のレイアウトであり、重要な機能効果はありません。

1. 実装効果

2. 業務シナリオ

一般的な業務

3. コーディング実装

3.1 NuGet ライブラリの追加

.NET Core 3.1 を使用して "Login" という名前の WPF ソリューションを作成し、1 つの NuGet ライブラリ MaterialDesignThemes を追加します。

3.2 プロジェクト構造

2 つのファイルが変更されます：

1. App.xaml：MD コントロールのスタイルを追加
2. MainWindow.xaml：メインウィンドウで効果を実装

3.2.1 App.xaml で MD コントロールのスタイルを導入

重要なスタイル参照コード

<Application.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.MergedDictionaries>
    <!--Primary-->
    <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#FFCDD2" />
    <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#FF333333" />
    <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#f44336" />
    <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFEEEEEE" />
    <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#b71c1c" />
    <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFFFF" />
    <!--Accent-->
    <SolidColorBrush x:Key="SecondaryAccentBrush" Color="#ff1744" />
    <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF" />
  </ResourceDictionary>
</Application.Resources>

3.2.2 メインフォーム MainWindow.xaml

全コード、ログインウィンドウのレイアウト

<Window
  x:Class="WpfApp2.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="clr-namespace:WpfApp2"
  mc:Ignorable="d"
  xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
  Title="登录"
  Height="450"
  Width="800"
>
  <Grid Background="#FF1E64AA">
    <Grid Width="300" Height="400">
      <Border
        CornerRadius="3"
        HorizontalAlignment="Center"
        Width="290"
        Height="350"
        VerticalAlignment="Center"
        Background="White"
        Margin="0 35 0 0"
      >
        <StackPanel Margin="0 50 0 0">
          <TextBlock
            Text="请登录您的账号"
            HorizontalAlignment="Center"
            Foreground="Gray"
            Margin="30"
            FontSize="21"
            FontFamily="Champagne &amp; Limousines"
            FontWeight="SemiBold"
          />
          <TextBox Margin="20 10" materialDesign:HintAssist.Hint="邮箱" />
          <PasswordBox Margin="20 10" materialDesign:HintAssist.Hint="密码" />
          <Grid Margin="20 0">
            <CheckBox Content="记住我" HorizontalAlignment="Left" />
            <TextBlock
              Text="忘记密码?"
              Foreground="#FF2259D1"
              HorizontalAlignment="Right"
              Cursor="Hand"
            />
          </Grid>
          <button Content="登录" Margin="20 30" />
        </StackPanel>
      </Border>
      <Border
        Width="70"
        Height="70"
        HorizontalAlignment="Center"
        VerticalAlignment="Top"
        Background="White"
        CornerRadius="50"
      >
        <Border.Effect>
          <DropShadowEffect BlurRadius="15" ShadowDepth="0" />
        </Border.Effect>
        <materialDesign:PackIcon
          Kind="Mail"
          Foreground="{StaticResource PrimaryHueMidBrush}"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Width="25"
          Height="25"
        />
      </Border>
    </Grid>
  </Grid>
</Window>

4. 参考資料

• Design com WPF の学習動画：First Impressions and new VS 2019
• オープンソースコントロールライブラリ：MaterialDesignInXamlToolkit
• 当サイトでの MD オープンソースコントロールライブラリの紹介：コントロール紹介

5. コードダウンロード

GitHub ソースコードダウンロード：HelloDotNetCore