1.创建模型数据类（M）

    /// <summary>/// 数据模型/// </summary>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
{/// <summary>/// 命令转发/// </summary>public class RelayCommand : ICommand{/// <summary>/// 命令是否能够执行/// </summary>private readonly Func<bool> _canExecute;/// <summary>/// 需要执行的方法/// </summary>private readonly Action _execute;/// <summary>/// 构造函数/// </summary>/// <param name="execute"></param>/// <param name="canExecute"></param>public RelayCommand(Action execute, Func<bool> canExecute){_canExecute = canExecute;_execute = execute;}/// <summary>/// 事件句柄/// </summary>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
{/// <summary>/// MVVM 架构的  VM（视图模型类）/// </summary>public class LoginViewModel : INotifyPropertyChanged{/// <summary>///  数据模型（存放数据）/// </summary>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");}}/// <summary>/// 事件-换成命令绑定方式/// </summary>// 登录函数private void LoginFunc(){if (UserName == "WPF" && PassWord == "123"){   // 弹出一个新的界面 ctrl+ k + d//MessageBox.Show("OK");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
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>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}"/>