如何添加垂直分隔符？

Question

我想在网格中添加一个垂直分隔符,但我只能找到水平分隔符.是否有属性,如果分隔符的行应该是水平的还是垂直的,您可以在哪里输入？

我搜索了很多,但没有找到一个简短的解决方案.

我使用.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>

Answer 1

这应该完全符合作者的要求:

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

如果你想有一个横向分隔,改变Orientation的StackPanel到Vertical.

Answer 2

这不完全是作者所要求的,但它仍然非常简单并且完全符合预期.

Rectangle完成这项工作:

<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

在过去,我使用了这里找到的风格

<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尝试布局控件并确定每个控件占用多少空间时,会发生布局传递,而当WPF尝试渲染控件时,布局传递后会发生渲染传递.

您可以阅读之间更多的差异LayoutTransform和RenderTransform 这里或点击这里

Answer 4

我喜欢使用"Line"控件.它可以精确控制分隔符的开始和结束位置.虽然它不完全是分隔符,但它的功能是相同的,特别是在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 =所需的线高)

我使用"margin"在垂直线的任何一侧添加填充.在这种情况下,左边有5个像素,垂直线右边有10个像素.

由于线控制允许您选择线的起点和终点的x和y坐标,因此您也可以将它用于水平线和线之间的任何角度.

Answer 5

垂直分隔符

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

水平分隔符

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