CODEWITHSUNDEEP
wpfmvvmcomboboxbackground-color
Nimesh
Nimesh

Reputation: 3610

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

Can anybody knows,

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

Upvotes: 7

Views: 7375

Answers (3)

Josh Noe
Josh Noe

Reputation: 2798

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.

Upvotes: 0

Andrew Grinder
Andrew Grinder

Reputation: 595

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.

Upvotes: 1

Ian Griffiths
Ian Griffiths

Reputation: 14537

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.

Upvotes: 2

Related Questions