WPF 登录页面

效果

项目结构

LoginWindow.xaml

<Window x:Class="PrismWpfApp.Views.LoginWindow"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:PrismWpfApp.ViewModels"xmlns:helper="clr-namespace:PrismWpfApp.Helper"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"mc:Ignorable="d"Background="Transparent" FontFamily="Microsoft YaHei" FontWeight="ExtraLight" ResizeMode="NoResize"WindowStyle="None" AllowsTransparency="True" WindowStartupLocation="CenterScreen"SizeToContent="WidthAndHeight"Title="{Binding Title}" Name="win" ><Window.Resources><ControlTemplate TargetType="Button" x:Key="CloseButtonTemplate"><Grid Background="Transparent" Name="back"><TextBlock Text="&#xe653;" FontFamily="{DynamicResource iconfont}" VerticalAlignment="Center" HorizontalAlignment="Center"FontSize="14"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#DDD" TargetName="back"/></Trigger></ControlTemplate.Triggers></ControlTemplate><Style TargetType="TextBox" x:Key="UsernameTextBoxStyle"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TextBox}"><Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"CornerRadius="5"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="40"/><ColumnDefinition/></Grid.ColumnDefinitions><Border BorderBrush="#DDD" BorderThickness="0,0,1,0" Margin="0,8,5,8"/><TextBlock Text="请输入用户名" Grid.Column="1" VerticalAlignment="Center" Foreground="#BBB"Name="markText" Visibility="Collapsed" FontSize="12" Margin="2,0"/><TextBlock Text="&#xe610;"FontFamily="{DynamicResource iconfont}" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center"Foreground="#DDD"/><ScrollViewer x:Name="PART_ContentHost" Focusable="false"HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"Grid.Column="1"VerticalAlignment="Center" MinHeight="20"/></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsEnabled" Value="false"><Setter Property="Opacity" TargetName="border" Value="0.56"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/></Trigger><Trigger Property="IsKeyboardFocused" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/></Trigger><DataTrigger Binding="{Binding Path=Text,RelativeSource={RelativeSource Mode=Self}}" Value=""><Setter Property="Visibility" TargetName="markText" Value="Visible"/></DataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="PasswordBoxStyle" TargetType="{x:Type PasswordBox}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type PasswordBox}"><Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"CornerRadius="5"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="40"/><ColumnDefinition/></Grid.ColumnDefinitions><Border BorderBrush="#DDD" BorderThickness="0,0,1,0" Margin="0,8,5,8"/><TextBlock Text="请输入密码" Grid.Column="1" VerticalAlignment="Center" Foreground="#BBB"Name="markText" Visibility="Collapsed" FontSize="12" Margin="2,0"/><TextBlock Text="&#xe602;" FontFamily="{StaticResource iconfont}" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center"Foreground="#DDD"/><ScrollViewer x:Name="PART_ContentHost" Focusable="false"HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"Grid.Column="1"VerticalAlignment="Center" MinHeight="20"/></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsEnabled" Value="false"><Setter Property="Opacity" TargetName="border" Value="0.56"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/></Trigger><Trigger Property="IsKeyboardFocused" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/></Trigger><DataTrigger Binding="{Binding Path=UserModel.Password}" Value=""><Setter Property="Visibility" TargetName="markText" Value="Visible"/></DataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Style.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/><Condition Property="IsSelectionActive" Value="false"/></MultiTrigger.Conditions><Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/></MultiTrigger></Style.Triggers></Style></Window.Resources><Window.Triggers><EventTrigger RoutedEvent="Window.Loaded"><BeginStoryboard><Storyboard><DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetName="tt"Storyboard.TargetProperty="X"/></Storyboard></BeginStoryboard></EventTrigger></Window.Triggers><Grid Width="740" Margin="5" Background="Transparent" MouseLeftButtonDown="Grid_MouseLeftButtonDown" ><Border Background="#F7F9FA" Margin="0,6" HorizontalAlignment="Right" Width="330" BorderBrush="#DDD" BorderThickness="0"CornerRadius="0,5,5,0"><Border.Effect><DropShadowEffect Color="Black" ShadowDepth="0" Direction="0" BlurRadius="10" Opacity="0.2"/></Border.Effect><Border.RenderTransform><TranslateTransform X="-350" x:Name="tt"/></Border.RenderTransform><Grid HorizontalAlignment="Right" Width="230" Margin="30,30,30,10"><Grid.RowDefinitions><RowDefinition Height="100"/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition Height="60"/><RowDefinition Height="auto" MinHeight="40"/></Grid.RowDefinitions><StackPanel VerticalAlignment="Center" Margin="0,0,0,30"><TextBlock Text="XX公司" Foreground="#333" FontSize="22"/><TextBlock Text="专注于提升工业智能管理协作平台" FontSize="12" Foreground="#888" Margin="0,10,0,0"/></StackPanel><ComboBox Grid.Row="1" Height="35" Margin="0,8" FontSize="14"ItemsSource="{Binding DataList}"DisplayMemberPath="Name"SelectedValuePath="Id"SelectedItem="{Binding SelectUser, Mode=TwoWay}"/><PasswordBox Grid.Row="2" Height="35" Margin="0,8" Style="{StaticResource PasswordBoxStyle}"helper:PasswordBoxHelper.Attach="true"helper:PasswordBoxHelper.Password="{Binding SelectUser.Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"FontSize="14"/><!--<PasswordBox Grid.Row="2" Height="35" Margin="0,8" Style="{StaticResource PasswordBoxStyle}"FontSize="14"/>--><Button Content="登    录" Background="#FF104991" Foreground="White" Grid.Row="4" Height="30" Margin="0,8" BorderThickness="0" VerticalAlignment="Top"Command="{Binding LoginCommand}" CommandParameter="{Binding Path=.,RelativeSource={RelativeSource AncestorType=Window}}"/><!--<Button Content="登    录" Background="#FF104991" Foreground="White" Grid.Row="4" Height="30" Margin="0,8" BorderThickness="0" VerticalAlignment="Top"Command="{Binding LoginCommand}" CommandParameter="{Binding ElementName=win}"/>--><!--关闭按钮--><Button VerticalAlignment="Top" HorizontalAlignment="Right" Content="X" Margin="0,-30,-25,0"Template="{StaticResource CloseButtonTemplate}" Width="40" Height="30"Command="{Binding CloseCommand}" CommandParameter="{Binding Path=.,RelativeSource={RelativeSource AncestorType=Window}}"/>                <TextBlock Text="{Binding ErrorMsg}" Foreground="Red" TextWrapping="Wrap" Grid.Row="10"TextAlignment="Center"/></Grid></Border><!--图片--><Polygon Points="0 0,420 0,450 200 420 400 0 400" HorizontalAlignment="Left"><Polygon.Fill><!--Viewbox 设置图片显示的位置--><ImageBrush ImageSource="pack://application:,,,/PrismWpfApp;component/Asset/Images/login_image.jpg" Stretch="UniformToFill" Viewbox="0,0,1.4,1"></ImageBrush></Polygon.Fill><Polygon.Effect><!--设置阴影 ShadowDepth 设置偏移量10--><DropShadowEffect Color="Black" ShadowDepth="0" Direction="0" BlurRadius="10" Opacity="0.5"/></Polygon.Effect></Polygon><Polygon Points="0 0,420,0,450 200 420 400 0 400" Opacity="0.2" StrokeThickness="0" Stroke="White" HorizontalAlignment="Left"><Polygon.Fill><RadialGradientBrush><GradientStop Color="#22FFFFFF" Offset="0"/><GradientStop Color="#FF1B283C" Offset="1"/><GradientStop Color="#C6555F6E" Offset="0.617"/></RadialGradientBrush></Polygon.Fill></Polygon></Grid>
</Window>

