初识MVVM(一)

说明：关于什么是MVVM，园子中已经有很多文章做过介绍，自己对MVVM也有了初步的认识，算是一知半解吧。概念看起来总是有那么点抽象，简单的办法就是通过动手实践来进一步理解。

从网上弄了几个案例，相信有人看过，在此只为了自己加深对MVVM的认识。

1.目录结构，MVVM的目录结构大致如下：

2.类图及实现过程

简单的实现过程大致如下，首先就是手动实现两个接口：INotifyPropertyChanged,ICommand.

2.1 INotifyPropertyChanged 接口的实现

//1.继承INotifyPropertyChanged，要引用该命名空间
using System.ComponentModel;

namespace MVVMDemo.ViewModels
{
    class NotificationObject:INotifyPropertyChanged
    {
        //（intface INotifyPropertyChanged,向客户端发出某些属性已更改的通知）
        //2.实现接口INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;

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

2.2 实现ICommand接口

  class DelegateCommand:ICommand
    {
        //ICommand 两个方法 CanExecute 和Execute，一个事件CanExecuteChanged

        public bool CanExecute(object parameter)
        {
            //throw new NotImplementedException();
            if (this.CanExecuteFunc==null)
            {
                return true;
            }
          return   this.CanExecuteFunc(parameter);
        }

        public event EventHandler CanExecuteChanged;

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

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

2.3 ViewModel的实现

ViewModel中主要实现业务逻辑。本例要实现两数的加法运算：

在这个步骤中首先要完成数据属性的定义，例如：

        private double input1;

        public double Input1
        {
            get { return input1; }
            set
            {
                input1 = value;
                this.RaisePropertyChanged("Input1");
            }
        }

如果数据属性的数量比较多，那么输入总是要花费较多的时间，这里有个小技巧，就是使用快捷的输入方法，但是VS自身提供的代码段是有限的，幸运的是我们可以通过：工具>

代码段管理器>添加来添加自定义的代码段。

具体的方法是在安装路径下找到系统内置的代码段来修改，自定义自己需要的代码段。

<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>propfull</Title>
            <Shortcut>propfull</Shortcut>
            <Description>属性和支持字段的代码段</Description>
            <Author>Microsoft Corporation</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>type</ID>
                    <ToolTip>属性类型</ToolTip>
                    <Default>int</Default>
                </Literal>
                <Literal>
                    <ID>property</ID>
                    <ToolTip>属性名</ToolTip>
                    <Default>MyProperty</Default>
                </Literal>
                <Literal>
                    <ID>field</ID>
                    <ToolTip>支持此属性的变量</ToolTip>
                    <Default>myVar</Default>
                </Literal>
            </Declarations>
            <Code Language="csharp">
                <![CDATA[private $type$ $field$;

    public $type$ $property$
    {
        get { return $field$;}
        set { $field$ = value;}
    }
    $end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

主要修改Title，Shortcut和Code节点中的内容。例如：将上面的Code节点的内容改为如下

            <Code Language="csharp">
            <![CDATA[private $type$ $field$;

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

通过输入ShortCut节点中的名称，双击Tab键就可以快速输入代码。

2）命令属性的实现

    public DelegateCommand AddCommand { get; set; }
        public DelegateCommand SaveCommand { get; set; }

        private void Add(object parameter)
        {
            this.Result = this.Input1 + this.Input2;

        }

        private void Save(object parameter)
        {
            SaveFileDialog dlg = new SaveFileDialog();
            dlg.ShowDialog();
           
        }

3）在构造函数中实例化委托

 //构造函数
        public MainWindowViewModel()
        {
            this.AddCommand = new DelegateCommand();
            this.AddCommand.ExecuteAction = new Action<object>(this.Add);

            this.SaveCommand = new DelegateCommand();
            this.SaveCommand.ExecuteAction = new Action<object>(this.Save);
        }

2.4绑定View

 

 <Button Content="Save" Height="38" HorizontalAlignment="Left" Margin="163,20,0,0" x:Name="btnSave" VerticalAlignment="Top" Width="110" Command="{Binding SaveCommand}" />
        <TextBox Background="{StaticResource {x:Static SystemColors.HighlightBrushKey}}" Grid.Row="1" Margin="6" Text="{Binding Input1}" />
        <TextBox Background="{StaticResource {x:Static SystemColors.HighlightBrushKey}}" Grid.Row="2" Margin="6" Text="{Binding Input2}" />
        <TextBox Background="{StaticResource {x:Static SystemColors.HighlightBrushKey}}" Grid.Row="3" Margin="6" Text="{Binding Result}" />
        <Button Content="Add" Height="38" HorizontalAlignment="Left" Margin="163,21,0,0" x:Name="btnAdd" VerticalAlignment="Top" Width="108" Grid.Row="4" Command="{Binding AddCommand}" />

在后台代码中，只需做类似如下的操作：

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new MainWindowViewModel();
        }
    }

即使我们将TextBox控件改为使用Slider，我们只需重新对Slider的进行重新绑定。如下：

 

 <Slider x:Name="slider1" Grid.Row="0" Background="LightBlue" Minimum="-100" Maximum="100" Margin="4"
                    Value="{Binding Input1}" />
                <Slider x:Name="slider2" Grid.Row="1" Background="LightBlue" Minimum="-100" Maximum="100" Margin="4"
                    Value="{Binding Input2}" />
                <Slider x:Name="slider3" Grid.Row="2" Background="LightBlue" Minimum="-100" Maximum="100" Margin="4"
                    Value="{Binding Result}" />
                <Button x:Name="addButton" Grid.Row="3" Content="Add" Width="120" Height="80" Command="{Binding AddCommand}"/>

说明：其实，没有必要自己手动实现两个接口，Prism为你完成了这两件事，你需要做的就是添加引用集并引用相应的命名空间。