少量程式碼設計一個登入介面（二） – .NET CORE(C#) WPF開發
阿新 • • 發佈：2020-04-20
閱讀導航
- 本文背景
- 程式碼實現
- 本文參考
- 原始碼
1. 本文背景
同上篇文章《少量程式碼設計一個登入介面》，本篇介紹另一種登入介面設計風格。
2. 程式碼實現
使用 .NET CORE 3.1 建立名為 “Login” 的WPF模板專案，新增1個Nuget庫：MaterialDesignThemes.3.1.0-ci981。
解決方案主要檔案目錄組織結構：
- Login
- App.xaml
- MainWindow.xaml
- MainWindow.xaml.cs
2.1 App.xaml檔案引入樣式
檔案【App.xaml】，在 StartupUri 中設定啟動的檢視【MainWindow.xaml】，並在【Application.Resources】節點增加 MaterialDesignThemes庫的樣式檔案：
<Application x:Class="Login.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <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 Source="pack://application:,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" /> <ResourceDictionary Source="pack://application:,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
2.2 MainWindow.xaml 登入窗體
檔案【MainWindow.xaml】，設計登入主介面，程式碼量很小，原始碼如下：
<Window x:Class="Login.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Title="Login" Height="400" Width="600" ResizeMode="NoResize" WindowStyle="None" AllowsTransparency="True" Background="Transparent" WindowStartupLocation="CenterScreen" MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"> <Grid> <Rectangle RadiusY="8" RadiusX="8" Fill="White"/> <Rectangle Margin="310,0" RadiusX="8" RadiusY="8"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#CC935E12" Offset="1"/> <GradientStop Color="#CCEA4646"/> <GradientStop Color="#CCB89128" Offset="0.566"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <StackPanel Margin="20,10,290,10"> <Label Content="登入" FontFamily="Segoe UI Black" FontSize="24" Margin="0,10" VerticalAlignment="Top" HorizontalAlignment="Left"/> <StackPanel Orientation="Horizontal"> <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" Foreground="#707070"><Run Text="你沒有帳戶嗎？"/></TextBlock> <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" Foreground="#FF2468AC"><Run Text="建立一個帳戶，"/></TextBlock> </StackPanel> <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" Foreground="#707070"><Run Text="那不需要撒謊。"/></TextBlock> <StackPanel Margin="0,15" Orientation="Horizontal"> <materialDesign:PackIcon Kind="Account" VerticalAlignment="Center" Foreground="#707070"/> <TextBox materialDesign:HintAssist.Hint="賬號" Width="250" Margin="5"/> </StackPanel> <StackPanel Orientation="Horizontal"> <materialDesign:PackIcon Kind="Key" VerticalAlignment="Center" Foreground="#707070"/> <PasswordBox materialDesign:HintAssist.Hint="密碼" Width="250" Margin="5"/> </StackPanel> <Grid> <CheckBox Content="記住我" Margin="5,10" Foreground="#707070"/> <Label Content="我忘了密碼" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10" Foreground="#707070"/> </Grid> <Button HorizontalAlignment="Center" Content="登入" FontFamily="Impact" FontSize="18" Width="100" Background="#FF307CD6" BorderBrush="#FF307CD6"/> <StackPanel Orientation="Horizontal" Margin="10,35"> <Label Content="第三方登入" Foreground="#707070" VerticalAlignment="Center"/> <Button HorizontalAlignment="Center" FontFamily="Impact" FontSize="18" Background="#FF3D56AC" BorderBrush="#FF3D56AC"> <materialDesign:PackIcon Kind="Wechat" VerticalAlignment="Center" Foreground="White"/> </Button> <Button HorizontalAlignment="Center" FontFamily="Impact" FontSize="18" Margin="15,0" Background="#FF01BAFF" BorderBrush="#FF01BAFF"> <materialDesign:PackIcon Kind="Qqchat" VerticalAlignment="Center" Foreground="White"/> </Button> <Button HorizontalAlignment="Center" FontFamily="Impact" FontSize="18" Background="#FFE05959" BorderBrush="#FFE05959"> <materialDesign:PackIcon Kind="SinaWeibo" VerticalAlignment="Center" Foreground="White"/> </Button> </StackPanel> </StackPanel> <Button BorderBrush="{x:Null}" Background="{x:Null}" HorizontalAlignment="Right" VerticalAlignment="Top" Click="CloseWindow_Click"> <materialDesign:PackIcon Kind="Close"/> </Button> <StackPanel Margin="310,50,50"> <TextBlock Text="歡迎回來" Foreground="White" HorizontalAlignment="Center" FontSize="48" FontFamily="Champagne & Limousines" FontWeight="Bold"/> <TextBlock Text="使不可能成為可能，使可能變得簡單而優雅" Foreground="White" HorizontalAlignment="Center" Width="280" FontSize="24" FontFamily="Champagne & Limousines" TextWrapping="Wrap" TextAlignment="Center" Margin="0,0"/> <TextBlock Text="https://dotnet9.com" Foreground="White" FontSize="18" FontFamily="Champagne & Limousines" TextWrapping="Wrap" TextAlignment="Right" Margin="10"/> </StackPanel> </Grid> </Window>
下面是後臺程式碼：檔案【MainWindow.xaml.cs】，關閉窗體、窗體移動等事件處理。
using System.Windows;
using System.Windows.Input;
namespace Login
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void CloseWindow_Click(object sender,RoutedEventArgs e)
{
this.Close();
}
private void MoveWindow_MouseLeftButtonDown(object sender,MouseButtonEventArgs e)
{
DragMove();
}
}
}
3.本文參考
4.原始碼
演示程式碼已全部奉上，為了方便演示，程式碼中的圖片使用本站外鏈，程式碼可直接拷貝並按程式碼結構組織編譯即可執行。
除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。
轉載請註明本文地址：https://dotnet9.com/8091.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號，本站會及時推送最新技術文章
時間如流水，只能流去不流回！
點選《【閱讀原文】》，【Dotnet9的部落格】站點還有更多技術類文章等著您哦！！！
此刻順便為我點個《【再看】》可好？