如何添加垂直分隔符？

我想将垂直分隔符添加到网格，但是我只能找到水平分隔符。没有属性，如果分隔线是水平还是垂直，您可以在其中输入？

我进行了很多搜索，但没有找到解决此问题的简便方法。

我使用.Net Framework 4.0和Visual Studio Ultimate 2012。

如果我尝试将水平分隔器旋转90度，它将失去“停靠”到其他组件的功能。

旋转的分隔符如下所示：

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

这应该正是作者想要的：

<StackPanel Orientation="Horizontal">
    <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />            
</StackPanel>

如果要使用水平分隔符，请将Orientation的更改StackPanel为Vertical。

这并不完全是作者要求的，但是仍然非常简单，并且可以按预期工作。

矩形完成这项工作：

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

过去我使用这里找到的样式

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

您需要设置转换，LayoutTransform而不是设置转换，RenderTransform因此转换发生在“布局”阶段而不是“渲染”阶段。当WPF尝试对控件进行布局并找出每个控件占用的空间时，将进行Layout传递；而当WPF尝试对控件进行渲染时，将在布局传递之后进行Render传递。

你可以阅读更多有关之间的差异LayoutTransform，并RenderTransform 在此或在这里

我喜欢使用“线”控件。它使您可以精确控制分隔符的开始和结束位置。尽管它不完全是分隔符，但其功能相同，尤其是在StackPanel中。

线控件也可以在网格内工作。我更喜欢使用StackPanel，因为您不必担心不同的控件重叠。

<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起始位置（垂直线应为0）

X2 = x结束位置（对于垂直线，X1 = X2）

Y1 = y起始位置（垂直线应为0）

Y2 = y结束位置（Y2 =所需的行高）

我使用“边距”在垂直线的任何一侧添加填充。在这种情况下，垂直线的左侧有5个像素，右侧有10个像素。

由于线条控件使您可以选择线条起点和终点的x和y坐标，因此还可以将其用于水平线条和介于两者之间的任何角度的线条。

这是一种非常简单的方法，没有任何功能且没有任何视觉效果，

使用网格，只需对其进行自定义即可。

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

只是另一种方式。

垂直分离器

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

水平分离器

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

从http://social.msdn.microsoft.com/Forums/vstudio/en-US/12ead5d4-1d57-4dbb-ba81-bc13084ba370/how-can-i-add-a-line-as-a-visual-separator到类似内容控件的网格？forum = wpf：

试试这个例子，看看它是否适合您的需求，它主要包括三个方面。

1. Line.Stretch设置为填充。

2. 对于水平线，该线的VerticalAlignment设置为Bottom，对于垂直线，Horizo​​ntalAlignment设置为Right。

3. 然后，我们需要告诉该行要跨越多少行或列，这是通过绑定到RowDefinitions或ColumnDefintions count属性来完成的。

   
   
   

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

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

用

<StackPanel  Orientation="Horizontal"  >
       <TextBlock>name</TextBlock>
           <Separator Style="{StaticResource MySeparatorStyle}" ></Separator>
       <Button>preview</Button>
 </StackPanel>

这是我的做法：

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