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>

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

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

Solution 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

Solution 4

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.

Solution 5

Vertical separator

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

horizontal separator

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

View more solutions

Comments

[Martin Weber]

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?

[Rachel]

@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

[Martin Weber]

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.

[Rachel]

@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

[Martin Weber]

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

[Anthony Nichols]

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

[Xtr]

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

[Ashley Grenon]

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

[Anthony Nichols]

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

[Tatranskymedved]

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

[natiiix]

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

[StayOnTarget]

Nice and simple!

[StayOnTarget]

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