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    lt Separator HorizontalAlignment  Left  Height  100  Margin  264 26 0 0  VerticalAlignment  Top  Width  100  RenderTransformOrigin  0 5 0 5  gt       lt Separator RenderTransform gt           lt TransformGroup gt               lt ScaleTransform  gt               lt SkewTransform  gt               lt RotateTransform Angle  90   gt               lt TranslateTransform  gt           lt  TransformGroup gt       lt  Separator RenderTransform gt   lt  Separator gt

User · Answer

lt Style x Key  MySeparatorStyle  TargetType   x Type Separator   gt                   lt Setter Property  Background  Value   DynamicResource  x Static SystemColors ControlDarkBrushKey     gt                   lt Setter Property  Margin  Value  10 0 10 0   gt                   lt Setter Property  Focusable  Value  false   gt                   lt Setter Property  Template  gt                       lt Setter Value gt                           lt ControlTemplate TargetType   x Type Separator   gt                               lt Border                                    BorderBrush   TemplateBinding BorderBrush                                      BorderThickness   TemplateBinding BorderThickness                                      Background   TemplateBinding Background                                      Height  20                                     Width  3                                     SnapsToDevicePixels  true   gt                           lt  ControlTemplate gt                       lt  Setter Value gt                   lt  Setter gt               lt  Style gt    use   lt StackPanel  Orientation  Horizontal    gt          lt TextBlock gt name lt  TextBlock gt              lt Separator Style   StaticResource MySeparatorStyle    gt  lt  Separator gt          lt Button gt preview lt  Button gt    lt  StackPanel gt

User · Answer

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    Line Stretch is set to fill  For horizontal lines the VerticalAlignment of the line is set Bottom  and for VerticalLines the HorizontalAlignment is set to Right  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                                                                                           lt Style x Key  horizontalLineStyle  TargetType  Line  BasedOn   StaticResource lineStyle   gt             lt Setter Property  X2  Value  1    gt            lt Setter Property  VerticalAlignment  Value  Bottom    gt            lt Setter Property  Grid ColumnSpan                   Value   Binding                                Path ColumnDefinitions Count                                RelativeSource  RelativeSource AncestorType Grid     gt        lt  Style gt         lt Style x Key  verticalLineStyle  TargetType  Line  BasedOn   StaticResource lineStyle   gt             lt Setter Property  Y2  Value  1    gt            lt Setter Property  HorizontalAlignment  Value  Right    gt            lt Setter Property  Grid RowSpan                     Value   Binding                                Path RowDefinitions Count                                RelativeSource  RelativeSource AncestorType Grid     gt        lt  Style gt    lt  Grid Resources gt            lt Grid RowDefinitions gt        lt RowDefinition Height  20   gt         lt RowDefinition Height  20   gt         lt RowDefinition Height  20   gt         lt RowDefinition Height  20   gt     lt  Grid RowDefinitions gt     lt Grid ColumnDefinitions gt        lt ColumnDefinition Width  20   gt         lt ColumnDefinition Width  20   gt         lt ColumnDefinition Width  20   gt         lt ColumnDefinition Width  20   gt     lt  Grid ColumnDefinitions gt     lt Line Grid Column  0  Style   StaticResource verticalLineStyle    gt     lt Line Grid Column  1  Style   StaticResource verticalLineStyle    gt     lt Line Grid Column  2  Style   StaticResource verticalLineStyle    gt     lt Line Grid Column  3  Style   StaticResource verticalLineStyle    gt      lt Line Grid Row  0  Style   StaticResource horizontalLineStyle    gt     lt Line Grid Row  1  Style   StaticResource horizontalLineStyle    gt     lt Line Grid Row  2  Style   StaticResource horizontalLineStyle    gt     lt Line Grid Row  3  Style   StaticResource horizontalLineStyle    gt

User · Answer

This should do exactly what the author wanted    lt StackPanel Orientation  Horizontal  gt       lt Separator Style   StaticResource  x Static ToolBar SeparatorStyleKey      gt               lt  StackPanel gt    if you want a horizontal separator  change the Orientation of the StackPanel to Vertical

User · Answer

This is a very simple way of doing it with no functionality and all visual effect   Use a grid and just simply customise it    lt Grid Background  DodgerBlue  Height  250  Width  1  VerticalAlignment  Center  Margin  5 0 5 0   gt    Just another way to do it

User · Answer

In the past I ve used the style found here   lt Style x Key  VerticalSeparatorStyle          TargetType   x Type Separator          BasedOn   StaticResource  x Type Separator    gt       lt Setter Property  Margin  Value  6 0 6 0   gt       lt Setter Property  LayoutTransform  gt           lt Setter Value gt               lt TransformGroup gt                   lt TransformGroup Children gt                       lt TransformCollection gt                           lt RotateTransform Angle  90   gt                       lt  TransformCollection gt                   lt  TransformGroup Children gt               lt  TransformGroup gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt    lt Separator Style   DynamicResource VerticalSeparatorStyle     gt    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

User · Answer

Vertical separator   lt Rectangle VerticalAlignment  Stretch  Fill  Blue  Width  1   gt    horizontal separator   lt Rectangle HorizontalAlignment  Stretch  Fill  Blue  Height  4   gt

User · Answer

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    lt StackPanel Orientation  Horizontal  gt       lt Button Content  Button 1  Height  20  Width  70   gt       lt Line X1  0  X2  0  Y1  0  Y2  20  Stroke  Black  StrokeThickness  0 5  Margin  5 0 10 0   gt       lt Button Content  Button 2  Height  20  Width  70   gt   lt  StackPanel gt    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

User · Answer

Here is how I did it    lt TextBlock Margin  0 -2 0 0  gt   lt  TextBlock gt

User · Answer

This is not exactly what author asked  but still  it is very simple and works exactly as expected    Rectangle does the job    lt StackPanel Grid Column  2  Orientation  Horizontal  gt       lt Button  gt Next lt  Button gt       lt Button  gt Prev lt  Button gt       lt Rectangle VerticalAlignment  Stretch  Width  1  Margin  2  Stroke  Black    gt       lt Button gt Filter all lt  Button gt   lt  StackPanel gt

[wpf] How to add a vertical Separator?

Examples related to wpf

Examples related to xaml

Examples related to visual-studio-2012

Examples related to separator