[wpf] How to add a vertical Separator?

I want to add a vertical Separator to a Grid, but i can only find the horizontal. Isn't there a Property, where you can enter if the line of the separator should be horizontal or vertical?

I searched a lot, but didn't find a short and easy solution to this.

I use .Net Framework 4.0 and Visual Studio Ultimate 2012.

If I try to rotate the horizontal Separator by 90 degrees, it loses the ability to "dock" to other Components.

The rotated separator looks like this:

<Separator HorizontalAlignment="Left" Height="100" Margin="264,26,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5">
    <Separator.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="90"/>
            <TranslateTransform/>
        </TransformGroup>
    </Separator.RenderTransform>
</Separator>

Here is how I did it:

<TextBlock Margin="0,-2,0,0">|</TextBlock>

<Style x:Key="MySeparatorStyle" TargetType="{x:Type Separator}">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
                <Setter Property="Margin" Value="10,0,10,0"/>
                <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="20" 
                                  Width="3" 
                                  SnapsToDevicePixels="true"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

use

<StackPanel  Orientation="Horizontal"  >
       <TextBlock>name</TextBlock>
           <Separator Style="{StaticResource MySeparatorStyle}" ></Separator>
       <Button>preview</Button>
 </StackPanel>

This is a very simple way of doing it with no functionality and all visual effect,

Use a grid and just simply customise it.

<Grid Background="DodgerBlue" Height="250" Width="1" VerticalAlignment="Center" Margin="5,0,5,0"/>

Just another way to do it.

From http://social.msdn.microsoft.com/Forums/vstudio/en-US/12ead5d4-1d57-4dbb-ba81-bc13084ba370/how-can-i-add-a-line-as-a-visual-separator-to-the-content-control-like-grid?forum=wpf:

Try this example and see if it fits your needs, there are three main aspects to it.

1. Line.Stretch is set to fill.

2. For horizontal lines the VerticalAlignment of the line is set Bottom, and for VerticalLines the HorizontalAlignment is set to Right.

3. We then need to tell the line how many rows or columns to span, this is done by binding to either RowDefinitions or ColumnDefintions count property.

   
   
   

       <Style x:Key="horizontalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}">  
           <Setter Property="X2" Value="1" /> 
           <Setter Property="VerticalAlignment" Value="Bottom" /> 
           <Setter Property="Grid.ColumnSpan" 
                   Value="{Binding   
                               Path=ColumnDefinitions.Count,  
                               RelativeSource={RelativeSource AncestorType=Grid}}"/> 
       </Style> 
   
       <Style x:Key="verticalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}">  
           <Setter Property="Y2" Value="1" /> 
           <Setter Property="HorizontalAlignment" Value="Right" /> 
           <Setter Property="Grid.RowSpan"   
                   Value="{Binding   
                               Path=RowDefinitions.Count,  
                               RelativeSource={RelativeSource AncestorType=Grid}}"/> 
       </Style> 
   </Grid.Resources>        
   
   <Grid.RowDefinitions> 
       <RowDefinition Height="20"/>  
       <RowDefinition Height="20"/>  
       <RowDefinition Height="20"/>  
       <RowDefinition Height="20"/>  
   </Grid.RowDefinitions> 
   
   <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="20"/>  
       <ColumnDefinition Width="20"/>  
       <ColumnDefinition Width="20"/>  
       <ColumnDefinition Width="20"/>  
   </Grid.ColumnDefinitions> 
   
   <Line Grid.Column="0" Style="{StaticResource verticalLineStyle}"/>  
   <Line Grid.Column="1" Style="{StaticResource verticalLineStyle}"/>  
   <Line Grid.Column="2" Style="{StaticResource verticalLineStyle}"/>  
   <Line Grid.Column="3" Style="{StaticResource verticalLineStyle}"/>  
   
   <Line Grid.Row="0" Style="{StaticResource horizontalLineStyle}"/>  
   <Line Grid.Row="1" Style="{StaticResource horizontalLineStyle}"/>  
   <Line Grid.Row="2" Style="{StaticResource horizontalLineStyle}"/>  
   <Line Grid.Row="3" Style="{StaticResource horizontalLineStyle}"/>  
   

This should do exactly what the author wanted:

<StackPanel Orientation="Horizontal">
    <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />            
</StackPanel>

if you want a horizontal separator, change the Orientation of the StackPanel to Vertical.

Vertical separator

<Rectangle VerticalAlignment="Stretch" Fill="Blue" Width="1"/>

horizontal separator

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

In the past I've used the style found here

<Style x:Key="VerticalSeparatorStyle" 
       TargetType="{x:Type Separator}"
       BasedOn="{StaticResource {x:Type Separator}}">
    <Setter Property="Margin" Value="6,0,6,0"/>
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <TransformGroup>
                <TransformGroup.Children>
                    <TransformCollection>
                        <RotateTransform Angle="90"/>
                    </TransformCollection>
                </TransformGroup.Children>
            </TransformGroup>
        </Setter.Value>
    </Setter>
</Style>

<Separator Style="{DynamicResource VerticalSeparatorStyle}" />

You need to set the transformation in LayoutTransform instead of RenderTransform so the transformation occurs during the Layout pass, not during the Render pass. The Layout pass occurs when WPF is trying to layout controls and figure out how much space each control takes up, while the Render pass occurs after the layout pass when WPF is trying to render controls.

You can read more about the difference between LayoutTransform and RenderTransform here or here

This is not exactly what author asked, but still, it is very simple and works exactly as expected.

Rectangle does the job:

<StackPanel Grid.Column="2" Orientation="Horizontal">
    <Button >Next</Button>
    <Button >Prev</Button>
    <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Black" />
    <Button>Filter all</Button>
</StackPanel>

I like to use the "Line" control. It gives you exact control over where the separator starts and ends. Although it isn't exactly a separator, it functions is the same way, especially in a StackPanel.

The line control works within a grid too. I prefer to use the StackPanel because you don't have to worry about different controls overlapping.

<StackPanel Orientation="Horizontal">
    <Button Content="Button 1" Height="20" Width="70"/>
    <Line X1="0" X2="0" Y1="0" Y2="20" Stroke="Black" StrokeThickness="0.5" Margin="5,0,10,0"/>
    <Button Content="Button 2" Height="20" Width="70"/>
</StackPanel>

X1 = x starting position (should be 0 for a vertical line)

X2 = x ending position (X1 = X2 for a vertical line)

Y1 = y starting position (should be 0 for a vertical line)

Y2 = y ending position (Y2 = desired line height)

I use "margin" to add padding on any side of the vertical line. In this instance, there are 5 pixels on the left and 10 pixels on the right of the vertical line.

Since the line control lets you pick the x and y coordinates of the start and end of the line, you can also use it for horizontal lines and lines at any angle in between.