杂七杂八汇聚

汇聚各种工作上生活上用到的一些代码片段和知识整理

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

设定两个属性 ComboBoxItemsComboBoxSelectedItem,分别存放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这个东西了。

阅读更多
文章标签: UWP x-Bind ComboBox
个人分类: UWP
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