[Silverlight入门系列]使用MVVM模式(7)：ViewModel的INotifyPropertyChanged接口实现

上一篇说到《Model的INotifyPropertyChanged接口实现》和在Prism中有《NotificationObject自动实现INotifyPropertyChanged接口》，很好，本文说说ViewModel的这个INotifyPropertyChanged接口可以用来做啥？

 

举例1：我有个TabControl，里面放了很多View，每个由ViewModel控制，我想是想TabSelectionChanged就打开相应的ViewModel，怎么做？

解答：用ViewModel的INotifyPropertyChanged接口实现，因为TabItem作为一个选择器就有 IsSelected属性，把这个属性绑定到ViewModel的IsSelected字段，然后这个字段改变的时候用INotifyPropertyChanged接口实现通知即可。整个流程用MVVM实现非常整洁。

Xaml

1 <TabControl ...> 2 <TabControl.ItemContainerStyle> 3 <Style TargetType="{x:Type TabItem}"> 4 <Setter Property="IsSelected" 5 Value="{Binding Path=IsSelected,Mode=TwoWay}"/> 6 </Style> 7 </TabControl.ItemContainerStyle> 8 </TabControl>

ViewModel

1 public class MyViewModel : INotifyPropertyChanged 2 { 3 private bool _isLoaded; 4 5 private void Load() 6 { 7 // code 8 } 9 10 private bool _isSelected; 11 12 public bool IsSelected 13 { 14 get 15 { 16 return this ._isSelected; 17 } 18 set 19 { 20 if (this._isSelected != value) 21 { 22 this._isSelected = value; 23 24 if (this._isSelected && !this ._isLoaded) 25 { 26 this .Load(); 27 this._isLoaded = true ; 28 } 29 30 var propertyChanged = this .PropertyChanged; 31 if (propertyChanged != null ) 32 { 33 propertyChanged(this, new PropertyChangedEventArgs("IsSelected" )); 34 } 35 } 36 } 37 } 38 39 public event PropertyChangedEventHandler PropertyChanged; 40 }

 

举例2：我有个TreeView，里面的项非常复杂，还需要惰性加载（点击了才取数据并展开），怎么用MVVM实现？彻底晕了

解答：还是用ViewModel的INotifyPropertyChanged接口实现，要使得你的视图没有代码，就要你不再把TreeView当成一个存储数据的地方，而是看做一个展现数据的地方，那么一切都将水到渠成。这就是ViewModel这个想法的由来。而用INotifyPropertyChanged接口可以神奇的实现它们之间的解耦。

Xaml

1 <TreeView ItemsSource="{Binding FirstGeneration}"> 2 <TreeView.ItemContainerStyle> 3 <!-- 4 This Style binds a TreeViewItem to a PersonViewModel. 5 --> 6 <Style TargetType="{x:Type TreeViewItem}"> 7 <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> 8 <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> 9 <Setter Property="FontWeight" Value="Normal" /> 10 <Style.Triggers> 11 <Trigger Property="IsSelected" Value="True"> 12 <Setter Property="FontWeight" Value="Bold" /> 13 </Trigger> 14 </Style.Triggers> 15 </Style> 16 </TreeView.ItemContainerStyle> 17 18 <TreeView.ItemTemplate> 19 <HierarchicalDataTemplate ItemsSource="{Binding Children}"> 20 <TextBlock Text="{Binding Name}" /> 21 </HierarchicalDataTemplate> 22 </TreeView.ItemTemplate> 23 </TreeView>

ViewModel

1 public class PersonViewModel 2 { 3 public PersonViewModel(Person person) 4 : this(person, null ) 5 { 6 } 7 8 private PersonViewModel(Person person, PersonViewModel parent) 9 { 10 _person = person; 11 _parent = parent; 12 13 _children = new ReadOnlyCollection<PersonViewModel> ( 14 (from child in _person.Children 15 select new PersonViewModel(child, this )) 16 .ToList<PersonViewModel> ()); 17 } 18 19 private bool _isSelected; 20 public bool IsSelected 21 { 22 get { return _isSelected; } 23 set 24 { 25 if (value != _isSelected) 26 { 27 _isSelected = value; 28 this.OnPropertyChanged("IsSelected" ); 29 } 30 } 31 } 32 33 private bool _isExpanded; 34 public bool IsExpanded 35 { 36 get { return _isExpanded; } 37 set 38 { 39 if (value != _isExpanded) 40 { 41 _isExpanded = value; 42 this.OnPropertyChanged("IsExpanded" ); 43 } 44 45 // Expand all the way up to the root. 46 if (_isExpanded && _parent != null ) 47 _parent.IsExpanded = true ; 48 } 49 } 50 public string Name 51 { 52 get { return _person.Name; } 53 } 54 } 55 public class Person 56 { 57 readonly List<Person> _children = new List<Person> (); 58 public IList<Person> Children 59 { 60 get { return _children; } 61 } 62 63 public string Name { get; set ; } 64 }

按需加载：

View Code

1 interface ITreeViewItemViewModel : INotifyPropertyChanged 2 { 3 ObservableCollection<TreeViewItemViewModel> Children { get ; } 4 bool HasDummyChild { get ; } 5 bool IsExpanded { get; set ; } 6 bool IsSelected { get; set ; } 7 TreeViewItemViewModel Parent { get ; } 8 } 9 public TreeViewItemViewModel : ITreeViewItemViewModel 10 { 11 protected TreeViewItemViewModel(TreeViewItemViewModel parent, bool lazyLoadChildren) 12 { 13 _parent = parent; 14 15 _children = new ObservableCollection<TreeViewItemViewModel> (); 16 17 if (lazyLoadChildren) 18 _children.Add(DummyChild); 19 } 20 public bool IsExpanded 21 { 22 get { return _isExpanded; } 23 set 24 { 25 if (value != _isExpanded) 26 { 27 _isExpanded = value; 28 this.OnPropertyChanged("IsExpanded" ); 29 } 30 31 // Expand all the way up to the root. 32 if (_isExpanded && _parent != null ) 33 _parent.IsExpanded = true ; 34 35 // Lazy load the child items, if necessary. 36 if (this .HasDummyChild) 37 { 38 this .Children.Remove(DummyChild); 39 this .LoadChildren(); 40 } 41 } 42 } 43 44 /// <summary> 45 /// Returns true if this object's Children have not yet been populated. 46 /// </summary> 47 public bool HasDummyChild 48 { 49 get { return this.Children.Count == 1 && this.Children[0] == DummyChild; } 50 } 51 52 /// <summary> 53 /// Invoked when the child items need to be loaded on demand. 54 /// Subclasses can override this to populate the Children collection. 55 /// </summary> 56 protected virtual void LoadChildren() 57 { 58 } 59 }

真正加载子项的工作留给子类去实现。它们重载LoadChildren方法来提供一个跟类型相关的加载子项的实现。比如下面的RegionViewModel类，它重载了该方法来加载State对象并且创建StateViewModel对象。

View Code

1 public class RegionViewModel : TreeViewItemViewModel 2 { 3 readonly Region _region; 4 5 public RegionViewModel(Region region) 6 : base(null, true ) 7 { 8 _region = region; 9 } 10 11 public string RegionName 12 { 13 get { return _region.RegionName; } 14 } 15 16 protected override void LoadChildren() 17 { 18 foreach (State state in Database.GetStates(_region)) 19 base.Children.Add(new StateViewModel(state, this )); 20 } 21 }

Xaml

1 <TreeView ItemsSource="{Binding Regions}"> 2 <TreeView.ItemContainerStyle> 3 <!-- 4 This Style binds a TreeViewItem to a TreeViewItemViewModel. 5 --> 6 <Style TargetType="{x:Type TreeViewItem}"> 7 <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> 8 <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> 9 <Setter Property="FontWeight" Value="Normal" /> 10 <Style.Triggers> 11 <Trigger Property="IsSelected" Value="True"> 12 <Setter Property="FontWeight" Value="Bold" /> 13 </Trigger> 14 </Style.Triggers> 15 </Style> 16 </TreeView.ItemContainerStyle> 17 18 <TreeView.Resources> 19 < HierarchicalDataTemplate 20 DataType="{x:Type local:RegionViewModel}