如何添加垂直分隔符？

Posted 2023-02-15

【中文标题】如何添加垂直分隔符？

【英文标题】：How to add a vertical Separator?

【发布时间】：2012-11-15 02:51:38

【问题描述】：

我想在网格中添加垂直分隔符，但我只能找到水平分隔符。 是不是有一个Property，分隔符的线是横还是竖可以输入？

我搜索了很多，但没有找到一个简短而简单的解决方案。

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

【问题讨论】：

你不能只使用样式化的Rectangle吗？

可行，但不是我想要的。分隔符应该是执行此操作的控件。一定有办法^^

我想我现在实际上在使用 Rectangle，即使我不喜欢它

Border 也可以是一个解决方案..

这能回答你的问题吗？ A vertical Separator control in a Menu, Toolbar, StackPanel, etc. - Is it possible?

【参考方案1】：

这应该正是作者想要的：

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

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

【讨论】：

在我的情况下，分隔符上只需要样式，而不是封闭的 StackPanel。

我一直实现RenderTransform。要记住的简洁快捷方式:)

应该是答案，这是最好的。不知道为什么显示为第三个答案！

在MenuItems 之间的水平和垂直Menu 也能完美运行。总是很好地拉伸以匹配菜单的高度/宽度。

【参考方案2】：

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

矩形做的工作：

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

【讨论】：

这在 UWP 中效果很好。如果您需要更细的线条，请使用填充而不是描边颜色并将宽度设置为 3：<Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />

【参考方案3】：

过去我使用过here找到的样式

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

【讨论】：

听起来不错。但是，它并没有太大变化。我仍然无法将控件停靠在 vs2012 的 gui-designer 中。可能是 vs2012 中的错误？

@MartinWeber 我不确定你所说的“对接”VS中的控件是什么意思。您的分隔符托管在哪种类型的面板中？如果它是DockPanel，您应该能够将DockPanel.Dock 上的Separator 设置到您希望它停靠的任何一侧。使用 WPF，托管控件的面板通常确定控件的位置，有时甚至确定默认大小。如果您不熟悉 WPF 的布局，我建议您阅读这篇文章：WPF Layouts - A Visual Quick Start

感谢您的链接！我会读那个。是的，我是 WPF 的新手。我的意思是“停靠”，当我将一个控件拖到另一个控件附近时，我会看到一条红线，这样一行中的所有控件实际上都在一行上。只是vs2012的帮手。当我旋转分隔符时，我不再得到这些行了。

@MartinWeber 抱歉，我无法为您提供更多帮助 - 我使用 VS2010，通常根本不使用拖放设计器，因为我经常发现它不需要并且不喜欢维护 XMAL我认为它会产生混乱:) 你可能会更幸运地专门为你的 Visual Studio 设计器问题创建一个新问题，因为这里的这个问题似乎更关注如何制作垂直分隔符

感谢您的提示。我将在没有 Designer 的情况下尝试 XAML，并将阅读一些教程。也许如果我对事物有更好的理解，我会自己解决问题；）

【参考方案4】：

我喜欢使用“线”控件。它使您可以精确控制分隔符的开始和结束位置。虽然它不完全是一个分隔符，但它的功能是相同的，尤其是在 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 坐标，因此您也可以将它用于水平线和中间任意角度的线。

【参考方案5】：

垂直分隔符

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

水平分隔符

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

【讨论】：

又好又简单！

【参考方案6】：

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

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

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

只是另一种方式。

【讨论】：

好极了！！！！以这种方式解决它，但同样的想法：<Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/>

【参考方案7】：

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

分隔符默认是水平的，没有Orientation属性，放在水平方向的StackPanel中也不会有任何提示。

事实上，使分隔符看起来垂直是非常困难的，以至于许多答案建议使用Rectangle 或Line 而不是Separator，这很不酷，而且它承认失败。

One answer 建议使用 ToolBar.SeparatorStyleKey，它已经存在并且可以完成这项工作。但是，我并不是特别喜欢这种解决方案，因为我想在与工具栏无关的地方使用分隔符，因此在这些情况下提及工具栏是一种红鲱鱼。

Another answer 建议使用 90 度角的RotateTransform，这也可以，但是您必须设置Width 属性才能指定分隔符的高度，我不喜欢这样。

所以，我所做的是获取 ToolBar 分隔符样式的来源，并将其剥离到完成这项工作的最低限度。我完全不清楚为什么以下魔法咒语会达到预期的效果，但确实如此：

<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 的故事：它是通过魔法来编程的。）

【参考方案8】：

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

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

Line.Stretch 设置为填充。

对于水平线，行的 VerticalAlignment 设置为 Bottom，对于 VerticalLines，Horizo​​ntalAlignment 设置为 Right。

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

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

【参考方案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>

【参考方案10】：

我是这样做的：

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

【讨论】：

简单实用；如果它在上下文中看起来不错，我认为这没有什么问题？