Come aggiungere un separatore verticale?

Voglio aggiungere un separatore verticale a una griglia, ma posso trovare solo l'orizzontale. Non c'è una proprietà, dove puoi inserire se la linea del separatore deve essere orizzontale o verticale?

Ho cercato molto, ma non ho trovato una soluzione breve e facile.

Uso .Net Framework 4.0 e Visual Studio Ultimate 2012.

Se provo a ruotare il Separatore orizzontale di 90 gradi, perde la capacità di "agganciarsi" ad altri componenti.

Il separatore ruotato ha questo aspetto:

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

Questo dovrebbe fare esattamente quello che voleva l'autore:

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

se vuoi un separatore orizzontale, cambia il Orientationdel StackPanela Vertical.

Questo non è esattamente ciò che l'autore ha chiesto, ma è comunque molto semplice e funziona esattamente come previsto.

Rectangle fa il lavoro:

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

In passato ho usato lo stile trovato qui

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

È necessario impostare la trasformazione LayoutTransforminvece di in RenderTransformmodo che la trasformazione avvenga durante il passaggio di layout, non durante il passaggio di rendering. Il passaggio di layout si verifica quando WPF tenta di disporre i controlli e di capire quanto spazio occupa ciascun controllo, mentre il passaggio di rendering si verifica dopo il passaggio di layout quando WPF tenta di eseguire il rendering dei controlli.

Puoi leggere di più sulla differenza tra LayoutTransforme RenderTransform qui o qui

Mi piace usare il controllo "Line". Ti dà il controllo esatto su dove inizia e finisce il separatore. Sebbene non sia esattamente un separatore, funziona allo stesso modo, specialmente in uno StackPanel.

Il controllo di linea funziona anche all'interno di una griglia. Preferisco usare StackPanel perché non devi preoccuparti della sovrapposizione di diversi controlli.

<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 posizione iniziale (dovrebbe essere 0 per una linea verticale)

X2 = x posizione finale (X1 = X2 per una linea verticale)

Y1 = y posizione iniziale (dovrebbe essere 0 per una linea verticale)

Y2 = posizione finale y (Y2 = altezza linea desiderata)

Uso "margin" per aggiungere imbottitura su qualsiasi lato della linea verticale. In questo caso, ci sono 5 pixel a sinistra e 10 pixel a destra della linea verticale.

Poiché il controllo della linea ti consente di scegliere le coordinate xey dell'inizio e della fine della linea, puoi anche usarlo per linee orizzontali e linee con qualsiasi angolo intermedio.

Questo è un modo molto semplice per farlo senza funzionalità e tutti gli effetti visivi,

Usa una griglia e personalizzala semplicemente.

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

Solo un altro modo per farlo.

Separatore verticale

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

separatore orizzontale

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

Da http://social.msdn.microsoft.com/Forums/vstudio/en-US/12ead5d4-1d57-4dbb-ba81-bc13084ba370/how-can-i-add-a-line-as-a-visual-separator -alla-griglia-come-controllo-contenuto? forum = wpf :

Prova questo esempio e vedi se si adatta alle tue esigenze, ci sono tre aspetti principali.

1. Line.Stretch è impostato per riempire.

2. Per le linee orizzontali, l'allineamento verticale della linea è impostato in basso e per le linee verticali l'allineamento orizzontale è impostato su destra.

3. Dobbiamo quindi dire alla riga quante righe o colonne si estendono, questo viene fatto collegando alla proprietà 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}"/>  

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

uso

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

Ecco come l'ho fatto:

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