¿Cómo agregar un separador vertical?


113

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>

3
¿No puedes usar un estilo Rectangle?
paul

1
eso funciona, pero no es lo que quiero. el separador debe ser el control para hacer esto. tiene que haber una manera ^^
Martin Weber

Creo que ahora uso el rectángulo, incluso si no me gusta
Martin Weber

1
Bordertambién puede ser una solución ..
Mangesh

Respuestas:


192

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.


4
En mi caso, solo se necesitaba el estilo en el separador, no el StackPanel adjunto.
Xtr

Siempre he implementado un RenderTransform. Atajo ordenado para recordar :)
Ashley Grenon

3
Debería ser una respuesta, esta es la mejor. ¡No estoy seguro de por qué se muestra como la tercera respuesta!
Tatranskymedved

Funciona perfectamente bien tanto en horizontal como en vertical Menuentre MenuItems también. Siempre se estira agradablemente para que coincida con la altura / ancho del menú.
natiiix

50

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>

2
Esto funciona muy bien en UWP. Si necesita una línea más delgada, use Relleno en lugar de Color de trazo y establezca el ancho en 3: <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />
Anthony Nichols

25

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


Eso suena genial. Sin embargo, no cambia mucho. Todavía no puedo acoplar los controles en el diseñador de interfaz gráfica de usuario de vs2012. ¿Quizás un error en vs2012?
Martin Weber

@MartinWeber No estoy seguro de lo que quiere decir con "acoplar" el control en VS. ¿En qué tipo de panel está alojado su separador? Si se trata de una DockPanel, debe ser capaz de establecer DockPanel.Docken su Separatora cualquier lado que usted quiere que se acopló a. Con WPF, el panel que aloja el control generalmente determina la posición del control y, a veces, incluso el tamaño predeterminado. Si es nuevo en los diseños de WPF, le recomendaría leer este artículo: Diseños de WPF - Un inicio rápido visual
Rachel

Gracias por el enlace! Voy a leer eso. Sí, soy nuevo en WPF. Con "Docking" quise decir, cuando arrastro un control cerca de otro, obtengo una línea roja para que todos los controles en una línea estén realmente en una línea. solo un ayudante de vs2012. cuando giro el separador, ya no obtengo estas líneas.
Martin Weber

1
@MartinWeber Lo siento, no puedo ayudarlo más: uso VS2010 y normalmente no uso el diseñador de arrastrar / soltar, ya que a menudo lo encuentro innecesario y no me gusta mantener el desorden XMAL que creo que genera :) probablemente tendría más suerte creando una nueva pregunta específicamente para su problema de diseñador de Visual Studio, ya que esta pregunta aquí parece más centrada en cómo hacer un separador vertical
Rachel

Gracias por tus consejos. Probaré XAML sin Designer y leeré algunos tutoriales. Tal vez si entiendo mejor las cosas, resolveré el problema yo mismo;)
Martin Weber

11

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.


2

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.


2
¡¡¡¡Excelente!!!! Lo resolvió de esta manera, pero la misma idea: <Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/>
Anthony Nichols

2

Separador vertical

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

separador horizontal

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

0

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


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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.