wpf - ¿Cómo agregar un separador vertical?

xaml visual-studio-2012

Question

Quiero agregar un Separador vertical a una Grilla, pero solo puedo encontrar la 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.

Uso .Net Framework 4.0 y Visual Studio Ultimate 2012.

Si trato de girar el Separador horizontal 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>

Answer 1

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

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

1. Line.Stretch está configurado para llenarse.

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

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

Answer 2

En el pasado, he usado el estilo que se encuentra 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 configurar la transformación en LayoutTransform en lugar de RenderTransform para que la transformación se produzca durante el pase de diseño, no durante la pasada de procesamiento. El pase de diseño ocurre cuando WPF está tratando de diseñar controles y calcular cuánto espacio ocupa cada control, mientras que el pase de renderización ocurre después de que el diseño pase cuando WPF está tratando de representar los controles.

Puede leer más sobre la diferencia entre LayoutTransform y RenderTransform here o here

Answer 3

Esta es una forma muy simple de hacerlo sin funcionalidad y con todo el 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.

Answer 4

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 la Orientation de StackPanel a Vertical .

Answer 5

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

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>

Answer 6

Me gusta usar el control "Line". Le da control exacto sobre dónde comienza y dónde 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 controles diferentes.

<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 = y posición final (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.

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