How to change WPF ComboBox SelectedText BackGround Color?

Question

I have a Combobox in WPF-MVVM and i have styled the combobox with changes in the popdown box and textbox of combobox.

When i scroll the combobox listitem thier background is pink is what i have chnaged. But after selecting a item from the combobox list, the selected value in combobox item has blue background. which is the default for a combobbox in both Windows Form and WPF.

See the image for more details.

How can i change that selectedtext background color in the combobox textbox control

The combobox has

IsEditable=True property set

Solution 1

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Brushes.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>
            <Border BorderBrush="{StaticResource LightBrush}" 
                    CornerRadius="0" 
                    BorderThickness="1"
                    Name="Border" 
                    Background="{StaticResource WhiteBrush}" 
                    Grid.ColumnSpan="2" />
            <Border Margin="1"
          BorderBrush="{StaticResource DarkBrush}"
          CornerRadius="0"
          BorderThickness="0"
          Background="{StaticResource WhiteBrush}"
          Grid.Column="0" />
            <Path          
          Data="M0,0L4,4 8,0z"
          HorizontalAlignment="Center"
          Fill="{DynamicResource DefaultBrush}"
          Name="Arrow"
          VerticalAlignment="Center"
          Width="8"
          Grid.Column="1" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="ToggleButton.IsChecked" Value="True">
                <Setter Property="Panel.Background" TargetName="Border" Value="{DynamicResource DefaultBrush}"/>
                <Setter Property="Shape.Fill" TargetName="Arrow" Value="{StaticResource WhiteBrush}"/>
                <Setter Property="Border.BorderBrush" TargetName="Border" Value="{DynamicResource DefaultBrush}"/>
                <Setter Property="Border.BorderThickness" TargetName="Border" Value="1,1,1,0"></Setter>
            </Trigger>
            <Trigger Property="UIElement.IsEnabled" Value="False">
                <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource DisabledBackgroundBrush}"/>
                <Setter Property="Border.BorderBrush" TargetName="Border" Value="{StaticResource DisabledBorderBrush}"/>
                <Setter Property="TextElement.Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                <Setter Property="Shape.Fill" TargetName="Arrow" Value="#66FFFFFF"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>    
    <ControlTemplate TargetType="TextBox" x:Key="ComboBoxTextBoxTemplate">
        <Border
        Name="PART_ContentHost" Background="{DynamicResource LightDefaultBrush}"
        Focusable="False" />                
    </ControlTemplate>    
    <Style TargetType="{x:Type ComboBoxItem}">
        <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
        <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="TextElement.Foreground"  Value="{StaticResource ForeGroundBrush}"/>
        <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                    <Border
              Name="Border"
              SnapsToDevicePixels="True"
              Padding="3,2,2,2">
                        <ContentPresenter
                ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                Content="{TemplateBinding ContentControl.Content}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ComboBoxItem.IsHighlighted" Value="True">
                            <Setter Property="Panel.Background" TargetName="Border" Value="{DynamicResource DefaultBrush}"/>                            
                            <Setter Property="TextElement.Foreground" Value="White"></Setter>
                        </Trigger>
                        <Trigger Property="UIElement.IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style 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="TextElement.Foreground" Value="{StaticResource ForeGroundBrush}"/>
        <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Height" Value="25"></Setter>
        <Setter Property="Margin" Value="0,2,0,2"></Setter>
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid>
                        <ToggleButton
                ClickMode="Press"
                Name="ToggleButton"
                IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                Focusable="False"
                Grid.Column="2"
                Template="{StaticResource ComboBoxToggleButtonTemplate}"/>
                        <ContentPresenter
                Margin="3,3,23,3"
                HorizontalAlignment="Left"
                Name="ContentSite"
                VerticalAlignment="Center"
                ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                Content="{TemplateBinding ComboBox.SelectionBoxItem}"
                IsHitTestVisible="False" />
                        <TextBox
                Margin="3,1,1,1"
                Visibility="Hidden"
                HorizontalAlignment="Left"
                Name="PART_EditableTextBox"
                Background="Transparent"
                VerticalAlignment="Center"
                Style="{x:Null}"
                IsReadOnly="False"
                Focusable="False"
                xml:space="preserve"                            
                Template="{StaticResource ComboBoxTextBoxTemplate}"/>
            <Popup
                Placement="Bottom"
                Name="Popup"
                Focusable="False"               
                AllowsTransparency="True"               
                IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                PopupAnimation="Slide">
              <Grid
                  MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                  MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
                  Name="DropDown"
                  SnapsToDevicePixels="True">
                <Border
                    BorderBrush="{DynamicResource DefaultBrush}"
                    BorderThickness="1,1,1,1"
                    Name="DropDownBorder"
                    Background="{StaticResource WhiteBrush}"/>
                <ScrollViewer Margin="1,0,1,0"
                    SnapsToDevicePixels="True">
                  <ItemsPresenter
                      KeyboardNavigation.DirectionalNavigation="Contained" />
                </ScrollViewer>
              </Grid>
            </Popup>
          </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ItemsControl.HasItems" Value="False">
                            <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
                        </Trigger>
                        <Trigger Property="UIElement.IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                        <Trigger Property="ItemsControl.IsGrouping" Value="True">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                        </Trigger>
                        <Trigger Property="Window.AllowsTransparency" SourceName="Popup" Value="True">
                            <Setter Property="Border.CornerRadius" TargetName="DropDownBorder" Value="0"/>
                            <Setter Property="Border.BorderThickness" TargetName="DropDownBorder" Value="1,0,1,1"/>
                            <Setter Property="FrameworkElement.Margin" TargetName="DropDownBorder" Value="0,0,0,0"/>
                        </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>
</ResourceDictionary>

Solution 2

You can do this:

<ComboBox.Resources>
    <!--Selected color when the ComboBox is focused-->
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Yellow" />
    <!--Selected color when the ComboBox is not focused-->
    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Yellow" />

    <!--selected text-->
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Yellow" />
</ComboBox.Resources>

(tested on ListBox but should work)

Another way is setting the ItemContainerStyle property of the ComboBox, and have a trigger depended on the current ComboBoxItem selection state:

<ComboBox>
  <ComboBox.Resources>
    <Style TargetType="TextBlock">
      <Style.Triggers>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="True">
          <Setter Property="Foreground" Value="White" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </ComboBox.Resources>
  <ComboBox.ItemContainerStyle>
    <Style TargetType="ComboBoxItem" x:Key="ContainerStyle">
      <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
          <Setter Property="Background" Value="Red" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </ComboBox.ItemContainerStyle>    
</ComboBox>

Solution 3

In your PART_EditableTextBox the SelectionBrush property controls this background for the selected item. In the code below I set it to be transparent so it will not highlight.

   <TextBox x:Name="PART_EditableTextBox"
    Margin="3,3,18,3"
    HorizontalAlignment="Left"
    VerticalAlignment="Center"
    Background="Transparent"
    Focusable="True"
    SelectionBrush="Transparent" 
    Foreground="{TemplateBinding Foreground}"
    IsReadOnly="{TemplateBinding IsReadOnly}"
    Style="{x:Null}"
    Template="{StaticResource ComboBoxTextBox}"
    Visibility="Visible" />