title: WPF ComboBox Dropdropdown SelectedItem Background
body: <p>I use a FlatComboBox <code>Style</code>. Everything is working just like I want it to. I just to change one thing, the <code>Background</code> of the <code>Selected Item</code> in the <code>DropDown</code>. How can I change the color? I'm using Windows 8 and .Net 4. But the solution should also run with older Windows Versions. I save this Style in a <code>ResourceDictionary</code>.</p>
  
  <p><img src="https://i.stack.imgur.com/pF1Bg.png" alt="ComboBox DropDown SelectedItem Background"></p>
  
  <p>My Code for the Style:</p>
  
  <pre><code>&lt;!-- Flat ComboBox --&gt;
  &lt;SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#e3e9ef" /&gt;
  &lt;SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#fff" /&gt;
  &lt;SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" /&gt;
  &lt;SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" /&gt;
  &lt;SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" /&gt;
  
  &lt;ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate"&gt;
      &lt;Grid&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition /&gt;
              &lt;ColumnDefinition Width="20" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Border Grid.ColumnSpan="2" Name="Border" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" CornerRadius="0" BorderThickness="1, 1, 1, 1" Background="{StaticResource ComboBoxNormalBackgroundBrush}" /&gt;
          &lt;Border Grid.Column="1" Margin="1, 1, 1, 1" BorderBrush="#444" Name="ButtonBorder" CornerRadius="0, 0, 0, 0" BorderThickness="0, 0, 0, 0" Background="{StaticResource ComboBoxNormalBackgroundBrush}" /&gt;
          &lt;Path Name="Arrow" Grid.Column="1" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" HorizontalAlignment="Center" Fill="#444" VerticalAlignment="Center" /&gt;
      &lt;/Grid&gt;
      &lt;ControlTemplate.Triggers&gt;
          &lt;Trigger Property="UIElement.IsMouseOver" Value="True"&gt;
              &lt;Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="ToggleButton.IsChecked" Value="True"&gt;
              &lt;Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/&gt;
              &lt;Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="UIElement.IsEnabled" Value="False"&gt;
              &lt;Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/&gt;
              &lt;Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/&gt;
              &lt;Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/&gt;
              &lt;Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/&gt;
              &lt;Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/&gt;
          &lt;/Trigger&gt;
      &lt;/ControlTemplate.Triggers&gt;
  &lt;/ControlTemplate&gt;
  
  &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="TextElement.Foreground" Value="Black"/&gt;
      &lt;Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/&gt;
      &lt;Setter Property="Control.Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="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="{TemplateBinding IsReadOnly}" Visibility="Hidden" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Center"
                                  Focusable="True" &gt;
                          &lt;TextBox.Template&gt;
                              &lt;ControlTemplate TargetType="TextBox" &gt;
                                  &lt;Border Name="PART_ContentHost" Focusable="False" /&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="White" Margin="0, 1, 0, 0" CornerRadius="0" BorderThickness="1,1,1,1" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/&gt;
                              &lt;ScrollViewer Margin="4" SnapsToDevicePixels="True"&gt;
                                  &lt;ItemsPresenter 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="95"/&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;
  &lt;!-- End of Flat ComboBox --&gt;
  </code></pre>
  
  <p><strong>Working Solution</strong>
  I had to replace the <code>TextBlock</code> with a <code>ContentPresenter</code> to get it working, when the <code>ItemsSource</code> is a <code>DataTable</code>.</p>
  
  <pre><code>&lt;Setter Property="ItemContainerStyle"&gt;
          &lt;Setter.Value&gt;
              &lt;Style TargetType="ComboBoxItem"&gt;
                  &lt;Setter Property="Template"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ControlTemplate TargetType="ComboBoxItem"&gt;
                              &lt;Border Background="{TemplateBinding Background}" BorderThickness="0" Margin="2"&gt;
                                  &lt;!--&lt;TextBlock Text="{TemplateBinding Content}" Margin="2" /&gt;--&gt;
                                  &lt;ContentPresenter /&gt;
                              &lt;/Border&gt;
                          &lt;/ControlTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
                  &lt;Style.Triggers&gt;
                      &lt;Trigger Property="IsSelected" Value="True"&gt;
                          &lt;Setter Property="Background" Value="Red" /&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                          &lt;Setter Property="Background" Value="AliceBlue" /&gt;
                      &lt;/Trigger&gt;
                  &lt;/Style.Triggers&gt;
              &lt;/Style&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  </code></pre>