Как добавить вертикальный разделитель?

Ответ 1

Это должно делать именно то, что хотел автор:

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

если вы хотите горизонтальный разделитель, измените Orientation на StackPanel на Vertical.

Ответ 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>

Ответ 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 чтобы преобразование происходило во время прохода Layout, а не во время прохода Render. Этап Layout происходит, когда WPF пытается расположить элементы управления и выяснить, сколько места занимает каждый элемент управления, в то время как этап Render происходит после этапа размещения, когда WPF пытается отобразить элементы управления.

Вы можете прочитать больше о разнице между LayoutTransform и RenderTransform здесь или здесь

Ответ 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 = желаемая высота линии)

Я использую "margin" для добавления отступов на любой стороне вертикальной линии. В этом случае есть 5 пикселей слева и 10 пикселей справа от вертикальной линии.

Так как управление линиями позволяет вам выбирать координаты x и y начала и конца строки, вы также можете использовать ее для горизонтальных линий и линий под любым углом между ними.

Ответ 5

Это очень простой способ сделать это без каких-либо функций и всего визуального эффекта,

Используйте сетку и просто настройте ее.

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

Еще один способ сделать это.

Ответ 6

Из 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 линии устанавливается снизу, а для VerticalLines для параметра HorizontalAlignment установлено значение Right.

• Затем нам нужно указать строке, сколько строк или столбцов следует использовать, это делается путем привязки к свойству 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}"/>  
  

Ответ 7

Вот как я это сделал:

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