C# CM框架下打造符合MVVM思想的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:
          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"  WindowStartupLocation="CenterScreen">
      <Grid   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" 
                    Height="48"  BorderBrush="{x:Null}" Background="{x:Null}"
                   HorizontalAlignment="Right" VerticalAlignment="Top">
              <Image Source="/Images/exit1.png"/>
          </Button>
          <Image Grid.Row="0"  VerticalAlignment="Center"   Height="120" Source="/Images/login.png" />
  ?
          <TextBox x:Name="UserTextBox" Text="{Binding UserInformation.UserName}"  Grid.Row="1"   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"  FontFamily="Microsoft YaHei">
              <TextBlock.Style>
                  <Style TargetType="{x:Type TextBlock}">
                      <Setter Property="Visibility" Value="https://www.cnblogs.com/zls366/archive/2022/03/12/Collapsed"/>
                      <Style.Triggers>
                          <DataTrigger Binding="{Binding Text, ElementName=UserTextBox}" Value="">
                              <Setter Property="Visibility" Value="https://www.cnblogs.com/zls366/archive/2022/03/12/Visible"/>
                          </DataTrigger>
                      </Style.Triggers>
  </Style>
              </TextBlock.Style>
          </TextBlock>
          <dxe:PasswordBoxEdit  x:Name="PwdTextBox" Text="{Binding UserInformation.Password}"  
                                Grid.Row="2"   
                                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"  FontFamily="Microsoft YaHei">
              <TextBlock.Style>
                  <Style TargetType="{x:Type TextBlock}">
                      <Setter Property="Visibility" Value="https://www.cnblogs.com/zls366/archive/2022/03/12/Collapsed"/>
                      <Style.Triggers>
                          <DataTrigger Binding="{Binding Text, ElementName=PwdTextBox}" Value="">
                              <Setter Property="Visibility" Value="https://www.cnblogs.com/zls366/archive/2022/03/12/Visible"/>
                          </DataTrigger>
                      </Style.Triggers>
  </Style>
              </TextBlock.Style>
          </TextBlock>
  ?
          <Button Name="BtnLogin"  Grid.Row="2"   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，備注：登錄；

標籤：.NET技术

上一篇：.NET中的HashSet

下一篇：C# CM框架下一行代碼實作多頁面管理