¿Cómo agregar un separador vertical?

Quiero agregar un separador vertical a una cuadrícula, pero solo puedo encontrar el horizontal. ¿No hay una Propiedad, donde puede ingresar si la línea del separador debe ser horizontal o vertical?

Busqué mucho, pero no encontré una solución corta y fácil para esto.

Utilizo .Net Framework 4.0 y Visual Studio Ultimate 2012.

Si trato de rotar el Separador horizontal en 90 grados, pierde la capacidad de "acoplarse" a otros Componentes.

El separador girado se ve así:

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

Esto debería hacer exactamente lo que el autor quería:

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

si desea un separador horizontal, cambie el Orientationde StackPanela Vertical.

Esto no es exactamente lo que preguntó el autor, pero aún así, es muy simple y funciona exactamente como se esperaba.

El rectángulo hace el trabajo:

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

En el pasado he usado el estilo que se encuentra aquí.

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

Debe establecer la transformación en LayoutTransformlugar de RenderTransformque la transformación se produzca durante el pase de Diseño, no durante el pase de Render. La pasada de diseño se produce cuando WPF está intentando diseñar controles y averiguar cuánto espacio ocupa cada control, mientras que la pasada de representación se produce después de la pasada de diseño cuando WPF intenta representar los controles.

Puede leer más sobre la diferencia entre LayoutTransformy RenderTransform aquí o aquí.

Me gusta usar el control "Línea". Le da un control exacto sobre dónde comienza y termina el separador. Aunque no es exactamente un separador, funciona de la misma manera, especialmente en un StackPanel.

El control de línea también funciona dentro de una cuadrícula. Prefiero usar StackPanel porque no tiene que preocuparse por la superposición de diferentes controles.

<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 posición inicial (debe ser 0 para una línea vertical)

X2 = x posición final (X1 = X2 para una línea vertical)

Y1 = y posición inicial (debe ser 0 para una línea vertical)

Y2 = posición final y (Y2 = altura de línea deseada)

Utilizo "margen" para agregar relleno en cualquier lado de la línea vertical. En este caso, hay 5 píxeles a la izquierda y 10 píxeles a la derecha de la línea vertical.

Dado que el control de línea le permite elegir las coordenadas xey del inicio y el final de la línea, también puede usarlo para líneas horizontales y líneas en cualquier ángulo intermedio.

Esta es una forma muy sencilla de hacerlo sin funcionalidad y todo efecto visual,

Use una cuadrícula y simplemente personalícela.

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

Solo otra forma de hacerlo.

Separador vertical

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

separador horizontal

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

De http://social.msdn.microsoft.com/Forums/vstudio/en-US/12ead5d4-1d57-4dbb-ba81-bc13084ba370/how-can-i-add-a-line-as-a-visual-separator -a-la-cuadrícula-como-control-de-contenido? forum = wpf :

Pruebe este ejemplo y vea si se ajusta a sus necesidades, hay tres aspectos principales.

1. Line.Stretch está configurado para llenar.

2. Para las líneas horizontales, la alineación vertical de la línea se establece en la parte inferior, y para las líneas verticales, la alineación horizontal se establece en la derecha.

3. Luego, necesitamos decirle a la línea cuántas filas o columnas deben abarcar, esto se hace enlazando a la propiedad de conteo RowDefinitions o 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}"/>  
   

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

utilizar

<StackPanel  Orientation="Horizontal"  >
       <TextBlock>name</TextBlock>
           <Separator Style="{StaticResource MySeparatorStyle}" ></Separator>
       <Button>preview</Button>
 </StackPanel>

Así es como lo hice:

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