WPF/MVVM Quick Start Tutorial

来源：http://www.codeproject.com/Articles/165368/WPF-MVVM-Quick-Start-Tutorial?msg=4486786#xx4486786xx，对关键的地方进行了翻译。

 

基本点：

1、WPF最重要的事情是数据绑定（data binding）。简而言之，有一些数据（通常情况下是某种排序的集合)，你希望能够展示给用户。你可以把数据绑定到xaml上。

2、WPF有两个部分，xaml和后台代码，其中xaml描述了GUI的布局(layout)和效果(effects)。

3、采用'MVVM'模式可以最整洁优雅，最大限度地复用代码，M指的是Model，V指的是View，VM指的是ViewModel。MVVM的目标是保证View包含最少的（或没有）代码，并且View应该仅仅是XAML。

 

应该知道的关键点：

1、承载数据的集合不应该采用列表或字典，应该采用ObservableCollection<>。 Observable的意思是WPF窗体需要能够“观察”数据集合。这个集合类实现WPF能够使用的特定的接口。

2、每一个WPF控件（包括窗体）有一个"DataContext"，每一个集合控件有一个“ItemsSource”属性（attribute）可以用来绑定。

3、“INotifyPropertyChanged”接口可以用于在GUI和代码之间通信数据的任何变化。

 

例子一：

一个简单的song类：

 

在WPF技术中，这个是Model。GUI是View。通过ViewModel，数据在Model和View之间绑定。可以这么理解，ViewModel是一个适配器(adapter)，将Model转变为WPF框架可以使用的一些东西。

 

song类是引用类型。创建SongViewModel类，我们需要首先考虑我们准备显示什么？假设，我们仅仅关心音乐的艺术家名称，而不是音乐的名字，那么SongViewModel应该这么定义：

public class SongViewModel
{
    Song _song;

        public Song Song
        {
            get
            {
                return _song;
            }
            set
            {
                _song = value;
            }
        }

        public string ArtistName
        {
            get { return Song.ArtistName; }
            set { Song.ArtistName = value; }
        }
}

 

我们希望：

即后台代码变化了，gui也会变化，反之亦然。

 

注：view的编写方式有两种：

1、XAML：

2、XAML的后台cs：

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

<Window x:Class="Example1.MainWindow"
        xmlns:local="clr-namespace:Example1">
    <!--  no data context -->
</Window>

 

运行结果：

期望：点击button的时候，artist的名字发生变化，即Unkonn-->Elvis。

但是并没有变化，因为我们没有完整实现数据绑定。

 

绑定SongViewModel的ArtistName属性(property)，如下（XAML文件中）：

  <Label Content="{Binding ArtistName}" />

 

“Bingding”绑定了控件（本例中的label）的内容和DataContext返回的对象的“ArtistName”属性（property）。本例，DataContext被赋成了SongViewModel的一个实例（instance），所以实际上GUI显示的是该实例的“ArtistName”属性（property）。

 

再一次点击button，仍旧没有改变任何事情，因为我们还是没有完全实现数据绑定。GUI没有接收到关于属性已经变化的任何通知。

 

例子二：

为了解决上面的问题，要采用INotifyPropertyChanged接口。如果一个类实现了这个接口，当属性（property）发生变化的时候，这个类就会通知所有的listeners。修改SongViewModel类如下：

public class SongViewModel : INotifyPropertyChanged
    {
        #region Construction
        /// Constructs the default instance of a SongViewModel
        public SongViewModel()
        {
            _song = new Song { ArtistName = "Unknown", SongTitle = "Unknown" };
        }
        #endregion

        #region Members
        Song _song;
        #endregion

        #region Properties
        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");
                }
            }
        }
        #endregion

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        #region Methods

        private void RaisePropertyChanged(string propertyName)
        {
            // take a copy to prevent thread issues
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }

 

现在我们需要验证这个确实可以工作，编写View：

<Window x:Class="Example2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Example2"
        Title="Example 2"  SizeToContent="WidthAndHeight" ResizeMode="NoResize"
        Height="350" Width="525">
    <Window.DataContext>
        <!-- Declaratively create an instance of our SongViewModel -->
        <local:SongViewModel />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Content="Example 2 - this works!" />
        <Label Grid.Column="0" Grid.Row="1" Content="Artist:  " />
        <Label Grid.Column="1" Grid.Row="1" Content="{Binding ArtistName}" />
        <Button Grid.Column="1" Grid.Row="2" Name="ButtonUpdateArtist"
        Content="Update Artist Name" Click="ButtonUpdateArtist_Click" />
    </Grid></Window>

