概述

• 登录窗体无论在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>

效果演示

源码提取

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

百度网盘下载链接：

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

提取码：0000

技术群：添加小编微信并备注进群

小编微信：mm1552923

公众号：dotNet编程大全