How to change WPF ComboBox SelectedText BackGround Color?

Question

I have Combobox in WPF-MVVM, and I developed combobox with changes in the popup and combobox text box.

When I scroll through the list of lists with a list, its pink color is what I did. But after selecting an item from the combobox list, the selected value in the combobox element has a blue background. which is the default value for combobbox in both Windows Form and WPF.

See image for more details.

How can I change the background color of selected text in a combobox text box control

In the combo box

IsEditable=True Property Set

Answer 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> 

Answer 2

You can do it:

 <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 to set the ItemContainerStyle ComboBox property and the presence of a trigger depends on the current state of the ComboBoxItem selection:

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

Answer 3

In its PART_EditableTextBox, the SelectionBrush property controls this background for the selected item. In the code below, I set it transparent so that it does not stand out.

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