你的位置:首页 > ASP.net教程

[ASP.net教程]WPF/MVVM快速指引


简介

最近微软推出了UWA,又是一波新的C#+xaml学习热。好多小伙伴都对MVVM感觉很好奇,但是有些地方也有点难以理解。特意写了这边文章,希望对你有帮助。

这边文章会很长,所以我会用几个例子的形式来展示一个小型MVVM框架的诞生以及怎样使用。所有的例子基于.net 4.0,使用的开发工具是Visual Studio Community 2013。

 

基础知识

1.对WPF而言最重要的一个点就是数据绑定(data binding)。简单来说,就是你有一堆数据,他们是一种类型的集合,你需要将它们展示给你的用户。所以你可以通过数据绑定的绑定到XAML上。

2.WPF的单个界面(也就是View,通常情况下以*Window或者*Page命名)由两部分组成,它们分别是XAML和CS格式的文件。XAML设计我们的界面和动画特效等,CS写我们的后台代码。

3.通常意义下MVVM是Model,View,ViewModel的缩写。而用这个的目的就是一个解耦的思想,也就是界面和业务逻辑的分离。当然理想状态下,我们是希望View中不要写代码的,所以我们尽量向View中没有代码这个目的靠近。

 

关键的3个点

1.必须使用ObservableCollection<T>来声明这个数据集合,不能使用ListT<T>或者Dictionary<TKey,TValue>。Observable意味着MVVM中的View可以观察你的集合对象。当我们数据集合变化时,界面会发生相应的变化。

2.针对于1中所描述的T,我们必须要实现一个INotifyPropertyChanged的接口,这样我们的属性改变时,才会通知界面。

3.每一个WPF中的控件都有一个DataContext属性,集合控件会有一个ItemSource的属性,这些属性都可以让我们去绑定数据。

 

好了,我假设你已经有了一个大致的印象了,那接下来我们开始我们的第一个例子。

 

 

Example 1:数据能够展示,但是无法更新

我们第一个例子会用一个Song的类,它看起来是下面代码这样的:

