C# WPF ComboBox complex custom pop-up data display

Question

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

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.

Here is my custom style:

    <Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}">
        <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
        <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <ToggleButton Name="ToggleButton" Grid.Column="2"
                                      ClickMode="Press"
                                      Focusable="False"
                                      IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                      Template="{StaticResource ComboBoxToggleButtonTemplate}"/>

                        <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}"/>

                        <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}">

                            <TextBox.Template>
                                <ControlTemplate TargetType="{x:Type TextBox}">
                                    <Border Name="PART_ContentHost"
                                            Focusable="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}, Path=Focusable}"/>
                                </ControlTemplate>
                            </TextBox.Template>
                        </TextBox>
                        <!-- Popup showing items -->
                        <Popup Name="Popup"
                               Placement="Bottom"
                               Focusable="False"
                               AllowsTransparency="True"
                               IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                               PopupAnimation="Slide">

                            <Grid Name="DropDown" SnapsToDevicePixels="True"
                                  MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                                  MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">

                                <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}"/>

                                <ScrollViewer Margin="4" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="ItemsControl.HasItems" Value="False">
                            <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" 
                                    Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}, Path=MaxDropDownHeight}"/>
                        </Trigger>
                        <Trigger Property="UIElement.IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                        </Trigger>
                        <Trigger Property="ItemsControl.IsGrouping" Value="True">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                        </Trigger>
                        <Trigger Property="ComboBox.IsEditable" Value="True">
                            <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
                            <Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                            <Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

A quick and somewhat dirty way to display items differently in the selection box is to set the item template via ItemContainerStyle: The selection box content is not the content of a ComboBoxItem, so the template isn't applied to it.

<ComboBox
    VerticalAlignment="Top"
    ItemsSource="{Binding Items}"
    DisplayMemberPath="Name"
    HorizontalContentAlignment="Stretch"
    >
    <ComboBox.ItemContainerStyle>
        <Style TargetType="ComboBoxItem">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <DockPanel LastChildFill="False">
                            <ContentControl Content="{Binding Name}" DockPanel.Dock="Left" />
                            <ContentControl Content="{Binding Value}" DockPanel.Dock="Right" />
                        </DockPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

But you can't use ComboBox.ItemTemplate with that; it'll override the template that you applied via the style. A more robust solution is to write a template selector, as in this answer.