【MVVM Dev】ComboBox嵌入CheckBox的显示问题

一、前言

在ComboBox中嵌入若干个CheckBox时,当我们勾选一些CheckBox,ComboBox会显示相应的勾选项。

例如:CheckBox项有A,B,C   那么勾选这三项,ComboBox会显示A,B,C

但有时候我们会发现,点击CheckBox时,ComboBox会出现对象的名称,而不是我们想要的text

例如:CheckBox有三项A,B,C 它们的类型都是XModel类型,Text分别为A,B,C。 有时候ComboBox会显示成"XModel"

为了解决这个问题,网上有这么几个方法,大多是重写ComboBox:

1. https://www.codeproject.com/articles/563862/multi-select-combobox-in-wpf

2. http://blog.sina.com.cn/s/blog_7f83849b010164yp.html

但是这些方法太麻烦

二、示例

View部分:

 <ComboBox Grid.Row="2"            Grid.Column="1"
           Margin="0"
           x:Name="checkedComboBox"
           IsEditable="True"
           IsReadOnly="True"
           ItemsSource="{Binding ModelTypes}"
           Text="{Binding Text,Mode=OneWay}"
           VerticalAlignment="Bottom" >
        <ComboBox.ItemTemplate>
             <DataTemplate DataType="{x:Type projectSetting:ModelType}">
                  <CheckBox Content="{Binding Name}"
                            IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
             </DataTemplate>
        </ComboBox.ItemTemplate>
</ComboBox>

View的后台部分:

 checkedComboBox.DropDownClosed += CheckedComboBox_DropDownClosed;

  private void CheckedComboBox_DropDownClosed(object sender, System.EventArgs e)
  {
     BSViewModel vm = DataContext as BSViewModel;
     vm.UpdateText();
  }

ViewModel部分:

  public void UpdateText()
  {
        switch (CheckedRootModelTypes.Count)
        {
                case 0:
                    Text = "<无>";
                    break;
                case 1:
                    Text = CheckedRootModelTypes.First().Name;
                    break;
                default:
                    Text = string.Join(";",
                        CheckedRootModelTypes.Select(x => x.Name).ToArray());
                    break;
         }

        RaisePropertyChanged(() => Text);
  }

也就是说在ComboBox的DropDownClose中实现viewmodel中的Text刷新操作即可。

时间: 2024-08-28 21:49:47

【MVVM Dev】ComboBox嵌入CheckBox的显示问题的相关文章

多个 label checkbox 组合 显示在同一个水平线上[前提Bootstrap框架]

<th align="left" valign="middle"> <label class="checkbox inline font-size"> <input type="checkbox" id="goods_server_name" name="goods_server_name[]" value=" 假一赔十 "> 假一

【MVVM DEV】DataColumn中的TextBox与ComboBox的并存

一.前言       在WPF编程中,有时候我们使用DataGrid会需要在一个DataColumn中既有TextBox,也要有ComboBox或者TextBlock等其他数据显示样式. 这个时候我们就需要DataGridTemplateColumn去自定义我们的Column样式,通过数据类型去判断该信息是以TextBox显示还是以ComboBox来显示. PS:初入WPF-MVVM模式编程的童鞋可以先了解一下what is MVVM 二.从数据库出发       所谓兵马未到,粮草先行.数据库

easyui combobox with checkbox item

$('#cc').combobox({ url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', panelHeight:'auto', multiple:true, formatter: function (row) { var opts = $(this).combobox('options'); return '<input type="checkbox" class="

ztree的CheckBox不显示问题解决办法

问题: 在使用ztree插件时需要设置 zTree 的节点上是否显示 checkbox / radio,但设置后不显示复选框/单选框,如下图所示 设置方法: var setting = { check: { enable: true, //true / false 分别表示 显示 / 不显示 复选框或单选框 autoCheckTrigger: true, //true / false 分别表示 触发 / 不触发 事件回调函数 chkStyle: "checkbox", //勾选框类型(

easyUI的combobox设置隐藏和显示

今天遇到一个需求,需要在combobox选择不同选项时,分别切换另一个控件为text或者combobox. 当时想了各种办法,想将combobx和text切换隐藏,但是都没得到自己想要的效果.最终还是在combobx上加了个div,用来控制div的显示和隐藏,打到自己想要的效果. 不过需要注意的是:当切换到text或其他非combobox时,将combobox的值要设置为空. 如下图所示: 原始状态: 切换为text时效果如图: 切换到combobox时,效果如图: 下面贴出控件显示的代码 <!

extjs 4.0 combobox 下拉文本显示自动变宽

1 items: { 2 xtype: 'combobox', 3 displayField: 'name', 4 labelAlign: 'right', 5 valueField: 'num', 6 matchFieldWidth:false,//默认是true,改成false下拉内容就自动变宽显示在一行了 7 value: 'all', 8 queryMode: 'local', 9 store: 10 new Ext.data.Store({ 11 fields: ['name', 'n

easyui combobox 带 checkbox 亲自验证

$('#cc').combobox({                url:'combobox_data1.json',                method:'get',                valueField:'id',                textField:'text',                panelHeight:'auto',                multiple:true,                formatter: fun

checkbox不显示,试试去掉-webkit-appearance这个样式

目前在项目中发现一个大坑,搞的我找了好久不知道因为什么,自用的reset.css中加入了 -webkit-appearance: none;其他所有表单没有出现问题,但checkbox会不显示,值改为checkbox或去掉该样式之后问题解决,不知道是否为浏览器更新之后出现的bug,因为以前并没有出现过类似问题. chrome 68.0.3440.106(正式版本) 说明: 改变按钮和其他控件的外观,使其类似于原生控件. -webkit-appearance 是一个 不规范的属性(unsuppor

【MVVM Dev】PART_Editor的使用

一.前言       在日常的界面开发中,我们大多使用MVVM模式进行开发.通常情况下,一个PropertyGridControl或者DataGrid的ItemsSource设置好, 然后每一列绑定好某一条ItemsSource中的某一个字段就可以跑起来了. 但是也有另一种情况: 假设一个界面Temp.xaml,它的ViewModel为TempViewModel.cs: 有一个PropertyGridControl的ItemsSource以ObservableCollection<Model>