How to add a vertical Separator?

Question

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>

Answer 1

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.

Answer 2

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>

Answer 3

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

Answer 4

Vertical separator

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

horizontal separator

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

Answer 5

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.

Answer 6

As it should be clear to everyone by now, it is astonishingly difficult to make a WPF separator look vertical.

The separator is horizontal by default, it has no Orientation attribute, and it does not take any hint from being placed in a horizontally-oriented StackPanel.

As a matter of fact, it is so difficult to make the separator look vertical, that many answers suggest using a Rectangle or a Line instead of a Separator, which is uncool and it admits defeat.

One answer suggests using the ToolBar.SeparatorStyleKey, which already exists and does the job. However, I do not particularly like this solution, because I want to use my separator in places that have nothing to do with toolbars, so mentioning a toolbar in those contexts is a red herring.

Another answer suggests using RotateTransform with an angle of 90 degrees, which also works, but then you have to set the Width attribute in order to specify the height of the separator, and I do not like this.

So, what I did was to get the source of the ToolBar Separator Style and strip it down to the bare minimum that does the job. It is entirely unclear to me why the following magical incantation achieves the desired result, but it does:

<Style x:Key="VerticalSeparatorStyle" TargetType="Separator">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Separator">
                <Border Background="{TemplateBinding Panel.Background}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Use as follows:

<Separator Width="1" Margin="10 3 10 3" Background="Black" Style="
    {StaticResource VerticalSeparatorStyle}" />

(This is how the story goes with WPF: it is programming by magical incantations.)

Answer 7

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.

Answer 8

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}"/>  
   

Answer 9

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

Answer 10

Just another way to do a vertical separator.

<GridSplitter Width="3" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns" />

It also offers resizing columns and rows.

Answer 11

From all the above methods, by favorite is the one posted by Mohimenul Joaa, because it's very simple, and yet flexible. IMHO, you shouldn't need multiple lines of code just to add once separator.

[Beginners] FYI: When using this method, use Margin to place it in the exact position.

<Rectangle Margin="-60,0,0,0" VerticalAlignment="Stretch" Fill="Gray" Width="2"/>

Use a negative number to move it to the left from center. Use positive number to move it to the right from center.

Answer 12

Here is how I did it:

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