浅谈MVVM模式在控件编写中的一些概念和操作方法

作者: Huisama | 来源:发表于2017-01-01 23:16 被阅读704次

浅谈MVVM模式在控件编写中的一些概念和操作方法

在WPF中有UserControl和CostumeControl两种控件，其中CostumeControl是属于look-less Control，因此在使用上和普通的控件事实上并没有任何区别，在我看来所谓的CostumeControl事实上就是Modify-and-reuse Control，因此如果WPF工程使用了MVVM模式的话，CostumeControl事实上面向Main View是没有什么内部黑盒的，所以在使用MVVM时不需要考虑太多问题。

而我们的问题主要集中在UserControl上，因为UserControl就不是复用这么简单了，它事实上是一个黑盒，对于Main View而言，它自身也是一个View，我称之为二级View，同样的，还有三级、四级……在很多情况下，一个UserControl内部的渲染、逻辑等实现是不应该暴露给外界的，也就是说UserControl应该和其他的普通控件一样，是out-of-box的。那么这样一来，就需要考虑以下事实：

UserControl应该对外暴露出依赖属性；

UserControl不应该对外暴露出和自身逻辑、渲染有关的任何API，一切控件内部的变化都应该由暴露出去的依赖属性的改变作为触发；
UserControl的依赖属性有时需要和其内部的子控件进行Binding。

而如果UserControl的实现很复杂的话，那么我们在实现UserControl的时候可能会考虑使用MVVM模式，但是在使用MVVM之前我们需要考虑以下几个问题：

谁是View？

谁是ViewModel？
谁是Model？

对于第一个问题，毋庸置疑的，Uercontrol的View就是它的xaml，里面定义的所有子控件组成了一个View，在考虑这个问题的时候，就需要把这个View单独出来考虑了。

既然View确定好了，那么考虑第二个，谁是ViewModel？这个问题其实也很好回答，为UserControl内建一个ViewModel就行，它负责UserControl的逻辑、渲染等控制。而UserControl所有内部子控件需要Binding的依赖属性都应该去和ViewModel中的依赖属性进行绑定，而不应该直接和UserControl的依赖属性发生关系。

最后一个问题，Model。这其实是把MVVM应用到UserControl中最为棘手的地方。因为如果我们要编写一个可复用的UserControl的话，那么Model应该是用户提供的，那么用户方事实上是把自己的Model通过外部的ViewModel绑定在了UserControl的依赖属性上的。因此，考虑到这一点，在编写UserControl的时候我们不应该引入Model，因此，编写UserControl应该是VVM模式了。

其实对于上述讨论还有一个考量，那就是对于UserControl而言，它也不需要持久化的数据保存，因此事实上很多时候也不需要Model；更何况如果使用了Model那意味着在使用的时候还得把Model暴露给用户，这显然是破坏了UserControl封装性的本意。

因此，经过上面的讨论，我们知道了要编写一个UserControl使用的事实上是VVM模式，那么具体要怎么操作呢？经过一段时间的试验，我摸索出了一个应该算是比较好用的方法，总结起来如下：

UserControl中的子控件的依赖属性如果需要Binding，那么需要Binding到ViewModel上，而不是直接和UserControl的依赖属性发生关系；

UserControl暴露出来的控件直接用于调用方进行Binding；
当UserControl的依赖属性发生变化的时候，应该通过Messenger发送一个消息来通知ViewModel去修改相应的依赖属性；
当ViewModel的依赖属性发生变化的时候，应该通过Messenger发送一个消息来通知UserControl去修改相应的依赖属性。

其中3、4点实现了ViewModel和View之间的解耦，而不需要使用丑陋的后台Binding来把UserControl的依赖属性和ViewModel绑定起来。

下面以一个简单的实例来说明这个问题：

这里我们定义一个简单UserControl，内部只有一个TextBox控件：

TestControl.xaml：

<UserControl x:Class="MVVM_for_UserControl_Test.TestControl"
             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:MVVM_for_UserControl_Test"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <local:TestViewModel x:Key="TestViewModel"/>
    </UserControl.Resources>
    
    <UserControl.DataContext>
        <Binding Source="{StaticResource TestViewModel}"/>
    </UserControl.DataContext>
    <StackPanel>
        <TextBox DataContext="{StaticResource TestViewModel}" Text="{Binding ThisText}"></TextBox>
    </StackPanel>