public class Song{  #region 字段  string _artistName;  string _songTitle;  #endregion  #region 属性  public string ArtistName  {    get { return _artistName; }    set { _artistName = value; }  }  public string SongTitle  {    get { return _songTitle; }    set { _songTitle = value; }  }  #endregion}

这就是我们MVVM中的Model,接下来我们需要考虑将数据绑定到我们的View上。所以接下来的重点就应该在ViewModel上,我希望能够将ArtisName展示到界面上,所以我把ViewModel命名为SongViewModel,它的代码看上去是这样的:

public class SongViewModel{  public SongViewModel()  {    _song = new Song() { ArtistName = "陈奕迅", SongTitle = "十年" };  }  #region 字段  Song _song;  #endregion  #region 属性  public Song song  {    get { return song; }    set { song = value; }  }  public string ArtistName  {    get { return _song.ArtistName; }    set { _song.ArtistName = value; }  }  #endregion}

接下来就是我们最神奇的地方了,我们要将ViewModel绑定到界面上。

我们可以通过将后台代码的方式来:

SongViewModel _viewModel;public MainWindow(){  InitializeComponent();  _viewModel = new SongViewModel();  base.DataContext = _viewModel;}

当然这是被允许的,但是我想强调的是更加声明式的方式。所以我决定把代码写在XAML里:

<Window x:Class="Example1.MainWindow"    ...    ="clr-namespace:Example1">  <Window.DataContext>    <local:SongViewModel/>  </Window.DataContext>  <StackPanel>    ...    <TextBlock Text="{Binding ArtistName}" Margin="0,20"/>     <Button Content="更新歌手" Click="Update_Click" Margin="20"/>    </StackPanel></Window>

我们声明了我们的SongViewModel,也在TextBlock中绑定了ArtistName的属性。同时写了一个更新的时间,看下我们的后台代码:

SongViewModel _viewModel;public MainWindow(){  InitializeComponent();  _viewModel = base.DataContext as SongViewModel;  //_viewModel = new SongViewModel();  //base.DataContext = _viewModel;}private void Update_Click(object sender, RoutedEventArgs e){  //界面不会更新  _viewModel.ArtistName = "中孝介";}

我们可以试着跑一下,界面上很正常的显示了我们绑定的属性,但是我写的更新按钮却没有正常的工作。

好了我们第一个例子就结束了,下一个例子中能给我们解决更新的问题。

 

 

Example 2:解决1中的问题,实现INotifyPropertyChanged接口

在例子1中我们成功将数据绑定到了界面上,但是却无法更新,那是因为我们没有实现通知接口。好了,我们接下来给ViewModel实现这个接口。

public class SongViewModel : INotifyPropertyChanged{  public SongViewModel()  {    _song = new Song() { ArtistName = "陈奕迅", SongTitle = "十年" };  }  #region 字段  Song _song;  #endregion  #region 属性  public Song song  {    get { return song; }    set { song = value; }  }  public string ArtistName  {    get { return _song.ArtistName; }    set     {       _song.ArtistName = value;      RasisePropertyChanged("ArtistName");    }  }  #endregion  #region INotifyPropertyChanged属性  public event PropertyChangedEventHandler PropertyChanged;  #endregion  #region 方法  private void RasisePropertyChanged(string propertyName)  {    PropertyChangedEventHandler handler = PropertyChanged;    if(handler != null)    {      handler(this, new PropertyChangedEventArgs(propertyName));    }  }  #endregion}

我们再来运行一下我们的程序,然后点击更新按钮,如我们过预料的,它有效了。

到目前为止,似乎一切都工作起来了,但是这并不是我们使用MVVM的正确方式。正如我在开始说的,MVVM的目的是为了解耦,分离界面和业务逻辑,所以我们要尽可能的在View后台不写代码。但是这个例子中,我们将更新ViewModel的代码写在了View里,这是不对的,下一个例子中,我们要通过命令(Command)的来将Button的事件分离出来。

 

 

Example 3:更好的实现事件,通过命令的手段

WPF提供了一个很好的方式来解决事件绑定的问题--ICommand。很多控件都有Command属性(如果没有,我们可以将命令绑定到触发器上面,当然,这超出了这篇文章的篇幅)。接下来我们来先实现一个ICommand接口。

ICommand需要用户定义两个方法bool CanExecute和void Execute。第一个方法可以可以让我们来判断是否可以执行这个命令,第二个方法就是我们具体的命令。

public class RelayCommand : ICommand{  #region 字段  readonly Func<Boolean> _canExecute;  readonly Action _execute;  #endregion  #region 构造函数  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的成员  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}

我们再在我们的ViewModel中声明一个ICommand字段:

#region 命令void UpdateArtistNameExecute(){  this.ArtistName = "中孝介";}bool CanUpdateArtistNameExecute(){  return true;}public ICommand UpdateArtistName { get { return new RelayCommand(UpdateArtistNameExecute, CanUpdateArtistNameExecute); } }#endregion

最后,我们再将事件绑定上这个Command:

<Button Content="更新歌手" Margin="20" Command="{Binding UpdateArtistName}"/>

运行一下,嗯,我们成功将事件分离了出来。

好了,似乎目前为止我们已经很好的解决了所有的问题。我们的数据,事件都是绑定的,实现了界面的完美分离。嗯,但是我们考虑下,我们能否把MVVM提取出来作为一个框架,来去更好的解决问题。

 

 

Example 4:更好的解决问题,提取MVVM

在上一个例子中,我们已经解决了所有的问题了,这个例子中,我们将上面的写好的函数提取出来。

我把上面的函数提取为两个主要的文件:ObserableObject和RelayCommand,因为代码和上面的类似,所以不再贴出,可以直接去看源码。

 

Examle 5:使用ObservableCollection

前面我们都是使用单个的Song,接下来我们尝试使用多个Song。按照我们一开始所说的,我们需要一个ObservableCollection的集合。我们用一个新的ViewModel--AlbumViewModel:

public class AlbumViewModel{  #region 字段  ObservableCollection<Song> _songs = new ObservableCollection<Song>();  #endregion  #region 属性  public ObservableCollection<Song> songs  {    get { return _songs; }    set { _songs = value; }  }  #endregion  public AlbumViewModel()  {    _songs.Add(new Song() { ArtistName = "陈奕迅", SongTitle = "十年" });    _songs.Add(new Song() { ArtistName = "周杰伦", SongTitle = "发如雪" });    _songs.Add(new Song() { ArtistName = "蔡依林", SongTitle = "日不落" });  }  #region 命令  void AddAlbumArtistExecute()  {    _songs.Add(new Song { ArtistName = "阿桑", SongTitle = "一直很安静" });  }  bool CanAddAlbumArtistExecute()  {    return true;  }  void UpdateAlbumArtistsExecute()  {    foreach (var song in _songs)    {      song.ArtistName = "Unknow";    }  }  bool CanUpdateAlbumArtistsExecute()  {    return true;  }  public ICommand AddAlbumArtist { get { return new RelayCommand(AddAlbumArtistExecute, CanAddAlbumArtistExecute); } }  public ICommand UpdateAlbumArtists { get { return new RelayCommand(UpdateAlbumArtistsExecute, CanUpdateAlbumArtistsExecute); } }  #endregion

我们实现了两个命令,一个是新增歌手,一个是把所有集合里的SongTitle更改为Unknow。

然后我们把这个ViewModel绑定到界面上:

<Window x:Class="Example5.MainWindow"    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    ="http://schemas.microsoft.com/winfx/2006/xaml"    ="clr-namespace:Example5"    Title="Example4" Height="300" Width="300" ResizeMode="NoResize">  <Window.DataContext>    <local:AlbumViewModel/>  </Window.DataContext>  <StackPanel Orientation="Horizontal">    <ListView ItemsSource="{Binding songs}" Width="200">      <ListView.ItemTemplate>        <DataTemplate>          <StackPanel Orientation="Horizontal">            <Label Content="{Binding ArtistName}" />            <Label Content="{Binding SongTitle}" FontSize="10" />          </StackPanel>        </DataTemplate>      </ListView.ItemTemplate>    </ListView>    <StackPanel>      <Button Content="新增歌手" Height="40" Margin="20" Command="{Binding AddAlbumArtist}"/>      <Button Content="更新歌手" Height="40" Margin="20" Command="{Binding UpdateAlbumArtists}"/>    </StackPanel>      </StackPanel></Window>

当我们运行程序的时候,我们发现我们的新增功能是正常工作的,但是我们的更新功能却没有成功把字段更改为Unkown。

这是可以理解的。为什么?还记得开始我们说的T需要做的吗?因为我们并未有给Song实现INotifyChanged接口,它的属性变化是不会引起界面的变更的。那么我们需要给Song实现这个接口吗?我们通过这样做能实现功能,但是我们不推荐这么做。下一个例子中,我们将通过多加一个ViewModel来解决这个问题。

 

 

Example 6:两个ViewModel,解决Model属性改变问题

上个例子中,我们无法通过改变Model的属性来实现界面的更改。所以我们引入第二个ViewModel来解决问题。我们新建一个SongViewModel:

public class SongViewModel : ObservableObject{  public SongViewModel()  {    _song = new Song() { ArtistName = "Unknow", SongTitle = "Unknow" };  }  #region 字段  Song _song;  #endregion  #region 属性  public Song song  {    get { return song; }    set { song = value; }  }  public string ArtistName  {    get { return _song.ArtistName; }    set     {       _song.ArtistName = value;      RaisePropertyChanged("ArtistName");    }  }  public string SongTitle  {    get { return _song.SongTitle; }    set    {      _song.SongTitle = value;      RaisePropertyChanged("SongTitle");    }  }  #endregion}

然后我们用这个ViewModel来更改AlbumViewModel:

public class AlbumViewModel{  #region 字段  ObservableCollection<SongViewModel> _songs = new ObservableCollection<SongViewModel>();  #endregion  #region 属性  public ObservableCollection<SongViewModel> songs  {    get { return _songs; }    set { _songs = value; }  }  #endregion  public AlbumViewModel()  {    _songs.Add(new SongViewModel() { ArtistName = "陈奕迅", SongTitle = "十年" });    _songs.Add(new SongViewModel() { ArtistName = "周杰伦", SongTitle = "发如雪" });    _songs.Add(new SongViewModel() { ArtistName = "蔡依林", SongTitle = "日不落" });  }  #region 命令  void AddAlbumArtistExecute()  {    _songs.Add(new SongViewModel { ArtistName = "阿桑", SongTitle = "一直很安静" });  }  bool CanAddAlbumArtistExecute()  {    return true;  }  void UpdateAlbumArtistsExecute()  {    foreach (var song in _songs)    {      song.ArtistName = "Unknow";    }  }  bool CanUpdateAlbumArtistsExecute()  {    return true;  }  public ICommand AddAlbumArtist { get { return new RelayCommand(AddAlbumArtistExecute, CanAddAlbumArtistExecute); } }  public ICommand UpdateAlbumArtists { get { return new RelayCommand(UpdateAlbumArtistsExecute, CanUpdateAlbumArtistsExecute); } }  #endregion}

我们无需更改界面上任何绑定的东西,直接运行我们的程序,这样我们发现就能工作了。

到此为止,一个基本的MVVM模型就已经基本完成了。下一个例子我们演示如何在Command中传参数。

 

 

(扩展)Example 7:Command传参数

我们把上面例子中的更新歌手改为更新选中歌手。这样我们就需要只更改选中的歌手的值。我们需要更改界面上的绑定,来将选中的选作为传参传到Command:

<Button Content="更新选中歌手" Height="40" Margin="20" Command="{Binding UpdateAlbumArtists}" CommandParameter="{Binding ElementName=lv,Path=SelectedItem}"/>

然后修改我们的AlbumViewModel中的Command:

void UpdateAlbumArtistsExecute(SongViewModel song){  if(song == null) return;  song.ArtistName = "Unknow";}bool CanUpdateAlbumArtistsExecute(SongViewModel song){  return true;}public ICommand AddAlbumArtist { get { return new RelayCommand(AddAlbumArtistExecute, CanAddAlbumArtistExecute); } }public ICommand UpdateAlbumArtists { get { return new RelayCommand<SongViewModel>(new Action<SongViewModel>(UpdateAlbumArtistsExecute), new Predicate<SongViewModel>(CanUpdateAlbumArtistsExecute)); } }

 

这样我们很容易就实现了效果:

 

 

结束语:

本篇文章对MVVM的一些基本概念做了一些演示,但是还是有一些缺失,比如说控件没有Command属性时如何处理事件。只是希望能对初学者起到一定的帮助。

最后,感谢你能看到最后。

 

源代码下载:http://files.cnblogs.com/files/youngytj/WPFMVVMDemo.zip