Changing background color of a separator in WPF data bound combo box

Question

I have a combobox that is bound to a dataset that then uses a datatrigger to insert a separator when it encounters a '-' in the data (example in this question).

The background of the menu has custom color, set by using a resource dictionary. The color in this case is #FFF8F4C5

If I add a separator to a non databound simple combo box, it appears correctly. But when adding it using the datatrigger, it does not look like the rest of the menu, as you can see below (it has a white background).

If I set the background of the separator, it actually changes the darker line to whatever color. I can't seem to find how to change the white area to match the same color as the menu.

Answer 1

In the ControlTemplate, enclose the Separator in a Border with Background bound to to the parent ComboBoxItem's Background. Something like this:

<ControlTemplate TargetType="{x:Type ComboBoxItem}">
    <Border Background="{TemplateBinding Background}">
        <Separator HorizontalAlignment="Stretch" IsEnabled="False"/>
    </Border>
</ControlTemplate>

Answer 2

use a separator style:

<Style x:Key="SeparatorStyle1" TargetType="{x:Type Separator}">
    <Setter Property="Background" Value="{DynamicResource 
        {x:Static SystemColors.ControlDarkBrushKey}}"/>
    <Setter Property="Margin" Value="0,2,0,2"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Separator}">
                <Border Height="1" SnapsToDevicePixels="true" 
              Background="#FFCCD480" BorderBrush="#FF633A3A" BorderThickness="0,0,0,1"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and use it like this

<ComboBox Background="#FFD2D2B5">
  <ListBoxItem Content="item1"/>
  <ListBoxItem Content="item2"/>
  <Separator Style="{DynamicResource SeparatorStyle1}"/>
  <ListBoxItem Content="item3"/>

That should do it