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

本文说说ViewModel的这个INotifyPropertyChanged接口可以用来做啥？

 

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

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

 <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> 

 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接口可以神奇的实现它们之间的解耦。

 <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> 

 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 } 

按需加载：

 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对象。

 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 } 

 <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}" 
21  ItemsSource="{Binding Children}"
22  >
23  <StackPanel Orientation="Horizontal">
24  <Image Width="16" Height="16" 
25  Margin="3,0" Source="Images"Region.png" />
26  <TextBlock Text="{Binding RegionName}" />
27  </StackPanel>
28  </HierarchicalDataTemplate>
29 
30  <HierarchicalDataTemplate 
31  DataType="{x:Type local:StateViewModel}" 
32  ItemsSource="{Binding Children}"
33  >
34  <StackPanel Orientation="Horizontal">
35  <Image Width="16" Height="16" 
36  Margin="3,0" Source="Images"State.png" />
37  <TextBlock Text="{Binding StateName}" />
38  </StackPanel>
39  </HierarchicalDataTemplate>
40 
41  <DataTemplate DataType="{x:Type local:CityViewModel}">
42  <StackPanel Orientation="Horizontal">
43  <Image Width="16" Height="16" 
44  Margin="3,0" Source="Images"City.png" />
45  <TextBlock Text="{Binding CityName}" />
46  </StackPanel>
47  </DataTemplate>
48  </TreeView.Resources>
49  </TreeView> 

未完待续。