wpf之mvvm

   初次接触的新名词--MVVM，听着好高大上的名字。经查阅，发现也没有想象中的那么难。

    mvvm【模型－视图－视图模型（Model-View-ViewModel）】是由MVP【模型－视图－表现类（Model-View-Presenter）】发展而来，MVP则是由MVC【模型－视图－控制器(ModelView Controller)】发展而来。由此看来，mvvm其实也不是新知识。

    View：是UI界面，就是用wpf的xaml实现的界面，负责与用户交互，接收用户输入，把数据展现给用户。

    ViewModel：一个C#类，负责收集需要绑定的数据和命令，实现View和Model之间的信息转换，处理UI逻辑。

    Model：就是系统中的对象，可包含属性和行为。

    mvvm示例

本次要做的Demo是计算两个数之和。

简单的界面如图所示：

Xaml代码：

<span style="font-family:KaiTi_GB2312;font-size:24px;"><Window x:Class="MVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="656">
    <Grid Width="624">
		<TextBox Height="23" HorizontalAlignment="Left" Margin="41,90,0,0" Name="txtNum1" VerticalAlignment="Top" Width="120" Text="{Binding Num1}"/>

		<TextBox Height="25" HorizontalAlignment="Left" Margin="195,88,0,0" Name="txtNum2" VerticalAlignment="Top" Width="120" Text="{Binding Num2}"/>

		<Label Content="+" Height="28" HorizontalAlignment="Left" Margin="167,88,0,0" Name="lable1" VerticalAlignment="Top"/>

		<TextBox Height="25" HorizontalAlignment="Left" Margin="364,88,0,0" Name="txtResult" VerticalAlignment="Top" Width="120" Text="{Binding Result}"/>

		<Button  Content="=" Height="23" HorizontalAlignment="Left" Margin="328,90,0,0" Name="btnEqual" VerticalAlignment="Top" Width="28" Command="{Binding CaculateCommand}"/>

		<Button Content="Clear" Height="26" HorizontalAlignment="Left" Margin="501,88,0,0" Name="btnClear" VerticalAlignment="Top" Width="45" Command="{Binding ClearCommand}"/>
    </Grid>
</Window>
</span>

   此处代码的重点在于Binding，用绑定来实现和后台的交互。这样，若后台代码修改后，只要绑定的名称不变，就不会影响到界面。

Xaml的后台cs：

<span style="font-family:KaiTi_GB2312;font-size:24px;">/// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        //构造方法
        public MainWindow()
        {
            InitializeComponent();
            //将View的DataContext设为CaculatorViewModel实例
            this.DataContext = new CaculatorViewModel();	//ViewModel通过View类的DataContext属性绑定到View

        }
    }
</span>

  View通过DataContext实现与ViewModel的交互。

Model层代码：

<span style="font-family:KaiTi_GB2312;font-size:24px;">//Model层的类
    public class CaculatorModel
    {
        public int Num1 { get; set; }   //参数一
        public int Num2 { get; set; }   //参数二
        public int Result { get; set; } //计算结果
    }
</span>

重量级的部分马上呈现。

ICommand类型的基类，用来实现View和ViewModel之间Command的绑定。

<span style="font-family:KaiTi_GB2312;font-size:24px;">//ICommand类型的基类DelegateCommand
    //目的是绑定命令属性。这个类的作用是实现了ICommand接口，WPF中实现了ICommand接口的类，才能作为命令绑定到UI。
    public class DelegateCommand:ICommand
    {
        //
        private Action<object> executeCommand;

        public Action<object> ExecuteCommand
        {
            get { return executeCommand; }
            set { executeCommand = value; }
        }


        //
        private Func<object, bool> canExecuteCommand;

        public Func<object, bool> CanExecuteCommand 
        {
            get { return canExecuteCommand; }
            set { canExecuteCommand = value; }
        }


        //
        public event EventHandler CanExecuteChanged;

        //是继承ICommand必须实现的方法，表示Command调用时判断是否能执行
        public bool CanExecute(object parameter)
        {
            if (CanExecuteCommand!=null)
            {
                return this.CanExecuteCommand(parameter);
            }
            else
            {
                return true;
            }
        }


        //是继承ICommand必须实现的方法，表示Command调用时具体执行逻辑
        public void Execute(object parameter)
        {
            if (this.ExecuteCommand!=null)
            {
                this.ExecuteCommand(parameter);
            }
        }

        public void RaiseCanExecuteChanged() {
            if (CanExecuteCommand!=null)
            {
                CanExecuteChanged(this, EventArgs.Empty);
            }
        }



        public DelegateCommand(Action<object> executeCommand, Func<object, bool> canExecuteCommand) 
        {
            this.executeCommand = executeCommand;
            this.canExecuteCommand = canExecuteCommand;
        }
    }</span>

ViewModel：

<span style="font-family:KaiTi_GB2312;font-size:24px;">//ViewModel的基类
    public class ViewModelBase:INotifyPropertyChanged
    {
        //ViewModelBase实现了接口INotifyPropertyChanged， 在该接口中有一个PropertyChanged事件， 当ViewModel中的Property改变时，允许触发PropertyChanged事件，继而重新绑定数据到UI上。

        //目的是绑定数据属性。这个类的作用是实现了INotifyPropertyChanged接口。WPF中类要实现这个接口，其属性成员才具备通知UI的能力

        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisePropertyChanged(string propertyName)
        {
            if (this.PropertyChanged!=null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }</span>

所有的具体的ViewModel类都要继承ViewModel基类。

<span style="font-family:KaiTi_GB2312;font-size:24px;">//ViewModel具体的实现
    public class CaculatorViewModel : ViewModelBase
    {
        #region Fields  字段

        private int num1;
        private int num2;
        private int result;
        private CaculatorModel model;

        #endregion

        #region Properties  属性
        public int Num1
        {
            get { return num1; }
            set
            {
                num1 = value;
                this.RaisePropertyChanged("Num1");
            }
        }

        public int Num2
        {
            get { return num2; }
            set
            {
                num2 = value;
                this.RaisePropertyChanged("Num2");
            }
        }

        public int Result {
            get { return result; }
            set
            {
                result = value;
                this.RaisePropertyChanged("Result");
            }
        }
        #endregion

        #region Commands  命令
        public ICommand CaculateCommand { get; set; }
        public ICommand ClearCommand { get; set; }
        #endregion

        #region Methods  方法
        //相加的方法
        public void Add(object param) {
            Result = Num1 + Num2;
        }

        //清空的方法
        public void Clear(object param) {
            Result = 0;
            Num1 = 0;
            Num2 = 0;
        }

        //初始化Model数据
        public void InitilizeModelData() {
            var model = new CaculatorModel()
            {
                Num1 = 1,
                Num2 = 1,
                Result = 2
            };

            Num1 = model.Num1;
            Num2 = model.Num2;
            Result = model.Result;
        }

        //构造方法
        public CaculatorViewModel() {
            CaculateCommand = new DelegateCommand(Add, null);
            //CaculateCommand = new DelegateCommand(Reduce, null);
            ClearCommand = new DelegateCommand(Clear, null);

            InitilizeModelData();
        }

        //相减的方法
        //public void Reduce(object param)
        //{
        //    Result = Num1 - Num2;
        //}
        #endregion
    }</span>

   若用户想将加法运算改为减法运算，我们只需要在ViewModel中添加一个减法运算的方法，在View中重新绑定一下就OK了。