[WPF]MVVM的数据绑定

啥是MVVM？

我理解的MVVM是Model（数据），View（界面），ViewModel（数据与界面之间的桥梁）的缩写，是一种编程模式。前期需要多花一些时间去编辑绑定，在后期维护方便。只需要关注数据即可。如：传统的界面更新需要去刷新界面才能读取到最新数据，在MVVM模式下只需要关注数据的更改，在该模式下可以实现控制界面自动更新。

一.数据是如何绑定到界面的？一步一步来！

• 1.创建一个WPF项目，如在VS2022下创建WPF应用程序。（其他版本类似）
  

• 2.项目创建好后，这里先创建Model数据类型。新建一个Model文件夹，添加一个ClassModel类，在此类中我们就写3个字段。
  

• 3.新建View文件夹，添加一个MainView.xaml界面。再把启动界面改成MainView.xaml，这时候可以把项目自动生成的MainWindow.xaml删除掉了。
  

• 4.布局MainView界面。
  

<Page x:Class="WPFMVVM.View.MainView"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WPFMVVM.View"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="500"
      Title="MainView" Background="AliceBlue" FontFamily="行楷">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <TextBlock
            Grid.Row="0"
            Grid.Column="0"
            HorizontalAlignment="Right"
            VerticalAlignment="Center"
            FontSize="50"
            Text="姓名:" />

        <TextBlock
            Grid.Row="0"
            Grid.Column="1"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            FontSize="50"
            Foreground="#0078d4"
            Text="雅男" />

        <TextBlock
            Grid.Row="1"
            Grid.Column="0"
            HorizontalAlignment="Right"
            VerticalAlignment="Center"
            FontSize="50"
            Text="年龄:" />

        <TextBlock
            Grid.Row="1"
            Grid.Column="1"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            FontSize="50"
            Foreground="#0078d4"
            Text="20" />
        <TextBlock
            Grid.Row="2"
            Grid.Column="0"
            HorizontalAlignment="Right"
            VerticalAlignment="Center"
            FontSize="50"
            Text="性别:" />

        <TextBlock
            Grid.Row="2"
            Grid.Column="1"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            FontSize="50"
            Foreground="#0078d4"
            Text="女" />

        <Button
            Grid.Row="3"
            Grid.ColumnSpan="2"
            Width="300"
            Margin="10"
            Content="刷新"
            FontSize="30"
            FontWeight="Bold" 
            Background="Aqua"
            BorderBrush="Azure"/>
    </Grid>
</Page>

• 5.以上界面的数据是写死的。我们需要将显示的地方绑定我们的数据。在绑定之前先建一个ViewModel文件夹。为了和MainView界面对应，要再添加一个MainViewVM类，在此类中我们使用刚创建的ClassMode数据模型，并在构造函数中初始化以下信息。

   public class MainViewVM
    {
        private ClassModel _classM;

        public ClassModel ClassM
        {
            get { return _classM; }
            set { _classM = value; }
        }
        public MainViewVM()
        {
            ClassM = new ClassModel();
            ClassM.Name = "王刚";
            ClassM.Age = 10;
            ClassM.Sex = "男";
        }
    }

• 6.在MainView界面绑定ClassM的属性就行。

 <TextBlock
            Grid.Row="0"
            Grid.Column="1"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            FontSize="50"
            Foreground="#0078d4"
            Text="{Binding ClassM.Name}" />

但是这时候运行项目，发现什么数据也没有。

这是因为数据和界面都有了，我们并没有把他们关联在一起。要把View（MainView）与ViewModel（MainViewVM）关联一起。在MainView.xaml.cs里添加using WPFMVVM.ViewModel引用。再指定MainView的DataContext即可：

using WPFMVVM.ViewModel;
namespace WPFMVVM.View
{
    public partial class MainView : Page
    {
        public MainView()
        {
            InitializeComponent();
            this.DataContext = new MainViewVM();
        }}}

启动解决方案，发现数据已经绑定上去了。

二.属性变更

• 1.MVVM是数据驱动的，我们现在改变以下属性数据，看看界面效果。先简单的给button添加一个click事件:

   <Button
            Grid.Row="3"
            Grid.ColumnSpan="2"
            Width="300"
            Margin="10"
            Content="刷新"
            FontSize="30"
            FontWeight="Bold" 
            Background="Aqua"
            BorderBrush="Azure"
            Click="Button_Click"/>

 public partial class MainView : Page
    {
        MainViewVM mainViewVM;
        public MainView()
        {
            InitializeComponent();
            mainViewVM = new MainViewVM();
            this.DataContext = mainViewVM;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            mainViewVM.ClassM.Name = "王大康";
            mainViewVM.ClassM = mainViewVM.ClassM;//需要再次给ClassM复制才会触发界面刷新
        }
    }

• 2.我们还需要让属性具有通知界面更新的能力。WPF中让属性具备通知更新的能力，要让ViewModel继承类型INotifyPropertyChanged，并实现PropertyChanged属性。此例MainViewVM添加如下：

    public class MainViewVM : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler? PropertyChanged;

        private void RaisePropertyChange(string propertyName)
        {
            PropertyChangedEventHandler hander = PropertyChanged;
            if (hander != null)
            {
                hander(this, new PropertyChangedEventArgs(propertyName));
            }
        }

• 3.完成以上步骤，我们还需要在ViewModel的数据属性set中调用更新界面的方法RaisePropertyChanged:

        public ClassModel ClassM
        {
            get { return _classM; }
            set
            {
                _classM = value;
                RaisePropertyChange(nameof(ClassM));
            }
        }

