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>

Shiver

can't you just use a styled Rectangle? – Layla

that works, but isn't what i want. the separator should be the control to do this with. there has to be a way ^^ – Shiver

I think i actually use the Rectangle now, even if i don't like it – Shiver

Border can also be a solution.. – Ripieno

Does this answer your question? A vertical Separator control in a Menu, Toolbar, StackPanel, etc. - Is it possible? – Contrary

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.

Freak

In my case only the style was needed on the separator, not the enclosing StackPanel. – Janayjanaya

I've always implemented a RenderTransform. Neat shortcut to remember :) – Peel

Should be an answer, this si the best. Not sure why showing as 3rd answer! – Hizar

Works perfectly well in both horizontal and vertical Menu between MenuItems as well. Always nicely stretches to match the height/width of the menu. – Oskar

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>

Auckland

This works great in UWP. If you need a thinner line use Fill instead of Stroke color and set the width to 3: <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" /> – Oblast

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

Turbulence

That sounds great. However, it doesn't change that much. I still can't dock the controls in the gui-designer of vs2012. Maybe a Bug in vs2012? – Shiver

@MartinWeber I'm not sure what you mean by "docking" the control in VS. What type of panel is your separator hosted in? If it's a DockPanel, you should be able to set DockPanel.Dock on your Separator to whatever side you want it docked to. With WPF, the panel hosting the control usually determines the control's position and sometimes even default size. If you're new to WPF's layouts, I would recommend reading through this article: WPF Layouts - A Visual Quick Start – Turbulence

Thanks for the link! I will read that. Yes i am new to WPF. With "Docking" i meant, when i drag a control near another i get a red line so that all controls in one line are actually on one line. just a helper from vs2012. when i rotate the separator, i don't get these lines anymore. – Shiver

@MartinWeber Sorry I can't help you more - I use VS2010 and don't normally use the drag/drop designer at all as I often find it unneeded and don't like to maintain the XMAL mess I think it generates :) You would probably have better luck creating a new question specifically for your Visual Studio designer problem, as this question here seems more focused on how to make a vertical separator – Turbulence

Thank you for your Tips. I'll try XAML without Designer and will read some Tutorials. Maybe if i get a better understanding of things i will solve the problem myself ;) – Shiver

Answer 4

Vertical separator

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

horizontal separator

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

Kulun

Nice and simple! – Ladyinwaiting

I love this method. It's simple, yet still flexible. – Billfold

To have a 1px line, set width or height to 0.5 – Progenitor

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.

Katykatya

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

Contrary

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.

Ardellearden

Excellent!!!! Solved it this way, but same idea: <Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/> – Oblast

Answer 8

This is basic:

<Border Height="28" Width="2" Background="WhiteSmoke" BorderThickness="1 0 0 0" BorderBrush="#ABADB3" Margin="10 5 5 5"/>

Wanids

Answer 9

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

Longcloth

Answer 10

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

Shreeves

Answer 11

Just another way to do a vertical separator.

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

It also offers resizing columns and rows.

Cosmopolite

Answer 12

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.

Billfold

Answer 13

Here is how I did it:

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

Caravansary

Simple and practical; if it looks good in context I don't see anything wrong with this? – Ladyinwaiting