浅谈WPF中的MVVM

一些基础知识

1. WPF中的一个重要特性就是数据绑定（data binding），简单的说就是你有一些数据要显示给用户，你可以把数据和xaml进行绑定。
2. WPF由2部分组成：描述GUI布局和效果的xaml文件，和xaml关联的cs文件。
3. 如果你想最大程度上的复用你的代码，最好的方法就是使用MVVM（Model、View、ViewModel）模式，这样可以保证你的View部分包含的代码最少

一些关键点

1. 你需要一个集合来保存数据，这个集合是ObservableCollection,而不能用List，Dictionary等。ObservableCollection的特点是在添加项、移除项或刷新整个列表时，此集合将提供通知
2. 包括Window在内的所有的WPF控件都有一个DataContext
3. 接口INotifyPropertyChanged是数据变化和GUI之间的桥梁

实例

再多的描述也不如一个实例更能够说明问题

我创建了一个Song类，用于存储一首歌曲中的信息，包括了歌曲名和歌手名

public class Song{    private string _songTitle;    private string _artistName;    public string SongTitle    {        get { return _songTitle; }        set { _songTitle = value; }    }    public string ArtistName    {        get { return _artistName;}        set { _artistName = value; }    }}

设置DataContext方法有两种：
在xaml中：

<Window.DataContext>    <local:SongViewModel /></Window.DataContext>

或者在cs文件中设置DataContext

public partial class MainWindow : Window{    SongViewModel _viewModel = new SongViewModel();    public MainWindow()    {        InitializeComponent();        base.DataContext = _viewModel;    }}

在WPF中，这个Song类就是Model，而GUI则是View，ViewModel把这2层之间的数据进行关联。
然后我们继续创建ViewModel层
这个ViewModel层需要继承INotifyPropertyChanged接口，这样这个类中的某个属性值发生变化，我们会接到通知。

public class SongViewModel : INotifyPropertyChanged{    private Song _song;    public Song Song    {        get { return _song; }        set { _song = value; }    }    public string ArtistName    {        get { return Song.ArtistName; }        set        {            if (Song.ArtistName != value)            {                Song.ArtistName = value;                RaisePropertyChanged("ArtistName");            }        }    }    public string SongTitle    {        get { return Song.SongTitle; }        set        {            if (Song.SongTitle != value)            {                Song.SongTitle = value;                RaisePropertyChanged("SongTitle");            }        }    }    public event PropertyChangedEventHandler PropertyChanged;    private void RaisePropertyChanged(string propertyName)    {        PropertyChangedEventHandler handler = PropertyChanged;        if (handler != null)        {            handler(this, new PropertyChangedEventArgs(propertyName));        }    }}

上面的代码中，首先检查属性的值是否真的发生变化if (Song.SongTitle != value)，这样做可以在复杂的项目中，稍微提升一下性能，如果属性发生变化了，会引发PropertyChanged事件。

现在Model，ViewModel都已经完成，只差View了。MainWindow.xaml文件如下

<Window x:Class="WVVM.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:WVVM"        mc:Ignorable="d"        Title="MainWindow" Height="201.288" Width="380.794">    <Window.DataContext>        <local:SongViewModel></local:SongViewModel>    </Window.DataContext>    <Grid>        <Grid.RowDefinitions>            <RowDefinition Height="Auto"></RowDefinition>            <RowDefinition Height="Auto"></RowDefinition>            <RowDefinition Height="Auto"></RowDefinition>        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="Auto"></ColumnDefinition>            <ColumnDefinition Width="Auto"></ColumnDefinition>        </Grid.ColumnDefinitions>        <Label Grid.Column="0" Grid.Row="0" Content="SongTitle"></Label>        <Label Grid.Column="0" Grid.Row="1" Content="Artist:"></Label>        <Label Grid.Column="1" Grid.Row="1" Content="{Binding ArtistName}"></Label>        <Label Grid.Column="1" Grid.Row="0" Content="{Binding SongTitle}"></Label>        <Button Grid.Column="0" Grid.Row="2" Name="BtUpdate" Content="Update" Click="BtUpdate_OnClick"></Button>    </Grid></Window>

xaml文件中，Button按钮有一个click事件，在这个事件中更新了viewMode的属性。

CS文件代码如下

    private SongViewModel _viewModel;    public MainWindow()    {        InitializeComponent();        _viewModel = (SongViewModel) base.DataContext;    }    private void BtUpdate_OnClick(object sender, RoutedEventArgs e)    {        _viewModel.ArtistName = "Adele";        _viewModel.SongTitle = "Hello";    }

像上文那样直接在GUI文件中绑定事件（Button的click事件），存在很多问题，WPF提供了一个更好的方法那就是ICommand。许多控件都有Command属性，它的绑定和Content，ItemSource的绑定方式相同。
继承ICommand需要实现2个方法：bool CanExecute（用于判断是否能够执行）和void Execute（在这里写你需要的代码，如更改SongTitle等）。

我建立了一个RelayCommand类来实现ICommand接口，代码如下

 public class RelayCommand :ICommand    {        private readonly Func<Boolean> _canExecute;        private readonly Action _execute;        public RelayCommand(Action execute) : this(execute,null)        {        }        public RelayCommand(Action execute, Func<Boolean> canExecute)        {            if(execute == null)                throw new ArgumentNullException("execute");            _execute = execute;            _canExecute = canExecute;        }        public event EventHandler CanExecuteChanged        {            add            {                if (_canExecute != null)                    CommandManager.RequerySuggested += value;            }            remove            {                if (_canExecute != null)                    CommandManager.RequerySuggested -= value;            }        }        [DebuggerStepThrough]        public Boolean CanExecute(Object parameter)        {            return _canExecute == null ? true : _canExecute();        }        public void Execute(Object parameter)        {            _execute();        }    }

相应的，在SongViewModel类中，增加如下代码

        void UpdateSongExecute()        {            //在这里执行更新数据的操作            ArtistName = "One Direction";            SongTitle = "Taken";        }        bool CanUpdateSongExecute()        {            //在这里检查是否可以更新数据，我直接返回true了            return true;        }        public ICommand UpdateSong        {            get { return new RelayCommand(UpdateSongExecute,CanUpdateSongExecute);}        }

此时，MainWindow.xaml文件中的Button，就不需要写click事件了，只需绑定Command即可

 <Button Grid.Column="0" Grid.Row="2" Name="BtUpdate" Content="Update" Command="{Binding UpdateSong}"></Button>