Comment ajouter un séparateur vertical?

Je veux ajouter un séparateur vertical à une grille, mais je ne peux trouver que l'horizontale. N'y a-t-il pas une propriété, où vous pouvez entrer si la ligne du séparateur doit être horizontale ou verticale?

J'ai beaucoup cherché, mais je n'ai pas trouvé de solution courte et facile à cela.

J'utilise .Net Framework 4.0 et Visual Studio Ultimate 2012.

Si j'essaie de faire pivoter le séparateur horizontal de 90 degrés, il perd la capacité de «s'ancrer» sur d'autres composants.

Le séparateur tourné ressemble à ceci:

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

Cela devrait faire exactement ce que l'auteur voulait:

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

si vous voulez un séparateur horizontal, remplacez Orientationle StackPanelpar Vertical.

Ce n'est pas exactement ce que l'auteur a demandé, mais c'est tout de même très simple et fonctionne exactement comme prévu.

Rectangle fait le travail:

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

Dans le passé, j'ai utilisé le style trouvé ici

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

Vous devez définir la transformation dans LayoutTransformau lieu de RenderTransformpour que la transformation se produise pendant l'étape de mise en page, et non pendant l'étape de rendu. L'étape de mise en page se produit lorsque WPF tente de mettre en page des contrôles et de déterminer l'espace occupé par chaque contrôle, tandis que l'étape de rendu se produit après la passe de mise en page lorsque WPF tente de rendre des contrôles.

Vous pouvez en savoir plus sur la différence entre LayoutTransformet RenderTransform ici ou ici

J'aime utiliser le contrôle "Ligne". Il vous donne un contrôle précis sur le début et la fin du séparateur. Bien que ce ne soit pas exactement un séparateur, il fonctionne de la même manière, en particulier dans un StackPanel.

Le contrôle de ligne fonctionne également dans une grille. Je préfère utiliser StackPanel car vous n'avez pas à vous soucier du chevauchement des différents contrôles.

<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 position de départ (doit être 0 pour une ligne verticale)

X2 = x position finale (X1 = X2 pour une ligne verticale)

Y1 = y position de départ (doit être 0 pour une ligne verticale)

Y2 = position de fin y (Y2 = hauteur de ligne souhaitée)

J'utilise "margin" pour ajouter un rembourrage de n'importe quel côté de la ligne verticale. Dans ce cas, il y a 5 pixels à gauche et 10 pixels à droite de la ligne verticale.

Étant donné que le contrôle de ligne vous permet de choisir les coordonnées x et y du début et de la fin de la ligne, vous pouvez également l'utiliser pour les lignes horizontales et les lignes à n'importe quel angle entre les deux.

C'est un moyen très simple de le faire sans fonctionnalité et sans effet visuel,

Utilisez une grille et personnalisez-la simplement.

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

Juste une autre façon de le faire.

Séparateur vertical

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

séparateur 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 -to-the-content-control-like-grid? forum = wpf :

Essayez cet exemple et voyez s'il répond à vos besoins, il comporte trois aspects principaux.

1. Line.Stretch est configuré pour remplir.

2. Pour les lignes horizontales, l'alignement vertical de la ligne est défini en bas et pour les lignes verticales, l'alignement horizontal est défini sur la droite.

3. Nous devons ensuite indiquer à la ligne le nombre de lignes ou de colonnes à couvrir, cela se fait en liant à la propriété de nombre 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}"/>  

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

utilisation

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

Voici comment je l'ai fait:

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