</UserControl>

其中我们为这个UserControl定义了这样子的ViewModel并把ViewModel的依赖属性绑到了TextBox的Text上：

TestViewModel.cs：

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Messaging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVVM_for_UserControl_Test
{
    enum MessageTokens
    {
        MyTextChangedFromView,
        MyTextChangedFromViewModel,
    }
    public class TestViewModel : ViewModelBase
    {
        private String _myText = "";
        public String ThisText
        {
            get { return _myText; }
            set
            {
                if(_myText == value)
                {
                    return;
                }
                _myText = value;
                Messenger.Default.Send<String>(value, MessageTokens.MyTextChangedFromViewModel);
                RaisePropertyChanged(() => ThisText);
            }
        }
        public TestViewModel()
        {
            Messenger.Default.Register<String>(this, MessageTokens.MyTextChangedFromView, (msg) =>
            {
                ThisText = msg;
            });
        }
    }
}

其中MessageTokens是用来区分消息类型的Token，表示消息从哪里发往哪里，比如MyTextChangedFromView表示消息来自View这边，而MyTextChangedFromViewModel表示消息来自ViewModel这边。

可以看到，当ThisText这个属性被修改的时候我们发出了一个消息通知View需要更新MyText属性。不过需要注意的是，这里有一个if(_myText == value) 这个判断，这个判断是非常必要的，至于为什么需要这个判断放到后面来讲。

其次就是在TestViewModel的构造函数中注册了一个监听器，监听从View那边传来的要求这边修改ThisText属性的消息，并对这个属性进行修改。这就是Usercontrol的ViewModel的主要内容了。

然后我们来看一下UserControl的View的后台代码：

TestContro.xaml.cs：

using GalaSoft.MvvmLight.Messaging;
using System;
using System.Collections.Generic;
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 MVVM_for_UserControl_Test
{
    /// <summary>
    /// UserControl1.xaml 的交互逻辑
    /// </summary>
    public partial class TestControl : UserControl
    {
        public String MyText
        {
            get { return (String)GetValue(MyTextProperty); }
            set {
                if(value == (String)GetValue(MyTextProperty))
                {
                    return;
                }
                SetValue(MyTextProperty, value);
            }
        }
        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MyTextProperty =
            DependencyProperty.Register("MyText", typeof(String), typeof(TestControl), new PropertyMetadata("", OnMyTextChanged));
        private static void OnMyTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var control = d as TestControl;
            Messenger.Default.Send<String>(control.MyText, MessageTokens.MyTextChangedFromView);
        }
        public TestControl()
        {
            InitializeComponent();
            Messenger.Default.Register<String>(this, MessageTokens.MyTextChangedFromViewModel, (msg) =>
            {
                MyText = msg;
            });
        }
    }
}

在后台代码中我们为UserControl定义了MyText这个依赖属性，然后在这个属性被改变时的回调方法中发送了一个消息，告诉ViewModel去更改它的相应的属性。同样的，在构造函数中我们也定义了一个监听器用来监听前面说到的从ViewModel发过来的更新指令。

同样的，需要注意的是，MyText这个依赖属性的setter中我们也加了一个判断。这里要解释一下为什么要有这个判断了，这就涉及到循环通知的问题。

考虑一下，如果是ViewModel中的ThisText发生了改变，那么它就会去通知View中的MyText发生改变，而MyText发生改变之后又回去通知ViewModel中的ThisText去发生改变……如此就产生了死循环，因此为了打破这个“通知怪圈”，我们需要添加一个if判断来终止它：当通知我要进行修改的内容并没有改变，那么我们就忽略这个改变。注意，这个操作是非常重要的，如果没有这个操作，那么整个程序将无法正常运作。

UserControl的大致内容就这么一些了，剩下的是Main View的实现，完全套用的MVVM模式，也就不细讲了：

MainWindow.xaml：

