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这个东西了。