- A+
所属分类：.NET技术
概述
- 登录窗体无论在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>效果演示
百度网盘链接：https://pan.baidu.com/s/1lvR7VCJTWI3cD1c0EUIDqA
提取码：
获取方式1：添加小编微信mm1552923，备注：登录；
