Como adicionar um separador vertical?

114

Quero adicionar um separador vertical a uma grade, mas só consigo encontrar o horizontal. Não existe uma propriedade, onde você pode inserir se a linha do separador deve ser horizontal ou vertical?

Pesquisei muito, mas não encontrei uma solução curta e fácil para isso.

Eu uso .Net Framework 4.0 e Visual Studio Ultimate 2012.

Se eu tentar girar o Separador horizontal em 90 graus, ele perde a capacidade de "encaixar" em outros componentes.

O separador girado tem a seguinte aparência:

<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>
Martin Weber
fonte
3
você não pode simplesmente usar um estilizado Rectangle?
paul
1
isso funciona, mas não é o que eu quero. o separador deve ser o controle para fazer isso. tem que haver uma maneira ^^
Martin Weber
Acho que agora uso o retângulo, mesmo que não goste
Martin Weber
1
Bordertambém pode ser uma solução ..
Mangesh

Respostas:

193

Isso deve fazer exatamente o que o autor queria:

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

se desejar um separador horizontal, altere o Orientationde StackPanelpara Vertical.

Emmanuel Romulus
fonte
4
No meu caso, apenas o estilo era necessário no separador, não no StackPanel delimitador.
Xtr
Sempre implementei um RenderTransform. Atalho legal para lembrar :)
Ashley Grenon
3
Deve ser uma resposta, esta é a melhor. Não sei por que mostrar como 3ª resposta!
Tatranskymedved
Funciona perfeitamente bem, tanto horizontal e vertical Menuentre MenuItems também. Sempre bem alongado para corresponder à altura / largura do menu.
natiiix
50

Não foi exatamente isso que o autor perguntou, mas ainda assim, é muito simples e funciona exatamente como o esperado.

O retângulo faz o trabalho:

<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>
Anton P
fonte
2
Isso funciona muito bem em UWP. Se você precisar de uma linha mais fina, use o preenchimento em vez da cor do traço e defina a largura para 3: <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />
Anthony Nichols
25

No passado, usei o estilo encontrado aqui

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

Você precisa definir a transformação em, em LayoutTransformvez de RenderTransformpara que a transformação ocorra durante a passagem de Layout, não durante a passagem de Renderização. A passagem de Layout ocorre quando o WPF está tentando fazer o layout de controles e descobrir quanto espaço cada controle ocupa, enquanto a passagem de Renderização ocorre após a passagem de layout quando o WPF está tentando renderizar os controles.

Você pode ler mais sobre a diferença entre LayoutTransforme RenderTransform aqui ou aqui

Rachel
fonte
Isso parece ótimo. No entanto, isso não muda muito. Ainda não consigo encaixar os controles no designer de interface do vs2012. Talvez um bug no vs2012?
Martin Weber
@MartinWeber Não tenho certeza do que você quer dizer com "encaixar" o controle no VS. Em que tipo de painel seu separador está hospedado? Se for um DockPanel, você deve ser capaz de colocá-lo DockPanel.Dockno Separatorlado em que deseja encaixá-lo. Com o WPF, o painel que hospeda o controle geralmente determina a posição do controle e às vezes até o tamanho padrão. Se você é novo nos layouts do WPF, recomendo a leitura deste artigo: Layouts do WPF - Um Visual Quick Start
Rachel
Obrigado pelo link! Eu vou ler isso. Sim, sou novo no WPF. Com "Docking", eu quis dizer que, quando arrasto um controle para perto de outro, obtenho uma linha vermelha de modo que todos os controles em uma linha estejam realmente em uma linha. apenas um ajudante do vs2012. quando eu giro o separador, não obtenho mais essas linhas.
Martin Weber
1
@MartinWeber Desculpe, não posso ajudá-lo mais - eu uso VS2010 e normalmente não uso o designer de arrastar / soltar, pois geralmente o considero desnecessário e não gosto de manter a bagunça do XMAL que acho que ele gera :) Você provavelmente teria mais sorte criando uma nova pergunta especificamente para seu problema de designer do Visual Studio, já que esta pergunta aqui parece mais focada em como fazer um separador vertical
Rachel
Obrigado por suas dicas. Vou experimentar o XAML sem Designer e ler alguns tutoriais. Talvez se eu conseguir um melhor entendimento das coisas, eu mesmo resolva o problema;)
Martin Weber
11

Gosto de usar o controle "Linha". Dá a você controle exato sobre onde o separador começa e termina. Embora não seja exatamente um separador, ele funciona da mesma maneira, especialmente em um StackPanel.

O controle de linha também funciona dentro de uma grade. Eu prefiro usar o StackPanel porque você não precisa se preocupar com a sobreposição 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 posição inicial (deve ser 0 para uma linha vertical)

X2 = x posição final (X1 = X2 para uma linha vertical)

Y1 = posição inicial y (deve ser 0 para uma linha vertical)

Y2 = posição final de y (Y2 = altura de linha desejada)

Eu uso "margem" para adicionar preenchimento em qualquer lado da linha vertical. Neste caso, existem 5 pixels à esquerda e 10 pixels à direita da linha vertical.

Como o controle de linha permite que você escolha as coordenadas xey do início e do final da linha, você também pode usá-lo para linhas horizontais e linhas em qualquer ângulo entre elas.

Kevin k
fonte
2

Esta é uma maneira muito simples de fazer isso, sem funcionalidade e todos os efeitos visuais,

Use uma grade e simplesmente personalize-a.

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

Apenas outra maneira de fazer isso.

Connor Mcgrann
fonte
2
Excelente!!!! Resolvido desta forma, mas mesma ideia: <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"/>
Mohimenul Joaa
fonte
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 -para-the-content-control-like-grid? forum = wpf :

Experimente este exemplo e veja se ele atende às suas necessidades, existem três aspectos principais para ele.

  1. Line.Stretch está definido para preencher.

  2. Para linhas horizontais, o VerticalAlignment da linha é definido como Bottom e, para VerticalLines, o HorizontalAlignment é definido como Right.

  3. Em seguida, precisamos dizer à linha quantas linhas ou colunas devem ser estendidas; isso é feito vinculando-se à propriedade de contagem RowDefinitions ou 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}"/>  

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

usar

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

Aqui está como eu fiz:

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