LoginWindowViewModel

using Prism.Commands;
using PrismWpfApp.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;namespace PrismWpfApp.ViewModels
{public class LoginWindowViewModel : UiViewModelBase{public LoginWindowViewModel(){this.Title = "登录";DataList.Clear();var user1 = new UserInfoModel(){Id = 1,Name = "操作员",Password = ""};DataList.Add(user1);SelectUser = user1;DataList.Add(new UserInfoModel(){Id = 2,Name = "工程师",Password = ""});DataList.Add(new UserInfoModel(){Id = 1,Name = "管理员",Password = ""});}public List<UserInfoModel> DataList { get; set; } = new List<UserInfoModel>();//选择的用户private UserInfoModel _selectUser;/// <summary>/// 选择的用户/// </summary>public UserInfoModel SelectUser{get{return _selectUser;}set{SetProperty(ref _selectUser, value);}}//public string UserName { get; set; } = "admin";//public string Password { get; set; } = "123456";private string _errorMsg;public string ErrorMsg{get{return _errorMsg;}set{_errorMsg = value;SetProperty(ref _errorMsg, value);}}/// <summary>/// 登录命令/// </summary>public DelegateCommand<Window> LoginCommand{get { return new DelegateCommand<Window>((arg) =>{var a = SelectUser;//var b = Password;//执行登录验证arg.DialogResult = true;});}}}
}

Asset