Set ComboBoxItem style (eg, mouseover highlight color) using ComboBox style

Question

What is the most direct way to set the ComboBoxItem highlight color using a ComboBox style?

For example, I would like to be able to write something like:

<my:ExtendedComboBox ItemBackgroundHighlight="Green" />
<my:ExtendedComboBox ItemBackgroundHighlight="Red" />

And have each ComboBox have the corresponding color for its mouseover/selected highlight.

Edit

As I might have guessed, there is a simple way to do this in WPF, which however is not possible in Silverlight.

Answer 1

This is the simplest solution I could come up with.

First, subclass ComboBoxItem, add a dependency property Brush BackgroundHighlight and modify its control template (this is necessary because the highlight color is hard-coded to "#FFBADDE9" in the default control template). Only 2 lines in the control template need to be changed, "#FFBADDE9" to "{TemplateBinding BackgroundHighlight}":

<Rectangle x:Name="fillColor" Fill="{TemplateBinding BackgroundHighlight}" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="{TemplateBinding BackgroundHighlight}" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>

Second, subclass ComboBox and add the Brush ItemBackgroundHighlight dependency property. Also, override the "GetContainerForItemOverride" method, returning the subclassed ComboBoxItem and binding its "BackgroundHighlight" property to the parent "ItemBackgroundHighlight" property.

protected override DependencyObject GetContainerForItemOverride()
{
    var container = new ExtendedComboBoxItem();
    var highlightBinding = new Binding
    {
        Source = this,
        Path = new PropertyPath(ItemBackgroundHighlightProperty),
    };
    container.SetBinding(ExtendedComboBoxItem.BackgroundHighlightProperty, highlightBinding);
    return container;
}

And that's it. I can now write simply:

<my:ExtendedComboBox ItemBackgroundHighlight="Green" />
<my:ExtendedComboBox ItemBackgroundHighlight="Red" />

The colors show on mouseover and selection:

Note: make sure to set the DefaultStyleKey properties as follows. This way, the modified control template will be applied to the ExtendedComboBoxItems, while the default template will be applied to the ExtendedComboBox.

• on ExtendedComboBox: DefaultStyleKey = typeof(ComboBox)
• on ExtendedComboBoxItem: DefaultStyleKey = typeof(ExtendedComboBoxItem)