ComboBox ItemTemplate 仅适用于下拉列表 [英] ComboBox ItemTemplate only working in dropdown

问题描述

我试图显示一个 ComboBox，其 ItemsSource 是一个控件集合(它是 PropertyGrid 的一部分，ComboBox 应该显示控件的名称，并且用户应该能够选择其中一个控件).这是问题的极其简化的再现:

I am trying to show a ComboBox whose ItemsSource is a collection of Controls (it is part of a PropertyGrid, the ComboBox should display the names of the controls, and the user should be able to select one of the controls). Here is an extremely simplified reproduction of the problem:

<ComboBox ItemsSource="{Binding GroupBoxes}" SelectedValue="{Binding SelectedGroupBox}">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Name}"/>
    </DataTemplate>
  </ComboBox.ItemTemplate>          
</ComboBox>

GroupBoxes 和 SelectedGroupBox 是 ObservableCollection 和 GroupBox 类型的 DependencyProperties.

GroupBoxes and SelectedGroupBox are DependencyProperties of type ObservableCollection and GroupBox.

绑定有效 - 控件名称显示在 ComboBox-DropDown 中，如果我选择不同的项目，我可以看到 SelectedGroupBox 属性已正确更新.问题:所选项目永远不会显示在 ComboBox 中.从代码设置 SelectedGroupBox 属性也按预期工作 - ComboBox 引发 SelectionChanged 并且其 SelectedValue 是正确的，但它仍然不显示当前值.

The Bindings work - the control names are displayed in the ComboBox-DropDown, and if I select a different item I can see that the SelectedGroupBox property is updated correctly. The problem: the selected item is never displayed in the ComboBox. Setting the SelectedGroupBox property from code also works as expected - the ComboBox raises SelectionChanged and its SelectedValue is correct, but it still doesn't display the current value.

如果我对任何其他类型的类做完全相同的事情，一切都会按预期进行.

If I do the exact same thing with any other type of class, everything works as expected.

在寻找答案的过程中，我遇到了许多有类似问题的人发来的帖子，但几乎所有帖子都是绑定问题，而这里的情况并非如此.

Searching for an answer I came across many posts from people having similar sounding problems, but almost all of them were Binding proplems which is not the case here.

为了简化尝试，下面是代码.只需将上面的 XAML 放在一个新窗口中，并将下面的代码放在后面的代码中.

To simplify trying it out, here's the code behind. Just drop the above XAML in a new Window, and the code below in the code behind.

public MainWindow() {
    InitializeComponent();
    this.DataContext = this;
    this.GroupBoxes = new ObservableCollection<GroupBox>();
    this.GroupBoxes.Add(new GroupBox() { Name = "AAA", Header = "AAA", Height = 100, Background = Brushes.Purple });
    this.GroupBoxes.Add(new GroupBox() { Name = "BBB", Header = "BBB", Height = 100, Background = Brushes.Purple });
    this.GroupBoxes.Add(new GroupBox() { Name = "CCC", Header = "CCC", Height = 100, Background = Brushes.Purple });
    this.GroupBoxes.Add(new GroupBox() { Name = "DDD", Header = "DDD", Height = 100, Background = Brushes.Purple });
    this.GroupBoxes.Add(new GroupBox() { Name = "EEE", Header = "EEE", Height = 100, Background = Brushes.Purple });
}

#region GroupBoxesProperty

public static readonly DependencyProperty GroupBoxesProperty = DependencyProperty.Register(
    "GroupBoxes", typeof(ObservableCollection<GroupBox>), typeof(MainWindow)
);

public ObservableCollection<GroupBox> GroupBoxes {
    get { return (ObservableCollection<GroupBox>)GetValue(GroupBoxesProperty); }
    set { SetValue(GroupBoxesProperty, value); }
}

#endregion

#region SelectedGroupBoxProperty

public static readonly DependencyProperty SelectedGroupBoxProperty = DependencyProperty.Register(
    "SelectedGroupBox", typeof(GroupBox), typeof(MainWindow),
    new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, (s, e) => (s as MainWindow).OnSelectedGroupBoxChanged())
);

public GroupBox SelectedGroupBox {
    get { return (GroupBox)GetValue(SelectedGroupBoxProperty); }
    set { SetValue(SelectedGroupBoxProperty, value); }
}

void OnSelectedGroupBoxChanged() {
    Console.WriteLine("selection is now " + this.SelectedGroupBox.Name);
}

#endregion

推荐答案

ComboBox 由于某些非常复杂的原因公开了一个名为 SelectionBoxItem 的只读属性.ComboBox 模板中的内容演示者绑定到此属性.SelectionBoxItem 公开非 UI 元素的字符串表示形式，允许您查看所选值.使用此属性可防止内容演示者使用数据模板.这就是模板适用于下拉菜单而不适用于所选项目的原因.这是导致问题的默认 ComboBox 模板的一部分:

The ComboBox, for some very complex reasons exposes a read-only property called SelectionBoxItem. The content presenter in the ComboBox template binds on this property. It is the SelectionBoxItem that exposes the string representation of non-UI elements allowing you to see the selected value. The use of this property is what prevents the content presenter from using data templates. This is why the template applies to the drop down but not the selected item. Here is the part of the default ComboBox template causing the issue:

<ContentPresenter IsHitTestVisible="false"
    Margin="8,1,1,1"
    Content="{TemplateBinding SelectionBoxItem}"
    ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
    ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

然而，您可以创建自己的 ComboBox 样式，覆盖默认的 ContentPresenter 并使用 SelectedItem 代替 SelectionBoxItem 和 ItemTemplate 代替 SelectionItemBoxTemplate.这将解决问题.

You can however create your own ComboBox style that overrides the default ContentPresenter and uses the SelectedItem instead of SelectionBoxItem and ItemTemplate instead of SelectionItemBoxTemplate. This will resolve the issue.

这篇关于ComboBox ItemTemplate 仅适用于下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！