C# WPF登录窗体

概述

登录窗体无论在bs还是cs中都很常见,使用winform或者wpf ui进行设计都相对比较简单,但是如果在WPF框架,比如:Caliburn.Micro下,设计一个符合MVVM思想的登录窗体就相对有了点难度,因为CM框架本身的设计理念是VM first而非View first.接下来开始讲解我的设计..

后台设计

  • 数据模型:定义一个用户登录类,类中囊括三个属性

    public class UserInformation    {        public UserInformation()        {            UserName = "zls20210502";            Password = "123456";        }        /// <summary>        /// 用户名        /// </summary>        public string UserName { get; set; }
            /// <summary>        /// 密码        /// </summary>        public string Password { get; set; }
            /// <summary>        /// 性别        /// </summary>        public int Gender { get; set; }
        }
  •   登录信息验证:这里按理应该增加注册信息,应该是个list,我只是举例写了一组:

    public string ValidateLoginData()        {            StringBuilder sb = new StringBuilder();            if (UserInformation.UserName == "zls20210502"                    && UserInformation.Password == "12345678")            {                sb.Append("");            }            else            {                sb.AppendLine("账号或者密码输入有误,请检查!");            }            return sb.ToString();        }
  • 登录方法:这里首先验证登录信息,验证失败就弹窗提示报错信息,否则通过GetView()方法获取当前view并隐藏,然后通过IOC获取IWindowManager,再通过ShowDialog显示主窗体,这几个方法都CM框架集成的方法.登录窗体需要继承Screen.

     public void BtnLogin()        {            var str = ValidateLoginData();            if(!string.IsNullOrEmpty(str))            {                MessageBox.Show(str);             }            else             {                var loginWindow = (Window)this.GetView();                loginWindow.Hide();
                    MainWindowViewModel mainWindowViewModel = new MainWindowViewModel();                IWindowManager windowManager = IoC.Get<IWindowManager>();                windowManager.ShowDialog(mainWindowViewModel);                this.TryClose();            }
            }

前台设计

  • 前台的密码框采用dev下的PasswordBoxEdit,因为wpf自带的PasswordBox的Password不支持绑定:

全部代码如下:

<Window x:Class="Caliburn.Micro.Hello.LoginView"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"        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"        WindowStyle="None" AllowsTransparency="True" Background="{x:Null}"        Title="LoginWindow" Height="320" Width="300" WindowStartupLocation="CenterScreen">    <Grid  Width="{Binding Width, ElementName=w}" Height="{Binding Height, ElementName=w}">        <Grid.RowDefinitions>            <RowDefinition Height="150" />            <RowDefinition Height="50" />            <RowDefinition Height="50" />            <RowDefinition  />        </Grid.RowDefinitions>        <Border Grid.RowSpan="4" BorderBrush="Gray" BorderThickness="3" CornerRadius="20" Margin="10"  Opacity="1"  Background="White"></Border>        <Button  Name="BtnClose"  Grid.Row="0" Margin="20"                  Width="48" Height="48"  BorderBrush="{x:Null}" Background="{x:Null}"                 HorizontalAlignment="Right" VerticalAlignment="Top">            <Image Source="/Images/exit1.png"/>        </Button>        <Image Grid.Row="0"  VerticalAlignment="Center" Width="120"  Height="120" Source="/Images/login.png" />
        <TextBox x:Name="UserTextBox" Text="{Binding UserInformation.UserName}"  Grid.Row="1"  Width="200" VerticalAlignment="Bottom" BorderThickness="0,0,0,1" Height="25"></TextBox>        <TextBlock Foreground="DarkGray"  Grid.Row="1"  IsHitTestVisible="False" HorizontalAlignment="Center" Height="25" Text="请输入用户名" VerticalAlignment="Bottom" Width="90" FontFamily="Microsoft YaHei">            <TextBlock.Style>                <Style TargetType="{x:Type TextBlock}">                    <Setter Property="Visibility" Value="Collapsed"/>                    <Style.Triggers>                        <DataTrigger Binding="{Binding Text, ElementName=UserTextBox}" Value="">                            <Setter Property="Visibility" Value="Visible"/>                        </DataTrigger>                    </Style.Triggers></Style>            </TextBlock.Style>        </TextBlock>        <dxe:PasswordBoxEdit  x:Name="PwdTextBox" Text="{Binding UserInformation.Password}"                                Grid.Row="2"  Width="200"                               VerticalAlignment="Bottom" BorderThickness="0,0,0,1" Height="25"></dxe:PasswordBoxEdit>        <TextBlock Foreground="DarkGray" Grid.Row="2"  IsHitTestVisible="False" HorizontalAlignment="Center" Height="25" Text="请输入密码" VerticalAlignment="Bottom" Width="90" FontFamily="Microsoft YaHei">            <TextBlock.Style>                <Style TargetType="{x:Type TextBlock}">                    <Setter Property="Visibility" Value="Collapsed"/>                    <Style.Triggers>                        <DataTrigger Binding="{Binding Text, ElementName=PwdTextBox}" Value="">                            <Setter Property="Visibility" Value="Visible"/>                        </DataTrigger>                    </Style.Triggers></Style>            </TextBlock.Style>        </TextBlock>
        <Button Name="BtnLogin"  Grid.Row="2"  Width="48" Margin="0,0,20,0"                BorderBrush="{x:Null}" Background="{x:Null}"                 Height="48"   HorizontalAlignment="Right" VerticalAlignment="Top">            <Image Source="/Images/userlogin.png"/>        </Button>    </Grid></Window>

效果演示

C# WPF登录窗体

源码提取

项目下载下来先还原包,得联网的奥,确保引用的地方没有黄色感叹号,此项目还引用了几个dev的库,确保dev已经安装。

百度网盘下载链接:

https://pan.baidu.com/s/13-qYKaK0AeTVKg-FQrpcaw

提取码:0000