现在点击Button按钮，可以实现信息的刷新！

三.点击事件

• 1.WPF给我们提供了Command属性，当然在MVVM模式下我们要用Command替换Click方法：

        <Button
            Grid.Row="3"
            Grid.ColumnSpan="2"
            Width="300"
            Margin="10"
            Content="刷新"
            FontSize="30"
            FontWeight="Bold" 
            Background="Aqua"
            BorderBrush="Azure"
            Command="{Binding ClickAction}"
        />

• 2.要实现绑定的ClickAction方法，需要继承ICommand接口。我们可以自己创建类型去实现 CanExecute、Execute、CanExecuteChanged接口。
  下面我们在MainViewVM.cs新建一个RealayCommand类：

  public class RelayCommand<T> : ICommand
    {
        /// <summary>
        /// 命令是否执行
        /// </summary>
        readonly Func<bool> _canExecute;
        /// <summary>
        /// 命令执行的方法
        /// </summary>
        readonly Action<T> _execute;
        /// <summary>
        /// 命令的构造函数
        /// </summary>
        /// <param name="canExecute"></param>
        /// <param name="execute"></param>
        public RelayCommand(Func<bool> canExecute, Action<T> execute)
        {
            _canExecute = canExecute;
            _execute = execute;
        }
        /// <summary>
        /// 判断命令是否可执行
        /// </summary>
        /// <param name="parameter"></param>
        /// <returns></returns>
        public bool CanExecute(object? parameter)
        {
            if (_canExecute == null)
            {
                return true;
            }
            return _canExecute();
        }
        /// <summary>
        /// 执行命令
        /// </summary>
        /// <param name="parameter"></param>
        public void Execute(object parameter)
        {
            _execute((T)parameter);
        }
        /// <summary>
        /// 事件追加、移除
        /// </summary>
        public event EventHandler? CanExecuteChanged
        {
            add
            {
                if (_canExecute != null)
                {
                    CommandManager.RequerySuggested += value;
                }
            }
            remove
            {
                if (_canExecute != null)
                {
                    CommandManager.RequerySuggested -= value;
                }
            }
        }
    }

这个类接收两个参数，一个是命令执行的方法，另一个是返回值方法。

• 3.我们在MainViewVM下编写以下代码调用RelayCommand：

        /// <summary>
        /// 创建Button绑定的命令
        /// </summary>
        public ICommand ClickAction
        {
            get
            {
                return new RelayCommand<object>(CanUpdateExecute, UpdateNameExecute);
            }
        }
        /// <summary>
        /// 命令是否可执行
        /// </summary>
        /// <returns></returns>
        bool CanUpdateExecute()
        {
            return true;
        }
        /// <summary>
        /// 命令执行的方法
        /// </summary>
        /// <param name="parameter"></param>
        void UpdateNameExecute(object parameter) 
        {
                ClassM.Name = "王大康";
                ClassM = ClassM;
        }

此时我们运行程序，点击按钮，可以看到界面可以内容可以实现刷新了！

我们创建的RealayCommand是泛型类，执行命令的时候可以从界面把参数传过来。例如我们可以在Button添加CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"属性，然后把信息传到后台使用：

前端代码：
  <Button
            Grid.Row="3"
            Grid.ColumnSpan="2"
            Width="300"
            Margin="10"
            Content="刷新"
            FontSize="30"
            FontWeight="Bold" 
            Background="Aqua"
            BorderBrush="Azure"
            Command="{Binding ClickAction}"
            CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

button 绑定的命令：
    void UpdateNameExecute(object parameter) 
        {
            Button? button =parameter as Button;//parameter前端绑定的Button
            if (button.Background !=Brushes.BlanchedAlmond) 
            {
                button.Background = Brushes.BlanchedAlmond ;
                ClassM.Name = "王大康";
                ClassM = ClassM;
            }
            else
            {
                button.Background=Brushes.DarkBlue; 
                ClassM.Name = "李小康";
                ClassM = ClassM;
            }
        }

到此，简单的MVVM数据绑定完成👌

---

其实吧大可不必那么麻烦，我们可以安装引用GalaSoft.MvvmLight库，RaisePropertyChange/RelayCommand都不用自定义了，省事了。如下是引用库后的MainViewVM代码：

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using WPFMVVM.Model;

namespace WPFMVVM.ViewModel
{
    public class MainViewVM : ViewModelBase
    {
        private ClassModel _classM;
        public ClassModel ClassM
        {
            get { return _classM; }
            set
            {
                _classM = value;
                RaisePropertyChanged(nameof(ClassM));
            }
        }
        public MainViewVM()
        {
            ClassM = new ClassModel();
            ClassM.Name = "王xiao刚";
            ClassM.Age = 10;
            ClassM.Sex = "男";
        }

        /// <summary>
        /// 创建Button绑定的命令
        /// </summary>
        public ICommand ClickAction
        {
            get
            {
                return new RelayCommand<object>(UpdateNameExecute);
            }
        }
        /// <summary>
        /// 命令执行的函数
        /// </summary>
        /// <param name="parameter"></param>
        private void UpdateNameExecute(object parameter)
        {
            Button? button = parameter as Button;
            if (button.Background != Brushes.BlanchedAlmond)
            {
                button.Background = Brushes.BlanchedAlmond;
                ClassM.Name = "王大康";
                ClassM = ClassM;
            }
            else
            {
                button.Background = Brushes.DarkBlue;
                ClassM.Name = "李小康";
                ClassM = ClassM;
            }
        }
    }
}