如何添加垂直分隔线？

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>

- Martin Weber

---

你不能只使用一个样式化的 Rectangle 吗？ - paul

那个可以工作，但不是我想要的。分隔符应该是控制这个的方式。一定有办法的 ^^ - Martin Weber

我现在认为实际上我使用矩形，即使我不喜欢它。 - Martin Weber

“边框”也可以是一种解决方案。 - Mangesh

这个回答解决了你的问题吗？在菜单、工具栏、StackPanel等中使用垂直分隔符控件，是否可能？ - Mike Nakis

Answer 1

这应该正好符合作者的意图：

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

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

- Emmanuel Romulus

---

在我的情况下，只需要在分隔符上应用样式，而不是在包含的 StackPanel 上。 - Xtr

我一直都使用 RenderTransform。记住这个简便方法 :) - Ashley Grenon

应该是一个答案，这是最好的。不确定为什么显示为第三个答案！ - Tatranskymedved

在水平和垂直的Menu之间以及MenuItem之间都能完美地工作。始终会很好地拉伸以匹配菜单的高度/宽度。 - natiiix

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>

- Anton

---

这在UWP中非常有用。如果您需要更细的线条，请改用填充颜色并将宽度设置为3：<Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" /> - Anthony Nichols

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之间差异的信息或此处

- Rachel

---

听起来不错。然而，它并没有改变太多。我仍然无法在vs2012的GUI设计器中停靠控件。也许是vs2012的一个Bug？ - Martin Weber

@MartinWeber 我不确定您所说的“停靠”控件在VS中是什么意思。您的分隔符托管在哪种类型的面板中？如果是DockPanel，则应该能够设置Separator的DockPanel.Dock属性，以将其停靠到所需的任何一侧。在WPF中，托管控件的面板通常确定控件的位置，有时甚至确定默认大小。如果您是WPF布局的新手，我建议阅读本文：WPF Layouts - A Visual Quick Start。 - Rachel

谢谢提供链接！我会阅读的。是的，我对WPF还很陌生。 “停靠”指的是当我将控件拖到另一个控件附近时，会出现一条红线，以便所有位于同一行上的控件实际上在同一行上。这只是来自vs2012的帮助器。当我旋转分隔符时，我就不会再看到这些线了。 - Martin Weber

@MartinWeber 对不起，我帮不了你更多了 - 我使用的是VS2010，通常根本不使用拖放设计器，因为我经常发现它是不必要的，并且不喜欢维护它生成的XMAL混乱代码 :) 你为你的Visual Studio设计器问题创建一个新问题可能会有更好的运气，因为这个问题似乎更专注于如何制作垂直分隔线。 - Rachel

谢谢你的建议。我会尝试不使用设计师来编写XAML，并阅读一些教程。也许如果我对事情有更好的理解，我就能自己解决问题 ;) - Martin Weber

Answer 4

垂直分隔线

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

水平分隔线

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

- Mohimenul Joaa

---

简单易用！ - StayOnTarget

我喜欢这种方法。它简单而灵活。 - David Maisonave

Answer 5

我喜欢使用“Line”控件。它可以精确控制分隔符的开始和结束位置，虽然它本身不是分隔符，但在StackPanel中它的功能相同。

Line控件也适用于Grid。我更喜欢使用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坐标，因此您也可以将其用于水平线和介于两者之间的任何角度的线。

- Kevin K

Answer 6

现在对于每个人来说都很明显，让 WPF 分割线看起来垂直非常困难。

分隔符默认是水平的，它没有 Orientation 属性，并且不会从放置在水平定向的 StackPanel 中获取任何提示。

事实上，让分隔符看起来垂直如此困难，以至于许多答案建议使用 Rectangle 或者 Line 代替 Separator，这不够酷也是一种失败的表现。

一个答案 建议使用 ToolBar.SeparatorStyleKey，已经存在并且能够完成任务。然而，我并不特别喜欢这个解决方案，因为我想在与工具栏无关的场所中使用我的分隔符，所以在那些情况下提到工具栏是转移话题。

另一个答案建议使用90度的RotateTransform，这也可以实现，但是您需要设置Width属性以指定分隔符的高度，我不喜欢这样。

所以，我做的是获取ToolBar Separator Style的源代码，并将其削减到最少的可行程度。我完全不清楚以下神奇的咒语为什么能够实现所需的结果，但它确实可以：

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

Use as follows:

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

（以下是WPF的故事：它是通过神秘的咒语进行编程的。）

- Mike Nakis

Answer 7

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

使用网格并简单地自定义它。

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

另一种实现方式。

- Connor Mcgrann

---

太好了！！！我是这样解决的，但是同样的思路：<Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/> - Anthony Nichols

Answer 8

另一种实现垂直分隔符的方法。

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

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

- pandukt

Answer 9

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

- hyperneu

Answer 10

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

尝试这个示例，看看它是否符合您的需求，它有三个主要方面。

1. Line.Stretch设置为fill。

2. 对于水平线，线的VerticalAlignment设置为Bottom，对于垂直线，HorizontalAlignment设置为Right。

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

   
   
   

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

- VoteCoffee