How to change the color of the a WPF `<Separator />`?

Question

I use <Separator /> in my form but don't know how to change its color. None of Border /Foreground/Background does exist. Plese help.

Solution 1

Use styles

    <Style x:Key="MySeparatorStyle" 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 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}" 
                        Height="1" 
                        SnapsToDevicePixels="true"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

A seperator is just a border element and now you can change its appearance any way you like?

Solution 2

You can set the Background:

<Separator Background="Red"/>

Solution 3

Hmm... I think the Separator is one of the few elements that will not work using a simple style. Based on the MSDN documentation, you need to specify the SeparatorStyleKey.

For instance for a ToolBar you would do this:

<Style x:Key="{x:Static ToolBar.SeparatorStyleKey}" 
    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 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}" 
                    Height="1" 
                    SnapsToDevicePixels="true"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Solution 4

you can set the Separator's color using this code:

<Separator BorderBrush="Red" BorderThickness="1"/>

NOTE that the BorderThickness property must be applied too.

Solution 5

Alternatively you could choose to use a Rectangle element:

<Rectangle HorizontalAlignment="Stretch" Fill="Blue" Height="2"/>

It's somewhat easier to modify/shape.

View more solutions