Comment ajouter un séparateur vertical ?

Question

Je veux ajouter un séparateur vertical à une grille, mais je ne peux trouver que le séparateur horizontal. N'existe-t-il pas une propriété permettant d'indiquer 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 à ce problème.

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 possibilité de s'arrimer à d'autres composants.

Le séparateur pivoté 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>

Answer 1

Cela devrait faire exactement ce que l'auteur voulait :

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

si vous souhaitez un séparateur horizontal, modifiez le paramètre Orientation de la StackPanel a Vertical .

Answer 2

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

Le rectangle fait l'affaire :

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

Dans le passé, j'ai utilisé le style trouvé 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}" />

Vous devez définir la transformation dans LayoutTransform au lieu de RenderTransform La transformation a donc lieu pendant la passe de mise en page, et non pendant la passe de rendu. La passe de mise en page se produit lorsque WPF essaie de mettre en page les contrôles et de déterminer l'espace occupé par chaque contrôle, tandis que la passe de rendu se produit après la passe de mise en page lorsque WPF essaie de rendre les contrôles.

Vous pouvez en savoir plus sur la différence entre LayoutTransform y RenderTransform aquí o aquí

Answer 4

J'aime utiliser la commande "Ligne". Elle vous permet de contrôler exactement où commence et où finit le séparateur. Bien qu'il ne s'agisse pas exactement d'un séparateur, il fonctionne de la même manière, notamment dans un StackPanel.

Le contrôle de ligne fonctionne également dans une grille. Je préfère utiliser le 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 = position de départ x (devrait être 0 pour une ligne verticale)

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

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

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

J'utilise "margin" pour ajouter du 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.

Comme 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 intermédiaire.

Answer 5

Séparateur vertical

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

séparateur horizontal

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