How to add a vertical separator?

Question

I want to add a vertical separator to the grid, but I can only find the horizontal one. Is there a property you can enter into if the separator line should be horizontal or vertical?

I searched a lot, but did not find a short and easy solution for this.

I am using the .NET Framework 4.0 and Visual Studio Ultimate 2012.

If I try to rotate the horizontal divider 90 degrees, it will lose the ability to “dock” with other components.

The spinner divider is as follows:

<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 divider, change Orientation to StackPanel to Vertical .

Answer 2

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

The rectangle performs the task:

 <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 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 to LayoutTransform instead of RenderTransform so that the conversion occurs during the Layout pass, and not during the Render pass. The Layout step occurs when WPF tries to arrange the controls and find out how much space each control takes, while the Render step occurs after the layout step when WPF tries to display the controls.

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

Answer 4

I like to use the Line control. It gives you precise control of where the separator begins and ends. Although this is not exactly a separator, it works the same way, especially in the StackPanel.

Line management also works in a grid. I prefer to use StackPanel because you do not need to worry about overlapping different controls.

 <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 = start position x (should be 0 for a vertical line)

X2 = x end position (X1 = X2 for the vertical line)

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

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

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

Since line management allows you to select the x and y coordinates of the beginning and end of a line, you can also use it for horizontal lines and lines at any angle between them.

Answer 5

This is a very easy way to do this without any features and all the visual effect.

Use the grid and just set it up.

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

Another way to do this.

Answer 6

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 suits your needs, there are three main aspects.

• Line.Stretch is set to fill.

• For horizontal lines, the VerticalAlignment line is set at the bottom, and for VerticalLines, the HorizontalAlignment parameter is set to Right.

• Then we need to tell the row how many rows or columns should be used, this is done by binding to the 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 7

Here is how I did it:

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