<Window x:Class="MVVM_TEST.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:MVVM_TEST"
        xmlns:test="clr-namespace:MVVM_for_UserControl_Test;assembly=MVVM_for_UserControl_Test"
        xmlns:vm="clr-namespace:MVVM_TEST.ViewModel"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <vm:ViewModelLocator x:Key="Locator"/>
    </Window.Resources>
    <Window.DataContext>
        <Binding Source="{StaticResource Locator}" Path="Main"></Binding>
    </Window.DataContext>
    
    <StackPanel>
        <test:TestControl DataContext="{Binding MainModel}" MyText="{Binding MyText}"/>
        <Button Command="{Binding ClickHandle}">Change</Button>
    </StackPanel>
</Window>

MainViewModel.cs：

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using MVVM_TEST.Model;
using System.Windows;
namespace MVVM_TEST.ViewModel
{
    /// <summary>
    /// This class contains properties that the main View can data bind to.
    /// <para>
    /// Use the <strong>mvvminpc</strong> snippet to add bindable properties to this ViewModel.
    /// </para>
    /// <para>
    /// You can also use Blend to data bind with the tool's support.
    /// </para>
    /// <para>
    /// See http://www.galasoft.ch/mvvm
    /// </para>
    /// </summary>
    public class MainViewModel : ViewModelBase
    {
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        private TestModel _testModel;
        public TestModel MainModel
        {
            get { return _testModel; }
            set
            {
                _testModel = value;
                RaisePropertyChanged(() => MainModel);
            }
        }
        public RelayCommand ClickHandle { get; set; }
        public MainViewModel()
        {
            MainModel = new TestModel()
            {
                MyText = "Hello"
            };
            ClickHandle = new RelayCommand(() =>
            {
                MainModel.MyText = "Hello, World!";
            });
        }
    }
}

TestModel.cs：

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVVM_TEST.Model
{
    public class TestModel : ObservableObject
    {
        private String _myText = "";
        public String MyText
        {
            get { return _myText; }
            set
            {
                _myText = value;
                RaisePropertyChanged(() => MyText);
            }
        }
    }
}

运行结果如下：

Model修改前.png

Model修改后.png

示例工程：点我下载

补充

关于用MVVM模式编写UserControl的问题，我在Google上搜索了很久，发现有许多人都认为MVVM不适合用于UserControl的编写，原因在于UserControl只是一个View，很多时候我们都只能为它硬编码。

但是如果当UserControl变得相当复杂、且我们不希望暴露太多具体实现给用户的的时候，我们不得不采用MVVM模式来完成UserControl的编写。而要完成这样一个任务，就需要弄懂到底M、V、VM都是什么，尤其是如果把UserControl看成是第二级View的情况下，那么就更需要弄清楚这一点了。

事实上，在UserControl上使用MVVM最大的问题我认为就是UserControl的依赖属性与其ViewModel的依赖属性的绑定问题，事实上也可以通过后台代码来进行绑定，但是个人认为这种实现并不是太漂亮，因此就采用了Messenger通信的方式来变相地完成这种绑定，虽然代码可能会多写一些，但是让View和ViewModel解耦了也算是一种补偿。

网友评论

72061c0823b8:这种方法存在一个问题：当同时使用两个控件时，两个控件的ViewModel都会收到Message，怎么区分是哪个View的数据发生了变化呢？
Huisama:您的意思是使用两个相同的控件？这个问题的确存在，我的解决方法是对于全局都是独一无二的控件而言，那么直接使用 Messenger.Default 即可，否则就需要多做点工作：假如 A B 两个控件都是同一个 UserControl 的实例，那么在生成 A B 两个控件的时候，不使用默认的 Messenger.Default，而是每个 UserControl 的实例都有一个单独的 Mesenger 实例以及一个单独的 ViewModel （首先在 View 的 XAML 声明一个 Messenger 以及一个 ViewModel 的StaticResource），然后在 View InitializeComponent() 之后通过 this.Resource[] 获取到这个 Messenger 然后赋给 ViewModel 的用来保存 Messenger 的字段上（因为 ViewModel 也是声明为 StaticResource 的，因此也可以通过this.Resources[]来获得）。这样一来，只要在ViewModel 和 View 中使用这个独有的 Messenger 来传递消息，那么就保证了不同的控件之间的消息独立性了。

浅谈MVVM模式在控件编写中的一些概念和操作方法

浅谈MVVM模式在控件编写中的一些概念和操作方法

补充

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

WPF

C#

程序员

今日看点

架构算法设计模式和编程理论