1.创建模型数据类(M)
public class LoginDataModel{private string _userName;public string UserName{get { return _userName; }set{_userName = value;}}private string _passWord;public string PassWord{get { return _passWord; }set{_passWord = value; }}}
2.命令转发类实现接口(ICommand)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;namespace WPF_LoginUI
{public class RelayCommand : ICommand{private readonly Func<bool> _canExecute;private readonly Action _execute;public RelayCommand(Action execute, Func<bool> canExecute){_canExecute = canExecute;_execute = execute;}public event EventHandler CanExecuteChanged{add{if(_canExecute != null){CommandManager.RequerySuggested += value;}}remove{if (_canExecute != null){CommandManager.RequerySuggested -= value;}}}public bool CanExecute(object parameter){if (_canExecute == null)return true;return _canExecute();}public void Execute(object parameter){_execute();}}
}
3.创建视图模型类(VM)
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;namespace WPF_LoginUI
{public class LoginViewModel : INotifyPropertyChanged{private LoginDataModel loginData;private MainWindow _mainWindow;public LoginViewModel(MainWindow mainWindow) {_mainWindow = mainWindow;loginData = new LoginDataModel();}public event PropertyChangedEventHandler PropertyChanged;private void RaisePropertyChanged(string propertyName){PropertyChangedEventHandler handler = PropertyChanged;if (handler != null)handler(this, new PropertyChangedEventArgs(propertyName));}public string UserName{get { return loginData.UserName; }set{loginData.UserName = value;RaisePropertyChanged("UserName");}}public string PassWord{get { return loginData.PassWord; }set{loginData.PassWord = value;RaisePropertyChanged("PassWord");}}private void LoginFunc(){if (UserName == "WPF" && PassWord == "123"){ IndexWindow indexWindow = new IndexWindow();indexWindow.Show();_mainWindow.Hide();}else{MessageBox.Show("输入的用户名或密码不正确");UserName = "";PassWord = "";}}private bool CanLoginExecute(){return true;}public ICommand LoginAction {get {return new RelayCommand(LoginFunc, CanLoginExecute);} }}
}
4.设置上下文关联
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace WPF_LoginUI
{public partial class MainWindow : Window{public MainWindow(){InitializeComponent();this.DataContext = new LoginViewModel(this); }}
}
5.界面绑定
<!-- 绑定对象的属性 UserName -->
<TextBox Text="{Binding UserName}" Grid.Row="0" Grid.Column="1" Margin="2"/>
<!-- 绑定对象的属性 PassWord -->
<TextBox Text="{Binding PassWord}" Grid.Row="1" Grid.Column="1" Margin="2"/><!-- 命令绑定 登录按钮 执行函数 LoginAction-->
<Button x:Name="BtnLogin" Grid.Row="3" Grid.Column="0" Content="登录" Grid.ColumnSpan="2" Command="{Binding LoginAction}"/>