CODEWITHSUNDEEP
wpfxamlcolorsseparator
Nam G VU
Nam G VU

Reputation: 35384

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

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

Upvotes: 31

Views: 29558

Answers (5)

code4life
code4life

Reputation: 15794

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>

Upvotes: 23

sadovecki
sadovecki

Reputation: 141

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

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

NOTE that the BorderThickness property must be applied too.

Upvotes: 13

throop77
throop77

Reputation: 827

You can set the Background:

<Separator Background="Red"/>

Upvotes: 78

Deruijter
Deruijter

Reputation: 2159

Alternatively you could choose to use a Rectangle element:

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

It's somewhat easier to modify/shape.

Upvotes: 9

rudigrobler
rudigrobler

Reputation: 17133

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?

Upvotes: 17

Related Questions