2024年2月

  1. 创建Model(模型)
    首先定义一个LoginModel模型来表示登录信息。

    namespace Login.Model
    {
     public class LoginModel
     {
         public string Username { get; set; }
         public string Password { get; set; }
     }
    }
  2. 创建ViewModel(视图模型)
    ViewModel作为View和Model之间的桥梁,包含用户输入的数据和命令绑定。

    using System;
    using System.ComponentModel;
    using System.Windows.Input;
    using Login.Command;
    using Login.Model;
    
    namespace Login.ViewModel
    {
     public class LoginViewModel : INotifyPropertyChanged
     {
    
         private LoginModel loginModel;
    
         public String Username
         {
             get { return loginModel.Username; }
             set
             { 
                 this.loginModel.Username = value;
                 OnPropertyChanged(nameof(Username));
             }
         }
    
         public String Password
         { 
             get { return loginModel.Password; }
             set
             { 
                 this.loginModel.Password = value;
                 OnPropertyChanged("Password");
             }
         }
    
         public ICommand LoginCommand { get; private set; }
    
         public LoginViewModel()
         {
             loginModel = new LoginModel();
             LoginCommand = new RelayCommand(Login, CanLogin);
         }
    
         private void Login(object parameter)
         {
             // 在这里添加登入逻辑
             if (CanLogin(null))
             {
                 Console.WriteLine($"登录成功:用户名={Username}, 密码={Password}");
             }
         }
    
         private bool CanLogin(object parameter)
         {
             // 在这里添加验证逻辑
             return !string.IsNullOrEmpty(Username) && !string.IsNullOrEmpty(Password);
         }
    
         public event PropertyChangedEventHandler PropertyChanged;
         protected virtual void OnPropertyChanged(string propertyName)
         {
             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
         }
     }
    }
  3. 创建View(视图)
    接下来创建XAML界面用于用户输入和触发登录命令。

    <Window x:Class="Login.MainWindow"
         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:Login"
         mc:Ignorable="d"
         Title="MainWindow" Height="450" Width="800">
     <Grid>
         <StackPanel Margin="20">
             <Label Content="Username:"/>
             <TextBox Text="{Binding Username, UpdateSourceTrigger=PropertyChanged}" Margin="0,5"/>
             <Label Content="Password:"/>
             <TextBox Text="{Binding Password, UpdateSourceTrigger=PropertyChanged}" Margin="0,5"/>
             <Button Content="Login" Command="{Binding LoginCommand}" Width="100" Height="30" Margin="0,15"/>
         </StackPanel>
     </Grid>
    </Window>

    4.创建RelayCommand
    RelayCommand是一个实现了ICommand接口的类,用于绑定View中的命令到ViewModel的命令处理方法

    using System;
    using System.Windows.Input;
    
    namespace Login.Command
    {
     public class RelayCommand : ICommand
     {
         private readonly Action<object> _execute;
         private readonly Func<object, bool> _canExecute;
    
         public RelayCommand(Action<object> execute, Func<object, bool> canExecute = null)
         {
             _execute = execute ?? throw new ArgumentNullException(nameof(execute));
             _canExecute = canExecute;
         }
    
         public event EventHandler CanExecuteChanged
         {
             add { CommandManager.RequerySuggested += value; }
             remove { CommandManager.RequerySuggested -= value; }
         }
    
         public bool CanExecute(object parameter)
         {
             return _canExecute == null || _canExecute(parameter);
         }
    
         public void Execute(object parameter)
         {
             _execute(parameter);
         }
     }
    }

    5.绑定DataContext
    建立视图(UI)与视图模型(ViewModel)之间的数据绑定关系

    using System.Windows.Data;
    using Login.ViewModel;
    
    namespace Login
    {
     /// <summary>
     /// MainWindow.xaml 的交互逻辑
     /// </summary>
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             DataContext = new LoginViewModel();
         }
     }
    }