2

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).

white background on separator

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.

Community
  • 1
  • 1
jmlumpkin
  • 922
  • 2
  • 14
  • 34

2 Answers2

2

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>
ASanch
  • 10,233
  • 46
  • 32
  • 1
    Actually it is mainly because the Separator apparently has a default Margin that is not zero. So without the border, the background color for the popup menu will be visible. (Actually, if you just set the Separator's Margin to zero, you also won't see the white background. Though the spacing between items may be a little bit off). Putting a border will effectively "hide" the popup menu's background. Hope this makes sense. – ASanch Nov 24 '10 at 17:24
1

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

Dean Chalk
  • 20,076
  • 6
  • 59
  • 90
  • I tried this before when first looking for an answer, and while it did let me change a few things, the way I am using the separator wouldn't work this way. – jmlumpkin Nov 24 '10 at 16:44