ComboBox 下拉列表中的项目和所选项目的不同模板

问题描述

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

I have a ComboBox with fairly complex template for individual items, which includes two images and several lines of text:

但是，ComboBox 中的选中项本身显示不正确，因为垂直空间太有限(我不能把它调高，因为它是工具栏).

However, the selected item in the ComboBox itself doesn't display correctly, because the vertical space is too limited (I can't make it higher, because it is a part of a ToolBar).

如何让 ComboBox 为显示在 ComboBox 本身中的项目使用不同的模板?(默认的 ToString 表示会做得很好)

How can I make the ComboBox use a different template for the item which is displayed in the ComboBox itself? (the default ToString representation would do just fine)

谢谢！

推荐答案

所选项目(在 ComboBox 本身中，而不是下拉列表中)不在 ComboBoxItem 内，所以你可以这样做:

The selected item (in the ComboBox itself, not the dropdown) is not inside a ComboBoxItem so you can do something like this:

<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.

( Note that the binding in the for the selection box will throw errors because the RelativeSource is not found. There are various options of circumventing this, one being a custom value converter that returns true or false depending on whether the ancestor exists (manual tree walking).)

这篇关于ComboBox 下拉列表中的项目和所选项目的不同模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！