Hello MVVM

关于什么是MVVM partten，及MVVM partten的相关理论介绍这篇博文就不多说了，各位可以去看下Youtube相关的tutorial。

LZ也是在Youtube、CodePlex和CodeProject上看了许久的教材后，写下了这篇博文，类似的例子外文的网站上很多。写作这篇随笔的目的是，感受一下如何写一个MVVM的WPF 程序。MS的WPF MVP刘铁锰给的一个视频对MVVM的介绍也不错，示例也很好。作为一个MVVM的初学者，希望能通过这篇博文，展现MVVM代码的写作流程。

Beginer to Beginer，为此，LZ在代码中添加了必要的说明。

我们的Demo设计的界面如下：

<Window x:Class="MVVMPro1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <TextBox Grid.Row="0" FontSize="26" />

        <TextBox Grid.Row="1" FontSize="26" />

        <TextBox Grid.Row="2" FontSize="26" />

        <Button  Grid.Row="3" Content="Add" />

    </Grid>

</Window>

非常的简洁，现在要实现的功能是在点击Button，在第三个TextBox中显示钱两个TextBox的Text属性的连接。
--------------------

对于这样一个程序，不用MVVM可能就一行代码就搞定了：为Button添加Click事件，并在其事件处理中写上类似这么的一条语句：

TextBox3.Text=TextBox1.Text+TextBox2.Text;

当然事实也是这样，完全可以不用MVVM模式！

“MVVM的诸多优点。。。。”

MVVM优点，主要目的是通过分离视图（View）和模型（Model），（个人认为：一切模式的最终目标是降低项目成本！）有几大优点　　
1. 低耦合。

　　视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。 　　
2. 可重用性。

　　你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。 　　
3. 独立开发。

　　开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。 　　
4. 可测试。

　　界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

-------------------------------------

好吧！下面看用MVVM如何来写，不借助Prism等框架，我们纯手工来写。

我们可以在项目中添加几个文件夹以方便整个项目的管理。

1.在ViewModels文件夹中添加一个类NotificationObject，这个类是我们所有ViewModel的基类，实现INotifyPropertyChanged接口，还记得前面这个接口？。

using System.ComponentModel;



namespace MVVMPro1.ViewModels

{

    /// <summary>

    /// ViewModel的基类

    /// </summary>

    class NotificationObject:INotifyPropertyChanged

    {

        #region INotifyPropertyChanged 成员



        public event PropertyChangedEventHandler PropertyChanged;



        #endregion

        

        //定义一个方法封转这个事件

        public void RaisePropertyChange(string propertyName)

        {

            if (PropertyChanged !=null)

            {

                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));

            }

        }

    }

}

 2.在Commands文件夹中添加一个DelegateCommand命令，实现ICommand接口：

using System;

using System.Windows.Input;



namespace MVVMPro1.Commands

{

    /// <summary>

    /// MVVM命令使用的事件

    /// </summary>

    class DelegateCommand:ICommand

    {

        #region ICommand 成员



        public bool CanExecute(object parameter)

        {

            if (CanExecuteFunc == null)

            {

                return true;

            }

            return CanExecuteFunc(parameter);

        }



        public event EventHandler CanExecuteChanged;



        public void Execute(object parameter)

        {

            if (ExecuteAction == null)

            {

                return;

            }

            ExecuteAction(parameter);

        }



        #endregion



        public Action<object> ExecuteAction { get; set; }

        public Func<object, bool> CanExecuteFunc { get; set; }

    }

}

3.有了以上1-2准备，我们可以为MainWindow这个View实现一个ViewModel了，在ViewModels文件夹中添加一个MainWindowViewModel类，继承自1定义的NotificationObject类，如下。注意其中的注释部分，这是MVVM模式不容易理解的地方！

using System;

using MVVMPro1.Commands;



namespace MVVMPro1.ViewModels

{

    class MainWindowViewModel:NotificationObject 

    {

        //MainWindow有2个输入，1个输出,对应3个“数据属性”

        private string input1;

        public string Input1

        {

            get { return input1; }

            set 

            {

                input1 = value;

                RaisePropertyChange("Input1");

            }

        }

        private string input2;

        public string Input2

        {

            get { return input2; }

            set

            {

                input2 = value;

                RaisePropertyChange("Input2");

            }

        }

        private string output1;

        public string Output1

        {

            get { return output1; }

            set

            {

                output1= value;

                RaisePropertyChange("Output1");

            }

        }

        //一个Button，共一个“命令属性”

        public DelegateCommand AddCommand{get;set;}

        private void Add(object parameter)

        {

            Output1 = Input1 + Input2;

        }

        //Ctor中进行关联

        public MainWindowViewModel()

        {

            AddCommand = new DelegateCommand();

            AddCommand.ExecuteAction = new Action<object>(Add);

        }



    }

}

 4.为MainWindow添加数据Binding，注意其中的Binding部分

<Window x:Class="MVVMPro1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <TextBox Grid.Row="0" FontSize="26" Text="{Binding Input1}"/>

        <TextBox Grid.Row="1" FontSize="26" Text="{Binding Input2}"/>

        <TextBox Grid.Row="2" FontSize="26" Text="{Binding Output1}"/>

        <Button  Grid.Row="3" Content="Add" Command="{Binding AddCommand}"  />

    </Grid>

</Window>

using System.Windows;

using MVVMPro1.ViewModels;



namespace MVVMPro1

{

    /// <summary>

    /// MainWindow.xaml 的交互逻辑

    /// </summary>

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

            //不要忘了这里

            this.DataContext = new MainWindowViewModel();

        }

    }

}

OK了，Demo下过如下：

　　OK，这样就OK了，注意不使用MVVM模式与使用MVVM模式程序的区别。

　　MVVM实现了View（UI）的分离，只要程序的需求没有本质的变更，需要更改界面，只需要把相应的Binding添加到更新后的界面位置就OK了，ViewModel都不用动！

　　小结：这个例子很初级，学习也是一个循序渐进的过程。这个Demo本身没有什么价值，希望能通过它来有一个具体的东西来消化MVVM的抽象的讲解。没有什么可圈可点的地方，因此写个自己吧，作为一种沉淀的方式。个人倒是很喜欢诸如YouTube、CodeProject、CodePlex等外文网站的关于MVVM的讲解，老外的东西确实不错！

　　MVVM 完全不一样的开发理念！静下心来，理解它，并感受它的美！

　　没什么高端的东西，请关注后续博文~