Displaying the selected item differently in ComboBox

Question

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>

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?

Answer 1

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>

EDIT

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

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.

• 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!

Answer 2

Fantastic Drew!! Solved my problem in an instant..!! Thanks a million.

Just 1 thing. Is it possible to remove the extra spaces which comes after hiding the columns..??