WPF简单MVVM实现

1. MVVM介绍：

    MVVM就是: Model -- 模型（现实中对象的抽象）

                    View -- UI（用户界面）

　　　　　　　ViewModel -- UI界面的抽象（给View提供数据，并响应View的操作）

2. 关键是要能准确的进行ViewModel的建模,处理好View与ViewModel之间的关系

    2.1. 只有2种关系：

               数据传递 --- 双向，使用Binding实现；

               操作传递 --- 单向（只从View传递给ViewModel），使用命令Command实现；

3. 开始

   3.1. 首先创建NotificationObject,它是所以ViewModel的基类

         因为要使用Binding，而ViewModel就充当数据源的角色，而要实现当值有变化时会自动响应，就必须实现INotifyPropertyChanged接口，代码如下：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMTest.ViewModels
{
    public class NotificationObject:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisePropertyChanged(string property)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(property));

        }
    }
}

   3.2.接着要创建DelegateCommand，实现了ICommand接口，用来处理View发送到ViewModel的命令，代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace MVVMTest.Commands
{
    public class DelegateCommand:ICommand
    {
        public bool CanExecute(object parameter)
        {
            if (this.CanExecuteFunc == null)
            {
                return true;
            }

             return this.CanExecuteFunc(parameter);
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            if (this.ExecuteAction == null)
            {
                return;
            }
            this.ExecuteAction(parameter);
        }

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

   3.3.为了方便开发，这里推荐自定义一个code snippet(代码块)：

        放到此目录下C:Program Files (x86)Microsoft Visual Studio 12.0VC#Snippets1033Visual C#

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>propn</Title>
            <Shortcut>propn</Shortcut>
            <Description>Code snippet for NotificationObject property and backing field</Description>
            <Author>Microsoft Corporation</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>type</ID>
                    <ToolTip>Property type</ToolTip>
                    <Default>int</Default>
                </Literal>
                <Literal>
                    <ID>property</ID>
                    <ToolTip>Property name</ToolTip>
                    <Default>MyProperty</Default>
                </Literal>
                <Literal>
                    <ID>field</ID>
                    <ToolTip>The variable backing this property</ToolTip>
                    <Default>myVar</Default>
                </Literal>
            </Declarations>
            <Code Language="csharp"><![CDATA[private $type$ $field$;

    public $type$ $property$
    {
        get { return $field$;}
        set {     
            $field$ = value;
            this.RaisePropertyChanged("$property$");
        }
    }
    $end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

   3.4. 由于这个例子较简单，所以没有设计到Model的设计，而直接到ViewModel的设计，一般的规则是每个View就有一个对应的ViewModel，而ViewModel是充当View的数据源的，所以只需要考虑View需要什么数据、含有哪些操作，创建MainWindow的ViewModel，MainWindowViewModel,代码如下：

using MVVMTest.Commands;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMTest.ViewModels
{
    public class MainWindowViewModel:NotificationObject
    {
        private string txt1;

        public string Txt1
        {
            get { return txt1; }
            set
            {
                txt1 = value;
                this.RaisePropertyChanged("Txt1");
            }
        }

        private string txt2;

        public string Txt2
        {
            get { return txt2; }
            set
            {
                txt2 = value;
                this.RaisePropertyChanged("Txt2");
            }
        }

        private string result;

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

        public DelegateCommand ConcatCommand { get; set; }
        public void Concat(object parameter)
        {
            Result = Txt1 + " and " + Txt2;
        }


        public MainWindowViewModel()
        {
            ConcatCommand = new DelegateCommand();
            ConcatCommand.ExecuteAction = new Action<object>(Concat);
        }
        
        
        
    }
}

    3.4.将ViewModel作为数据源赋值给View的DataContext

using MVVMTest.ViewModels;
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 MVVMTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel();
        }
    }
}

    3.5.在View中绑定数据：

<Window x:Class="MVVMTest.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>
        <TextBox Margin="40,51,311,216" Text="{Binding Txt1}"/>
        <TextBox Margin="230,51,114,216" Text="{Binding Txt2}"/>
        <TextBox Margin="128,152,176,139" Text="{Binding Result}"/>
        <Button Margin="313,241,64,23" Command="{Binding ConcatCommand}"/>
    </Grid>
</Window>

源代码：http://yunpan.cn/c3c7AAXm4U2dP  访问密码 8788