在 ComboBox 中以不同方式显示所选项目 [英] Displaying the selected item differently in ComboBox

问题描述

我有一个组合框，我在其中设置了一个看起来像这样的 ItemTemplate:

I have a combo box in which I set up an ItemTemplate that looks something like this:

<ComboBox.ItemTemplate>
  <DataTemplate>
    <StackPanel Orientation="Horizontal">
      <TextBlock Text="{Binding Piece.NoPiece}" Width="50" />
      <TextBlock Text="{Binding Piece.Description}" Width="170" />
      <TextBlock Text="{Binding Piece.Categorie.NomCategorie}" />
    </StackPanel>
  </DataTemplate>
</ComboBox.ItemTemplate>

如您所见，我得到了三列，让用户可以看到不同的信息.但是，我希望组合中的选定项目仅显示第二列.换句话说，有没有办法让 ItemTemplate 在您向下滚动时以不同的方式显示项目，而不是在它关闭时只看到选择?

As you can see, I got three columns that let the user see different piece of information. However, I would like the selected item in the combo to display only the second column. In other word, is there a way to have an ItemTemplate that displays items in a different manner when you scroll down versus when it's closed and you only see the selection?

推荐答案

你可以用触发器来做到:

You can do it with triggers:

<ComboBox.ItemTemplate>
  <DataTemplate>
    <StackPanel Orientation="Horizontal">
      <TextBlock Text="{Binding Piece.NoPiece}" Width="50" x:Name="Column1" />
      <TextBlock Text="{Binding Piece.Description}" Width="170" />
      <TextBlock Text="{Binding Piece.Categorie.NomCategorie}" x:Name="Column3" />
    </StackPanel>
    <DataTemplate.Triggers>
      <!-- This trigger fires for the selected item in the drop-down list -->
      <DataTrigger Binding="{Binding 
                       RelativeSource={RelativeSource Mode=FindAncestor, 
                                                      AncestorType=ComboBoxItem},
                       Path=IsSelected}" 
        Value="True">
        <Setter TargetName="Column1" Property="Visibility" Value="Hidden" />
        <Setter TargetName="Column3" Property="Visibility" Value="Hidden" />
      </DataTrigger>

      <!-- This trigger fires for the selected item (ie the one that's
           visible when the popup is closed -->
      <DataTrigger Binding="{Binding 
                       RelativeSource={RelativeSource Mode=FindAncestor, 
                                                      AncestorType=ComboBoxItem}}"
                   Value="{x:Null}">
        <Setter TargetName="Column1" Property="Visibility" Value="Hidden" />
        <Setter TargetName="Column3" Property="Visibility" Value="Hidden" />
      </DataTrigger>
    </DataTemplate.Triggers>
  </DataTemplate>
</ComboBox.ItemTemplate>

编辑

我已更新 XAML 以展示如何在折叠弹出窗口时将替代格式应用于所选项目(我不确定该区域的名称.)

I've updated the XAML to show how to apply the alternative formatting to the selected item when the popup is collapsed (I'm not sure what that area is called.)

技巧是下拉区域中的项目包含在逻辑树中的 ComboBoxItem 对象中.RelativeSource 绑定查找该类型的对象作为祖先.

The trick is that items in the drop-down area are contained within ComboBoxItem objects in the logical tree. The RelativeSource binding looks for an object of that type as an ancestor.

• 如果找到，则假定该项目在树中(并检查它是否被选中)
• 如果未找到 (null)，则假定该项目位于组合框区域而不是弹出窗口

• If it finds it, it assumes that the item is in the tree (and checks whether it's selected)
• If it's not found (null) then it assumes the item is in the combo box area rather than the popup

如果您以某种方式在另一个组合框的项目模板中包含一个组合框，这将会崩溃.不过，我不认为我想使用那个用户界面！

This would fall apart if you, somehow, had a combo box within the item template of another combo box. I don't think I'd like to use that UI though!

这篇关于在 ComboBox 中以不同方式显示所选项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！