How to change ComboBox Dropdown Background?

user_7978294 0
Viewed 1814

I have a ComboBox in a UWP project that I want to modify. I want to change the background color of the StackPanel(?) containing the ComboBoxItems, but I haven't found a simple way of doing this.

Here, I want to change the color of the light gray padding.

Combobox open

The color surrounding the ComboBoxItems should match, but instead it is the default gray that stands out.

Here's an example where MSN Money's ComboBox has a custom padding color to match the ComboBoxItems. This is what I am hoping to achieve.

MSN Money Combobox

I use the word "padding", but it is really just the color of the element containing the ComboBoxItems.

As I understand it, I have to modify the provided generics.xaml file in the Windows 10 SDK, but that will modify all of the ComboBoxes I'm using. I could create a custom control that inherits from ComboBox, but wouldn't that require me to write a new control whenever I wanted to change this color? There has to be an easier way to change this.

@Bart This is the code I found in the template for the Popup in the ComboBox. I am not sure where "SystemControlBackgroundChromeMediumLowBrush" came from in your explanation. 

<Popup x:Name="Popup">
    <Border x:Name="PopupBorder"
        Background="{ThemeResource ComboBoxDropDownBackground}"
        BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}"
        BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}"
uwp combobox colors xaml
1 Answers

You should NEVER touch the generics.xaml file in the SDK folder, that's a "system file". That's like changing some file deep in your Windows installation to change an icon explorer (and might result in other applications to change this as well).

There are multiple solutions:

  • Edit the control's template in your own app (with Visual Studio, Blend or by simply copying the default template. If you let it unnamed (name a template by setting x:Key) it will be applied to all your ComboBoxes. If you only want some changed, you should give it a key and use it as StaticResource.

The piece of code you are looking for is the Popup control in the template.

<Popup x:Name="Popup">
    <Border
        x:Name="PopupBorder"
        Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
        BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
        BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}"
        Margin="0,-1,0,-1"
        HorizontalAlignment="Stretch">
  • Override the ThemeResource to give it another color. Note that this will have an effect on other controls in your app using the same ThemeResource. But this is still a lot better than changing the generics.xaml and less work than redefining the template.

This is done by redefining the resource key.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="SystemControlBackgroundChromeMediumLowBrush" Color="DarkGray" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>
user_3185010
Related