UWP下用x:Bind双向绑定ComboBox的SelectedItem

Code-Behind

构造ComboBoxItem类

ComboBox一般有两个内容，一个是值Value，一个是显示的Text，所有构造一个类，具有这两个属性

    public class ComboBoxItem
    {
        public string Value { get; set; }
        public string Text { get; set; }
        public ComboBoxItem(string Value, string Text)
        {
            this.Value = Value;
            this.Text = Text;
        }
    }

MVVM相关

设定两个属性 ComboBoxItems和ComboBoxSelectedItem，分别存放ComboBox的Items集合和选定项

private ObservableCollection<ComboBoxItem> _ComboBoxItems = new ObservableCollection<ComboBoxItem>();
public ObservableCollection<ComboBoxItem> ComboBoxItems { get { return _ComboBoxItems; } set { Set(ref _ComboBoxItems, value); } }

private ComboBoxItem _ComboBoxSelectedItem = null;
public ComboBoxItem ComboBoxSelectedItem { get { return _ComboBoxSelectedItem; } set { Set(ref _ComboBoxSelectedItem, value); } }

这里需要用到相关的帮助方法,实现属性通知

public event PropertyChangedEventHandler PropertyChanged;

private void Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
{
   if (Equals(storage, value))
   {
      return;
   }
   storage = value;
   OnPropertyChanged(propertyName);
}

private void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

同样，页面也要实现INotifyPropertyChanged继承

 public sealed partial class MainPage : Page, INotifyPropertyChanged

双向绑定

为了实现双向绑定，需要配备一个转换器Converter，因为在XAML中，SelectedItem是个object类型，而代码中的SelectedItem是个自定义ComboBoxItem类型，所以要有个转换，让界面上的变化传递到代码上的ComboBoxSelectedItem属性上,这个转换器是继承自IValueConverter接口，实现两个方法即可，这两个方法就是告诉页面和代码之间的转换规则。

public class ComboBoxItemConvert:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value as ComboBoxItem;
    }
}

至此后台代码部分都结束。

XAML

引入转换器

因为定义了转换器，转换器的类和页面的类不一样，要通过页面资源的方式引入进来

<Page
   ...
    xmlns:local="using:RaspberryPi3bPlatform.Views"
   ...>
    <Page.Resources>
        <local:ComboBoxItemConvert x:Key="ComboBoxItemConvert"/>
    </Page.Resources>

ComboBox

引入转换器后，使用x:Bind这个UWP提供的绑定方法进行绑定即可

<ComboBox 
   ItemsSource="{x:Bind ComboBoxItems}" 
   SelectedItem="{x:Bind ComboBoxSelectedItem,Mode=TwoWay,Converter={StaticResource ComboBoxItemConvert}}}"
   SelectedValuePath="Value"
   DisplayMemberPath="Text"/>

测试代码

可以在后台代码里面直接设定ComboBoxSelectedItem的值，但要注意，设定的值一定要是在ComboBoxItems中的元素，这样View才能做对比

public UdpServerPage()
{
  InitializeComponent();
  ComboBoxItems.Add(new ComboBoxItem("Value0", "Text0"));
  ComboBoxItems.Add(new ComboBoxItem("Value1", "Text1"));
  ComboBoxItems.Add(new ComboBoxItem("Value2", "Text2"));
  ComboBoxItems.Add(new ComboBoxItem("Value3", "Text3"));
  ComboBoxItems.Add(new ComboBoxItem("Value4", "Text4"));
  ComboBoxSelectedItem = ComboBoxItems.FirstOrDefault(f => f.Text == "Text1");
}

页面选定项改动，可以通过下个断点来查看

public void Watch()
{
   var item = this.ComboBoxSelectedItem;
   this.ComboBoxSelectedItem = ComboBoxItems.FirstOrDefault(f => f.Text == "Text3");
}

变通方法

写了Convert感觉代码乱乱的，还要添加页面资源，为了避免这个出现，可以直接用string类型绑定到ComboBox的SelectedValue或SelectedText上，这样就免了写Convert这个东西了。