如何添加垂直分离器？

小开

在过去，我使用的风格发现给你

<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给你或给你之间的区别

小开

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

长方形完成了这项工作:

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

小开

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

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

如果您想要一个水平分隔符，将 StackPanel的 Orientation改为 Vertical。

小开

来自 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:

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

线。拉伸设置为填充。
对于水平线，线的垂直对齐设置为底部，对于垂直线，水平对齐设置为右。

然后，我们需要告诉行要跨越多少行或多少列，这是通过绑定到 RowDefinition 或 ColumnDefinition 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}"/>

小开

这是一个非常简单的方法，没有任何功能和所有的视觉效果,

使用一个网格，然后简单地定制它。

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

只是另一种方式。

小开

我喜欢用“ 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 = 所需行高)

我使用“边距”在垂直线的任何一边添加填充。在这个例子中，在左边有5个像素，在垂直线的右边有10个像素。

由于 line 控件允许您选择直线开始和结束的 x 和 y 坐标，因此您也可以将其用于水平直线和中间任意角度的直线。

小开

我是这样做的:

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

小开

立式分离器

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

水平分离器水平分离器

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

小开

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

小开

现在每个人都应该很清楚，让 WPF 分离器看起来是垂直的是非常困难的。

默认情况下，分隔符是水平的，它没有 Orientation属性，并且它不接受放置在面向水平的 StackPanel中的任何提示。

事实上，让分离器看起来是垂直的非常困难，许多答案建议使用 Rectangle或 Line而不是 Separator，这是不酷的，它承认失败。

一个答案建议使用 ToolBar.SeparatorStyleKey，它已经存在并且完成了工作。但是，我并不特别喜欢这个解决方案，因为我希望在与工具栏无关的地方使用分隔符，所以在这些上下文中提到工具栏是一种转移注意力的做法。

另一个答案建议使用角度为90度的 RotateTransform，这也可以，但是必须设置 Width属性以指定分隔符的高度，我不喜欢这样做。

因此，我所做的就是获取工具栏分隔符样式的源代码，并将其剥离到能够完成工作的最小值。我完全不明白为什么下面的咒语能达到预期的效果，但它确实能:

<Style x:Key="VerticalSeparatorStyle" TargetType="Separator">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Separator">
<Border Background="{TemplateBinding Panel.Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

使用方法如下:

<Separator Width="1" Margin="10 3 10 3" Background="Black" Style="
{StaticResource VerticalSeparatorStyle}" />

(这就是 WPF 的故事: 它是用魔法咒语编程的。)

小开

只是另一种做垂直分离器的方法。

<GridSplitter Width="3" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns" />

它还提供调整列和行的大小。