带复选框的 WPF ComboBox 显示有关选中项目的信息？

Question

我正在尝试制作一个具有复选框作为项目的组合框，并根据选中的内容在组合框“关闭”时显示不同的内容。

我尝试实现的外观可以在图像中看到。

理想情况下，我不希望用户能够选择顶部的文本（在图像中）。

有没有简单的解决方案？我见过一些解决方案，其中通过使用 DataTriggers 隐藏不同的嵌套控件来显示所有项目时可以显示更多信息，但这并不是我真正想要的。

有什么想法吗？

/埃里克

Answer 1

这里有一种使用

ComboBox

实现大部分目标的方法，除了仍然可以选择文本（仅当

IsEditable

为 true 时，使用自定义文本才有效）。但它不可编辑，因为

IsReadOnly="true"

。

查看

<ComboBox
    IsEditable="True"
    IsReadOnly="True"
    ItemsSource="{Binding Items}"
    Text="{Binding Text}">
    <ComboBox.ItemTemplate>
        <DataTemplate
            DataType="{x:Type local:Item}">
            <CheckBox
                Content="{Binding Name}"
                IsChecked="{Binding IsChecked}" />
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

查看模型

// ObservableObject is a custom base class that implements INotifyPropertyChanged
internal class MainWindowVM : ObservableObject
{
    private ObservableCollection<Item> mItems;
    private HashSet<Item> mCheckedItems;

    public IEnumerable<Item> Items { get { return mItems; } }

    public string Text
    {
        get { return _text; }
        set { Set(ref _text, value); }
    }
    private string _text;

    public MainWindowVM()
    {
        mItems = new ObservableCollection<Item>();
        mCheckedItems = new HashSet<Item>();
        mItems.CollectionChanged += Items_CollectionChanged;

        // Adding test data
        for (int i = 0; i < 10; ++i)
        {
            mItems.Add(new Item(string.Format("Item {0}", i.ToString("00"))));
        }
    }

    private void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        if (e.OldItems != null)
        {
            foreach (Item item in e.OldItems)
            {
                item.PropertyChanged -= Item_PropertyChanged;
                mCheckedItems.Remove(item);
            }
        }
        if (e.NewItems != null)
        {
            foreach (Item item in e.NewItems)
            {
                item.PropertyChanged += Item_PropertyChanged;
                if (item.IsChecked) mCheckedItems.Add(item);
            }
        }
        UpdateText();
    }

    private void Item_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "IsChecked")
        {
            Item item = (Item)sender;
            if (item.IsChecked)
            {
                mCheckedItems.Add(item);
            }
            else
            {
                mCheckedItems.Remove(item);
            }
            UpdateText();
        }
    }

    private void UpdateText()
    {
        switch (mCheckedItems.Count)
        {
            case 0:
                Text = "<none>";
                break;
            case 1:
                Text = mCheckedItems.First().Name;
                break;
            default:
                Text = "<multiple>";
                break;
        }
    }
}

// Test item class
// Test item class
internal class Item : ObservableObject
{
    public string Name { get; private set; }

    public bool IsChecked
    {
        get { return _isChecked; }
        set { Set(ref _isChecked, value); }
    }
    private bool _isChecked;

    public Item(string name)
    {
        Name = name;
    }

    public override string ToString()
    {
        return Name;
    }
}

如果可选文本是一个问题，您可能需要创建自定义 ComboBox 控件模板（默认示例此处）。或者，您可以使用其他东西代替

ComboBox

，并使其看起来像

ComboBox

。

示例截图：

Answer 2

使用 @Erik83 和 @Xavier 解决方案的组合，我仍然遇到问题，在 CheckBox 文本右侧的位置选择 ComboBoxItem 会关闭 ComboBox-DropDown 并显示 ComboBoxItem 的 ToString() 值，因为 CheckBox 未拉伸到下拉宽度。我通过添加

解决了这个问题

水平内容对齐=“拉伸”

到复选框并添加 ItemContainerStyle：

<ComboBox x:Name="combobox"
    Background="White"
    Padding="2"
    Text="{Binding ElementName=DockPanelTemplateComboCheck, Path=ComboTextFilter}"
    IsEditable="True"
    IsReadOnly="True"
    HorizontalAlignment="Stretch"
    ItemsSource="{Binding ...}"
    IsDropDownOpen="{Binding Path=DropOpen, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, UpdateSourceTrigger=PropertyChanged}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <CheckBox IsChecked="{Binding IsChecked}" Content="{Binding Eintrag}" HorizontalContentAlignment="Stretch" Checked="CheckBox_Checked_Unchecked" Unchecked="CheckBox_Checked_Unchecked"/>
        </DataTemplate>
    </ComboBox.ItemTemplate>
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

隐藏代码：

    private string combotextfilter = "<No Selection>";

    public string ComboTextFilter
    {
        get { return combotextfilter; }
        set
        {
            if (value != null && value.IndexOf("ComboModel") != -1) return;
            combotextfilter = value;
            NotifyPropertyChanged(nameof(ComboTextFilter));
        }
    }

    private void CheckBox_Checked_Unchecked(object sender, RoutedEventArgs e)
    {
        switch (((ObservableCollection<ComboModel>)combobox.ItemsSource).Count(x => x.IsChecked))
        {
            case 0:
                ComboTextFilter = "<No Selection>";
                break;
            case 1:
                ComboTextFilter = ((ObservableCollection<ComboModel>)combobox.ItemsSource).Where(x => x.IsChecked).First().Eintrag;
                break;
            default:
                ComboTextFilter = ((ObservableCollection<ComboModel>)combobox.ItemsSource).Where(x => x.IsChecked).Select(x => x.Eintrag).Aggregate((i, j) => i + " | " + j);
                //ComboTextFilter = "<Multiple Selected>";
                break;
        }

        NotifyPropertyChanged(nameof(C_Foreground));
    }

    public bool DropOpen
    {
        get { return dropopen; }
        set { dropopen = value; NotifyPropertyChanged(nameof(ComboTextFilter)); }
    }
    private bool dropopen = false;

Answer 3

@Xaviers 的答案 99% 有效。但是，用户可能会意外选择一个复选框，然后该复选框的 ToString() 显示为所选文本。实际上这种情况可能发生很多。我还没有弄清楚为什么会发生这种情况，但我已经找到了一种方法来防止这种情况发生。

创建一个 bool 属性，绑定到组合框的 DropDownOpen 属性，当 DropDownOpen 更改为 false 时，意味着 DropDown 刚刚关闭，您可能会遇到上述问题。 因此，在这里您只需引发视图模型的 propertychanged 事件，并将绑定到组合框的 Text 属性的属性传递出去。

Answer 4

添加到所有其他答案中，如果您想在勾选复选框时避免意外选择值，您可以覆盖 ComboBoxItem 的模板，如下所示。这会删除原始的 ComboBoxItem 容器，只留下 CheckBox 容器，从而消除该风险。

<ComboBox IsEditable="True" 
          IsReadOnly="True" 
          ItemsSource="{Binding ItemsSource}" 
          Text="{Binding SelectedValues, Mode=OneWay}">
    <ComboBox.ItemContainerStyle>
         <Style TargetType="ComboBoxItem">
              <Setter Property="Template">
                   <Setter.Value>
                         <ControlTemplate>
                              <CheckBox Content="{Binding Item.Value}" 
                                        IsChecked="{Binding 
                                        Item.IsChecked}">
                              </CheckBox>
                         </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>