title: C# WPF ComboBox complex custom pop-up data display
body: <p>So, have a program with a custom combobox style that gives it a more flat look. It displays usernames and recently received a request to add something to the popup box itself but not have the information show up in the selection box when that item is selected. Something like this (the stuff in the red box is what I want to add):</p>
  
  <p><a href="https://i.stack.imgur.com/vndmr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vndmr.png" alt="enter image description here"></a></p>
  
  <p>This particular combobox is populated with an item source that is a custom data struct, so I have the data, I just need to see how I can do this.</p>
  
  <p>Here is my custom style:</p>
  
  <pre><code>    &lt;Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}"&gt;
          &lt;Setter Property="UIElement.SnapsToDevicePixels" Value="True"/&gt;
          &lt;Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/&gt;
          &lt;Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/&gt;
          &lt;Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/&gt;
          &lt;Setter Property="ScrollViewer.CanContentScroll" Value="True"/&gt;
          &lt;Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/&gt;
          &lt;Setter Property="Control.Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type ComboBox}"&gt;
                      &lt;Grid&gt;
                          &lt;ToggleButton Name="ToggleButton" Grid.Column="2"
                                        ClickMode="Press"
                                        Focusable="False"
                                        IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                        Template="{StaticResource ComboBoxToggleButtonTemplate}"/&gt;
  
                          &lt;ContentPresenter Name="ContentSite" Margin="5,3,23,3" IsHitTestVisible="False"
                                            HorizontalAlignment="Left" VerticalAlignment="Center"
                                            Content="{TemplateBinding ComboBox.SelectionBoxItem}"
                                            ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/&gt;
  
                          &lt;TextBox Name="PART_EditableTextBox" Margin="3,3,23,3"                     
                                   IsReadOnly="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}, Path=IsReadOnly}"
                                   Visibility="Hidden"
                                   Background="Transparent"
                                   Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}, Path=Foreground}"
                                   HorizontalAlignment="Left" VerticalAlignment="Center"
                                   Focusable="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}, Path=Focusable}"&gt;
  
                              &lt;TextBox.Template&gt;
                                  &lt;ControlTemplate TargetType="{x:Type TextBox}"&gt;
                                      &lt;Border Name="PART_ContentHost"
                                              Focusable="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}, Path=Focusable}"/&gt;
                                  &lt;/ControlTemplate&gt;
                              &lt;/TextBox.Template&gt;
                          &lt;/TextBox&gt;
                          &lt;!-- Popup showing items --&gt;
                          &lt;Popup Name="Popup"
                                 Placement="Bottom"
                                 Focusable="False"
                                 AllowsTransparency="True"
                                 IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                                 PopupAnimation="Slide"&gt;
  
                              &lt;Grid Name="DropDown" SnapsToDevicePixels="True"
                                    MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                                    MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"&gt;
  
                                  &lt;Border Name="DropDownBorder" Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}, Path=Background}"
                                          Margin="0,1,0,0"
                                          CornerRadius="0" BorderThickness="1,1,1,1"
                                          BorderBrush="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}, Path=BorderBrush}"/&gt;
  
                                  &lt;ScrollViewer Margin="4" SnapsToDevicePixels="True"&gt;
                                      &lt;StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /&gt;
                                  &lt;/ScrollViewer&gt;
                              &lt;/Grid&gt;
                          &lt;/Popup&gt;
                      &lt;/Grid&gt;
  
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="ItemsControl.HasItems" Value="False"&gt;
                              &lt;Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" 
                                      Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}, Path=MaxDropDownHeight}"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="UIElement.IsEnabled" Value="False"&gt;
                              &lt;Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="ItemsControl.IsGrouping" Value="True"&gt;
                              &lt;Setter Property="ScrollViewer.CanContentScroll" Value="False"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="ComboBox.IsEditable" Value="True"&gt;
                              &lt;Setter Property="KeyboardNavigation.IsTabStop" Value="False"/&gt;
                              &lt;Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/&gt;
                              &lt;Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/&gt;
                          &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>