How to Change Combobox Background Color while Clicked(ComboBox is Open) in WPF?

Question

Can anybody knows,

How to Change Combobox Background Color while Clicked(ComboBox is Open) in WPF?

Charlatanry

Can you tell us what language or framework you're using? – Mania

what programming language? – Pacify

Hello, It's WPF (.Net) – Charlatanry

When you say "Clicked(ComboBox is Open)" I assume you mean mean the combobox's dropdown is open? (This doesn't necessarily have anything to do with being clicked. You can move the keyboard focus into a ComboBox with, e.g., Tab, and then type F4 to open it too.) But if you mean something other than the dropdown, please clarify. – Joke

Answer 1

Here's a slightly naive approach:

<ComboBox
  ItemsSource="{x:Static Fonts.SystemFontFamilies}"
  Width="100"
  >
  <ComboBox.Style>
    <Style TargetType="ComboBox">
      <Setter Property="Background" Value="Green" />
      <Style.Triggers>
        <Trigger Property="IsDropDownOpen" Value="True">
          <Setter Property="Background" Value="Red" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </ComboBox.Style>
</ComboBox>

Initially, this sets the Background property to Green, but arranges for it to go to Red when the drop-down appears. However, there are two problems with this:

1. In some Windows themes (e.g., the Aero theme used in Vista and Windows 7), the green background gets obscured by the bluish colour that theme uses to indicate that the dropdown's button has been pressed. So the button will briefly go green before fading to Cyan.
2. The ComboBox.Background property only affects the appearance of the button itself, and not the dropdown list. It's possible that what you actually want to do is change the background colour of the part that pops down.

If 2 is what you wanted, this does the trick:

<ComboBox
  ItemsSource="{x:Static Fonts.SystemFontFamilies}"
  Width="100"      >
  <ComboBox.Resources>
    <Style TargetType="ComboBoxItem">
       <Setter Property="Background" Value="Orange" />
    </Style>
  </ComboBox.Resources>
</ComboBox>

Strictly speaking, that's actually changing the background colour of the ComboBoxItem controls that appear in the dropdown but that will have the desired effect.

If you want to fix 1, though, you'll need a custom templates, because the built-in ComboBox template doesn't really provide very good support for the Background property, because it changes the colour of the button part under various circumstances. The Aero theme's look for a ComboBox really isn't designed to support a custom background colour, so you'd need to create your own custom look for the control.

Joke

Answer 2

Okay, to answer your question for code behind:

Add Items to your Combo box:

foreach (String tag in tags)
{
    ComboBoxItem item = new ComboBoxItem();
    item.Content = tag;
    cbTags.Items.Add(item);
}

Then you can modify the items background color:

((ComboBox)o).Background = GetBrushByRGB(r, g, b);
foreach (ComboBoxItem item in ((ComboBox)o).Items)
{
    item.Background = GetBrushByRGB(r, g, b);
}

So basically you need to change the ComboBoxItem's backcolor.

Heidi

Answer 3

First, you need to get the default template for the Combobox (details below if you need them). Then, put this XAML inside the first "ControlTemplate.Triggers" tag:

<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
    <Setter Property="Background" TargetName="templateRoot" Value="Red"/>
</DataTrigger>

Your combobox button will be Red when the dropdown is open.

To get the default template: In Visual Studio 2015, view your page in Design mode. Then, right-click on the combobox, and choose "Edit Template->Edit a Copy". This will generate the default template for you.

Boxhaul