关闭

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

标签: UWPx-BindComboBox
162人阅读 评论(0) 收藏 举报
分类:

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

2
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

【UWP通用应用开发】集合控件与数据绑定

为ListView和GridView添加数据ListView采用垂直堆叠得方式显示数据,而GridView则采用水平堆叠得方式。长相的话嘛,它们都差不多。 <ListView ...
  • NoMasp
  • NoMasp
  • 2015-12-13 11:24
  • 4274

win10 uwp 随着数字变化颜色控件

我朋友在做一个控件,是显示异常,那么异常多就变为颜色,大概就是下面的图点击数字,颜色变化和数字大小是相同
  • lindexi_gd
  • lindexi_gd
  • 2016-09-01 10:42
  • 2389

ComboBox绑定数据源时触发SelectedIndexChanged事件的处理办法

转载;http://hi.baidu.com/haoyun2012/item/d780ca157a29b239b9318080 感谢原作者 ComboBox最经常使用的事件就是SelectedI...
  • kongwei521
  • kongwei521
  • 2013-03-13 12:08
  • 1787

WPF 中双向绑定通知机制之ObservableCollection使用

msdn中   ObservableCollection 类    表示一个动态数据集合,在添加项、移除项或刷新整个列表时,此集合将提供通知。 在许多情况下,所使用的数据是对象的集合。 例如,数...
  • AAA123524457
  • AAA123524457
  • 2015-07-15 11:06
  • 780

UWP入门(十二)--数据绑定用法

主要几个元素: Template DataTemplate ItemSource 数据绑定是一个数据提取的方法,能使数据和UI上的控件紧密相连,下面的Demo是这样的: 有许多书的集合,书 类中...
  • u011033906
  • u011033906
  • 2017-03-23 23:42
  • 1664

UWP入门(八)--几个简单的控件

每天看几个,要不聊几天我就可以看完啦,加油!看效果1. CheckBox <StackPanel Grid.Column="1" M...
  • u011033906
  • u011033906
  • 2017-03-22 18:40
  • 1484

C# WinForm 中ComboBox数据绑定的问题

C# WinForm 中ComboBox数据绑定的问题 怎样让WinForm中的ComboBox显示表中的一个字段,同时又绑定另一个字段?   在Web中的ComboBox这样写可以绑定两个值: ...
  • Chen_xiaobao
  • Chen_xiaobao
  • 2017-02-15 16:02
  • 2475

JQueryEasyUI框架下的combobox的取值和绑定——善良公社

对于最近的使用中,给我的感觉就是,借用官网JqueryEasyUI上的一句话,EasyUI是基于JQuery用户界面插件的集合,我把它理解成一种插件,不知道有没有问题。而使用easyui,不需要写很多...
  • dandanzmc
  • dandanzmc
  • 2013-11-20 20:35
  • 23538

关于Polymer的双向绑定的实现的探究(更新中)

探究polymer的双向绑定和单向绑定的实现个人github:https://github.com/lufei222/PolymerElementsps:这个github项目是我fork的,在原有的基...
  • u011456337
  • u011456337
  • 2016-04-14 01:46
  • 1076

DataGridView中comboBox数据绑定的问题

 很多时候我们都需要使用DataGridView来做数据的显示,DataGridView是一个很方便的工具,他可以让用户直接在控件里面做数据的修改,还可以实现单表的更新,操作起来很方便。但是如果...
  • Sara_xie
  • Sara_xie
  • 2015-04-30 14:02
  • 1600
    个人资料
    • 访问:21367次
    • 积分:297
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:8篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论