前一篇介紹過簡單的單向處理,這一篇討論雙向繫結的情況。
雙向繫結處理,View Model 的變化也要反映到 UI
這個做法的第一步是要讓 PersonViewModel 能夠辨識自己是否有被選擇,所以我們加上一個 IsSelected 的屬性:
 public class PersonViewModel : NotifyPropertyBase
 {
     private int _age;
     public int Age
     {
         get { return _age; }
         set { SetProperty(ref _age, value); }
     }
     private string _name;
     public string Name
     {
         get { return _name; }
         set { SetProperty(ref _name, value); }
     }
     private string _city;
     public string City
     {
         get { return _city; }
         set { SetProperty(ref _city, value); }
     }
     private bool _isSelected;
     public bool IsSelected
     {
         get { return _isSelected; }
         set { SetProperty(ref _isSelected, value); }
     }
    
 }
這時候要讓 ListBoxItem 的 IsSelected 屬性繫結到 PersonViewModel 上的 IsSelected,所以在 XAML 上加上一個 ListBoxItem 的樣式設定:
 <ListBox.Resources >
     <Style TargetType="ListBoxItem" BasedOn="{StaticResource  {x:Type ListBoxItem}}">
         <Setter Property="IsSelected" Value="{Binding IsSelected}"/>
     </Style>
 </ListBox.Resources>
建立一個 ShowCommand 用於顯示被選擇的選項:
  private ICommand _showCommand;
  public ICommand ShowCommand
  {
      get
      {
          _showCommand = _showCommand ?? new RelayCommand((x) =>
          {
              var builder = new StringBuilder();
              foreach (var p in People.Where((y) => y.IsSelected))
              {
                  builder.AppendLine($"{p.Name} 是 {p.Age} 住在 {p.City}");
              }
              MessageBox.Show(builder.ToString());
          });
          return _showCommand;
      }
  }
為了測試雙向繫結,另外建立一個 ChangeCommand 來改變 index 0 資料的 IsSelected 屬性:
  private ICommand _changeCommand;
  public ICommand ChangeCommand
  {
      get
      {
          _changeCommand = _changeCommand ?? new RelayCommand((x) => People[0].IsSelected = !People[0].IsSelected);
          return _changeCommand;
      }
  }
完整範例請參考 ListBoxBindingSample002