ComboBox ItemTemplate 仅在下拉列表中工作

Question

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

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

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

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

如果我对任何其他类型的课程做同样的事情，一切都会按预期进行。

在寻找答案的过程中，我遇到了很多人的帖子，他们有类似的声音问题，但几乎所有帖子都是绑定问题，而这里不是这样。

编辑：

为了简化试用，下面是代码。只需将上面的 XAML 放到一个新的 Window 中，下面的代码放在后面的代码中。

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

Answer 1

由于某些非常复杂的原因，ComboBox 公开了一个名为 SelectionBoxItem 的只读属性。 ComboBox 模板中的内容展示器绑定在此属性上。正是 SelectionBoxItem 公开了非 UI 元素的字符串表示，允许您查看所选值。使用此属性可以防止内容呈现者使用数据模板。这就是模板适用于下拉列表但不适用于所选项目的原因。这是导致问题的默认 ComboBox 模板的一部分：

<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。这将解决问题。

Answer 2

使用DisplayMemberPath 而不是绑定到名称：

 <Combobox DisplayMemberPath="Name" ... />

您看到的行为的原因可能是您需要为所选项目的模板设置另一个属性：http://msdn.microsoft.com/en-us/library/system.windows.controls.combobox.selectionboxitemtemplate.aspx

---

更新：我在没有检查您的代码的情况下编写了答案，对此深表歉意。现在我已经阅读了您的代码并注意到您正在绑定 SelectedValue 属性。我不认为这是在您的情况下绑定的最佳属性，通常应该使用属性SelectedItem。我记得我从来不需要对其他答案中提到的SelectionBoxItem 做任何事情，这可能是因为SelectedValue 和SelectedItem 属性的行为不同，我倾向于尽可能使用SelectedItem。在你的情况下，我也会使用它。

Answer 3

这个link 提供了一个解决方案和一个演示。诀窍是在需要控制 SelectedItem 的外观的情况下使用 DataTemplateSelector 而不是 DataTemplate，例如：

<ComboBox ItemsSource="{Binding GroupBoxes}" SelectedValue="{Binding SelectedGroupBox}">
    <ComboBox.ItemTemplateSelector>
            <ts:ComboBoxItemTemplateSelector>
                <ts:ComboBoxItemTemplateSelector.SelectedTemplate>
                    <DataTemplate>
                    <TextBlock Text="{Binding Name}"/>
                    </DataTemplate>
                </ts:ComboBoxItemTemplateSelector.SelectedTemplate>                  
            </ts:ComboBoxItemTemplateSelector>
        </ComboBox.ItemTemplateSelector>     
</ComboBox>

public class ComboBoxItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate SelectedTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        return SelectedTemplate;     
    }
}