web-dev-qa-db-fra.com

Comment ajouter un séparateur vertical?

Je veux ajouter un séparateur vertical à une grille, mais je ne trouve 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 simple et rapide à 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'ancrer" sur 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>
wpfxamlvisual-studio-2012separator
99
Martin Weber

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, changez le Orientation du StackPanel en Vertical.

164
Emmanuel Romulus

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

Le 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>
45
Anton Purin

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 LayoutTransform à la place de RenderTransform pour que la transformation se produise lors de la passe de mise en page, et non lors de la passe de rendu. La passe de mise en page se produit lorsque WPF essaie de mettre en forme les contrôles et calcule la quantité d'espace occupée par chaque contrôle, tandis que la passe de rendu se produit après la passe de mise en page lorsque WPF tente de rendre les contrôles.

Vous pouvez en savoir plus sur la différence entre LayoutTransform et RenderTransformici ou ici

21
Rachel

J'aime utiliser le contrôle "Ligne". Cela vous donne un contrôle exact 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, notamment 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 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 = y position finale (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.

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.

9
Kevin K

C’est un moyen très simple de le faire, sans fonctionnalité ni 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.

2
Connor Mcgrann

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 si cela correspond à vos besoins, il comporte trois aspects principaux.

  1. Line.Stretch est défini pour remplir.

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

  3. Nous devons ensuite indiquer à la ligne le nombre de lignes ou de colonnes à étendre. Pour ce faire, vous liez à 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}"/>
0
VoteCoffee

Voici comment je l'ai fait:

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