一个简单登录界面
一、效果展示
二、准备代码
创建一个WPF工程,创建名为 Login5 的WPF项目。
添加Nuget包
MaterialDesignThemes
界面的整体布局和样式代码文章来源:https://www.toymoban.com/news/detail-757569.html
<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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:local="clr-namespace:Login5"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
ResizeMode="NoResize" WindowStartupLocation="CenterScreen"
WindowStyle="None">
<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="Grid_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" Stretch="Fill" Source="pack://application:,,,/Login5;component/Images/left.png"/>
</StackPanel>
<StackPanel Width="350">
<StackPanel Margin="20,40">
<TextBlock Margin="20" FontFamily="Great Vibes"
FontSize="38" Foreground="White" TextAlignment="Center">
用户登录
</TextBlock>
<StackPanel Margin="10" Orientation="Horizontal">
<materialDesign:PackIcon
Width="25" Height="25" Foreground="White"
Kind="User"/>
<TextBox x:Name="txtUserName" Width="250"
Margin="10,0" BorderBrush="White"
CaretBrush="#FFD94448" Foreground="White"
SelectionBrush="#FFD94448"
materialDesign:HintAssist.Hint="输入 用户名 / 邮箱"/>
</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" BorderBrush="White"
CaretBrush="#FFD94448" Foreground="White"
SelectionBrush="#FFD94448"
materialDesign:HintAssist.Hint="********"/>
</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" ToolTip="登录"
Style="{StaticResource MaterialDesignRaisedButton}"/>
</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>
</Border>
</Grid>
</Window>
MainWindow.xaml.cs文章来源地址https://www.toymoban.com/news/detail-757569.html
using System.Windows;
using System.Windows.Input;
namespace Login5
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void btnExit_Click(object sender, RoutedEventArgs e)
{
this.Close();
}
private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
{
if(Mouse.LeftButton == MouseButtonState.Pressed)
{
this.DragMove();
}
}
}
}
到了这里,关于WPF-一个简单登录界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!