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