点击按钮，一切正常。

 

但是这不应该是我们使用WPF的方式：首先，我们在xaml的后台直接添加了“更新艺术家”逻辑，这个逻辑不应该在这里显示。其次，如果我们把在button的点击事件的后台逻辑放到其它控件事件里，则需要在不同的位置剪切赋值和编辑。

 

例子三：

直接绑定到GUI的事件是有问题的。WFP提供了一种更好的方式。那就是ICommand。许多控件都有命令属性（attribute）。这些属性的绑定方式与Context和ItemsSource相同，只是命令属性需要绑定到一个返回ICommand的属性（property）上。

ICommand需要使用人员定义两个方法：bool CanExecute和void Execute。CanExecute方法实际上仅仅是告诉使用者，我是否能够执行这个命令。比如，button绑定了一个命令，只有一个列表的一项被选中时，这个命令才可以运行，那么你就可以在CanExcute方法里实现逻辑。

 

本例中的RelayCommand类包含所有重复的代码（即只要用这种命令绑定就可调用的代码），代码如下：

public class RelayCommand : ICommand
    {
        #region Members
        readonly Func<Boolean> _canExecute;
        readonly Action _execute;
        #endregion

        #region Constructors
        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;
        }
        #endregion

        #region ICommand Members
        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();
        }
        #endregion
    }

 

SongViewModel相比之前增加的代码：

#region Commands
        void UpdateArtistNameExecute()
        {
            ++_count;
            ArtistName = string.Format("Elvis ({0})", _count);
        }

        bool CanUpdateArtistNameExecute()
        {
            return true;
        }

        public ICommand UpdateArtistName { get { return new RelayCommand(UpdateArtistNameExecute, CanUpdateArtistNameExecute); } }
        #endregion

 

页面绑定代码：

<Window x:Class="Example3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Example3"
        Title="Example 3" Height="350" Width="525" SizeToContent="WidthAndHeight" ResizeMode="NoResize">
    <Window.DataContext>
        <!-- Declaratively create an instance of our SongViewModel -->
        <local:SongViewModel />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Menu Grid.Row="0" Grid.ColumnSpan="3">
            <MenuItem Header="Test">
                <MenuItem Header="Update Artist" Command="{Binding UpdateArtistName}" />
            </MenuItem>
        </Menu>
        <Label Grid.Column="0" Grid.Row="1" Content="Example 3 - using ICommand!" />
        <Label Grid.Column="0" Grid.Row="2" Content="Artist:  " />
        <Label Grid.Column="1" Grid.Row="2" Content="{Binding ArtistName}" />
        <Button Grid.Column="1" Grid.Row="3" Name="ButtonUpdateArtist" Content="Update Artist Name" Command="{Binding UpdateArtistName}" />
    </Grid>
</Window>

 

在这个例子中menu控件和button控件的命令属性都进行了绑定。

 

例子4：

到现在为止，你可能意识到了上面的很多东西都是重复的代码：raise INotifyPropertyChanged接口以及create command。这些非常样板化，对于INotifyPropertyChanged接口，我们也可以把它移到基类（我们叫它ObservableObject）。对于RelayCommand类，我们刚刚将它放到了我们自己的.NET库里。

例子4是把这些内容移到了一个.NET类库里用于复用。

 

例子5：

为了在View里（比如XAML）显示数据集合，需要使用ObservableCollection。在这个例子中，我们创建AlbumViewModel，这是一个专辑VM。

你的初次尝试可能是这样的：

class AlbumViewModel
    {
        #region Members
        ObservableCollection<Song> _songs = new ObservableCollection<Song>();
        #endregion
    }

 

本例中页面的DataContext绑定AlbumViewModel，有一个list控件的ItemSource绑定这个VM的Songs。另外还有更多的ICommands，将他们绑定给一些buttons。

在这个例子中，点击“Add Artist”运行正常。但是如果点击“Update Artist Names”，失败。为了解决这个问题，需要使用SongViewModel。

 

例子6：

最后，我们修改AlbumViewModel包含SongViewModel的ObservableCollection，如下：

class AlbumViewModel
{
    #region Members
    ObservableCollection<SongViewModel> _songs = new ObservableCollection<SongViewModel>();
    #endregion
    //  code elided for brevity
}

 

XAML的后台代码是完全空的！

 

需要注意的是，如果你在XAML中宣称你的ViewModel，不可以传递任何参数；换句话说，你的ViewModel必须有一个隐式的或显式的默认构造函数。那么如何添加为你的ViewModel添加状态呢？你会发现在Code-behind中宣称ViewModel可以传递构造参数。