组合框下拉列表中的项目和选定项目的不同模板

Question

我有一个ComboBox，其中包含相当复杂的单个项目模板，其中包括两个图像和几行文本：

但是，ComboBox 中的选中项本身并不能正确显示，因为垂直空间太有限（我不能让它更高，因为它是ToolBar 的一部分）。

如何让 ComboBox 为 ComboBox 本身中显示的项目使用不同的模板？（默认的 ToString 表示就可以了）

谢谢！

Answer 1

所选项目（在 ComboBox 本身中，而不是下拉菜单中）不在 ComboBoxItem 内，因此您可以执行以下操作：

<ComboBox.ItemTemplate>
    <DataTemplate>
        <ContentControl Content="{Binding}">
            <ContentControl.Style>
                <Style TargetType="{x:Type ContentControl}">
                    <!-- Complex default template -->
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Image Source="{Binding XPath=media:thumbnail/@url}" Width="100" Height="100" />
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <!-- Simple selection box template -->
                        <DataTrigger
                                Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}"
                                Value="{x:Null}">
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding XPath=title}" />
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </DataTemplate>
</ComboBox.ItemTemplate>

(编辑：请注意，选择框中的绑定会抛出错误，因为找不到RelativeSource。有多种选项可以规避这一点，一个是自定义值转换器，根据祖先是否存在返回true 或false（手动树行走）。）

Answer 2

我正在寻找一个标准（不是 hacky 并且没有绑定错误）解决方案来解决这个问题。我发现它here：使用DataTemplateSelector。

这与 @H.B. answer 的想法相同：检查视觉树中是否有 ComboBoxItem 作为父级。

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

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        while (container != null)
        {
            container = VisualTreeHelper.GetParent(container);
            if (container is ComboBoxItem)
                return DropDownTemplate;
        }
        return SelectedTemplate;
    }
}

用法：

<ComboBox.ItemTemplateSelector>
    <local:ComboBoxItemTemplateSelector>
        <local:ComboBoxItemTemplateSelector.SelectedTemplate>
            <DataTemplate>
                ... simple template for selected item
            </DataTemplate>
        </local:ComboBoxItemTemplateSelector.SelectedTemplate>
        <local:ComboBoxItemTemplateSelector.DropDownTemplate>
            <DataTemplate>
                ... complex template used by dropdown items
            </DataTemplate>
        </local:ComboBoxItemTemplateSelector.DropDownTemplate>
    </local:ComboBoxItemTemplateSelector>
</ComboBox.ItemTemplateSelector>