WPF Change Background color of a Combobox

Question

In my WPF app I just want to change the background color of the Combo box. I don't mean the dropdown, I want is just whatever item is selected a background is set. Like setting the background of a button - when the control is displayed on screen it should have LightYellow background. That's it. I searched a lot on net, but everywhere could find solutions for drop down background colors. I tried applying SolidColorBrush and Style.Triggers to the TextBlock of Combobox, but no success as wanted. By adding SolidColorBrush lines, I got my dropdown background set, but that's not what I am looking for. My code is :

<ComboBox ItemsSource="{Binding MtrCm}" SelectedValue="{Binding WellboreDiameter_Unit, Mode=TwoWay}" Grid.Row="1" Height="23" HorizontalAlignment="Right" Margin="0,26,249,0" x:Name="cboWellDiameter" VerticalAlignment="Top" Width="120"   Background="LightYellow"  >     <ComboBox.Resources>         <SolidColorBrush x:Key="{x:Static SystemColors.WindowBrushKey}" Color="Yellow" />         <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Yellow" />         <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Yellow" />         <Style TargetType="TextBlock">             <Style.Triggers>                 <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="True">                     <Setter Property="Background" Value="Red" />                 </DataTrigger>             </Style.Triggers>         </Style>     </ComboBox.Resources> </ComboBox> 

Can anyone help me set he background of the desired component that am looking for.

Thanks

Answer 1

Try this

 <Window.Resources>  //Put this resourse n Window.Resources or UserControl.Resources    <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">       <GradientBrush.GradientStops>          <GradientStopCollection>             <GradientStop Color="#FFDC3939" Offset="0.0"/>             <GradientStop Color="#FFE80E0E" Offset="1.0"/>          </GradientStopCollection>       </GradientBrush.GradientStops>    </LinearGradientBrush>      <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFFBE618" />      <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">         <Grid>             <Grid.ColumnDefinitions>                 <ColumnDefinition />                 <ColumnDefinition Width="20" />             </Grid.ColumnDefinitions>             <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="2"   Background="{StaticResource NormalBrush}"   BorderThickness="1" />             <Border    Grid.Column="0"   CornerRadius="2,0,0,2"    Margin="1"    Background="{StaticResource WindowBackgroundBrush}"    BorderThickness="0,0,1,0" />             <Path    x:Name="Arrow"   Grid.Column="1"        HorizontalAlignment="Center"   VerticalAlignment="Center"   Data="M 0 0 L 4 4 L 8 0 Z"/>         </Grid>     </ControlTemplate>      <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">         <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />     </ControlTemplate>   <Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">   <Setter Property="Template">    <Setter.Value>      <ControlTemplate TargetType="ComboBox">       <Grid>        <ToggleButton           Name="ToggleButton"           Template="{StaticResource ComboBoxToggleButton}"           Grid.Column="2"           Focusable="false"          IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"          ClickMode="Press">       </ToggleButton>       <ContentPresenter         Name="ContentSite"         IsHitTestVisible="False"          Margin="3,3,23,3"         VerticalAlignment="Center"         HorizontalAlignment="Left" />        <TextBox x:Name="PART_EditableTextBox"          Style="{x:Null}"           Template="{StaticResource ComboBoxTextBox}"           HorizontalAlignment="Left"           VerticalAlignment="Center"           Margin="3,3,23,3"          Focusable="True"           Background="Transparent"          Visibility="Hidden"          IsReadOnly="{TemplateBinding IsReadOnly}"/>       <Popup          Name="Popup"         Placement="Bottom"         IsOpen="{TemplateBinding IsDropDownOpen}"         AllowsTransparency="True"          Focusable="False"         PopupAnimation="Slide">         <Grid            Name="DropDown"           SnapsToDevicePixels="True"                           MinWidth="{TemplateBinding ActualWidth}"           MaxHeight="{TemplateBinding MaxDropDownHeight}">            <Border              x:Name="DropDownBorder"             Background="{StaticResource WindowBackgroundBrush}"             BorderThickness="1"/>            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">             <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />            </ScrollViewer>           </Grid>          </Popup>         </Grid>        </ControlTemplate>       </Setter.Value>      </Setter>     <Style.Triggers>    </Style.Triggers>   </Style>  </Window.Resources>  <Grid>     <ComboBox HorizontalAlignment="Left" Margin="256,57,0,0" VerticalAlignment="Top" Width="120">     </ComboBox>   </Grid> 

Here is the complete style that you can change : http://msdn.microsoft.com/en-us/library/ms752094%28v=VS.85%29.aspx

Answer 2

While I like the accepted answer the problem I have with it is the text box presenter was completely missed and thus you can select and stylize things but they will never be presented to the end user. I think the easiest way to achieve a combo-box that shows data and then when chosen displays it would be this:

<Window http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:Test" x:Class="MainWindow"         mc:Ignorable="d" Title="MainWindow" Height="100" Width="200">   <Window.Resources>     <Style x:Key="ComboBoxTest2" TargetType="{x:Type ComboBox}">       <Setter Property="Template">         <Setter.Value>           <ControlTemplate TargetType="ComboBox">             <Grid>               <ToggleButton Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" >                 <ToggleButton.Template>                   <ControlTemplate>                     <Grid>                       <Grid.ColumnDefinitions>                         <ColumnDefinition Width="5*" />                         <ColumnDefinition Width="*" />                       </Grid.ColumnDefinitions>                       <Border x:Name="Border"  Grid.ColumnSpan="2" CornerRadius="5" Background="Beige" BorderBrush="Black" BorderThickness="1" />                       <Border Grid.Column="0" CornerRadius="5,0,0,5"  Margin="1"  Background="AliceBlue"  BorderBrush="Black" BorderThickness="0,0,1,0" />                       <Path x:Name="Arrow" Grid.Column="1"  Fill="Orange" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>                     </Grid>                     <ControlTemplate.Triggers>                       <Trigger Property="ToggleButton.IsMouseOver" Value="true">                         <Setter TargetName="Border" Property="Background" Value="Green" />                       </Trigger>                       <Trigger Property="ToggleButton.IsChecked" Value="true">                         <Setter TargetName="Border" Property="Background" Value="Green" />                       </Trigger>                     </ControlTemplate.Triggers>                   </ControlTemplate>                 </ToggleButton.Template>               </ToggleButton>               <ContentPresenter Name="ContentSite" IsHitTestVisible="False"  Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3"  />               <TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/>               <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"  Focusable="False" PopupAnimation="Slide">                 <Grid  Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">                   <Border x:Name="DropDownBorder" Background="Blue" />                   <ScrollViewer SnapsToDevicePixels="True">                     <StackPanel IsItemsHost="True" />                   </ScrollViewer>                 </Grid>               </Popup>             </Grid>           </ControlTemplate>         </Setter.Value>       </Setter>       <Style.Triggers>       </Style.Triggers>     </Style>   </Window.Resources>   <StackPanel Margin="10">     <ComboBox VerticalAlignment="Top" Width="120" Style="{StaticResource ComboBoxTest2}">       <ComboBoxItem>Item1</ComboBoxItem>       <ComboBoxItem>Item2</ComboBoxItem>     </ComboBox>   </StackPanel> </Window> 

The key parts of the presentation needed to be done is the template 'ToggleButton.Template' for the initial display. I chose to ignore making more brushes and links to more templates and just do it all inline so others could play with it as needed. I also chose what I thought were easily Identifiable colors to just jump to for reference it should look like below when it works: