Comment ajouter un séparateur vertical?

114

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>
Martin Weber
la source
3
ne pouvez-vous pas simplement utiliser un style Rectangle?
paul
1
cela fonctionne, mais ce n'est pas ce que je veux. le séparateur doit être le contrôle pour faire cela. il doit y avoir un moyen ^^
Martin Weber
Je pense que j'utilise actuellement le Rectangle, même si je ne l'aime pas
Martin Weber
1
Borderpeut aussi être une solution ..
Mangesh

Réponses:

193

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.

Emmanuel Romulus
la source
4
Dans mon cas, seul le style était nécessaire sur le séparateur, pas le StackPanel englobant.
Xtr
J'ai toujours implémenté un RenderTransform. Raccourci soigné à retenir :)
Ashley Grenon
3
Devrait être une réponse, c'est la meilleure. Je ne sais pas pourquoi apparaître comme 3ème réponse!
Tatranskymedved
Fonctionne parfaitement bien aussi bien à l'horizontale qu'à la verticale Menuentre les MenuItems. S'étire toujours bien pour correspondre à la hauteur / largeur du menu.
natiiix
50

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>
Anton P
la source
2
Cela fonctionne très bien dans UWP. Si vous avez besoin d'une ligne plus fine, utilisez Remplissage au lieu de Couleur de trait et définissez la largeur sur 3: <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />
Anthony Nichols
25

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

Rachel
la source
Cela sonne bien. Cependant, cela ne change pas grand chose. Je ne peux toujours pas ancrer les contrôles dans l'interface graphique de vs2012. Peut-être un bug dans vs2012?
Martin Weber
@MartinWeber Je ne suis pas sûr de ce que vous entendez par «ancrer» le contrôle dans VS. Dans quel type de panneau votre séparateur est-il hébergé? Si c'est un DockPanel, vous devriez être en mesure de régler DockPanel.Dockle Separatorcôté de votre choix. Avec WPF, le panneau hébergeant le contrôle détermine généralement la position du contrôle et parfois même la taille par défaut. Si vous êtes nouveau dans les mises en page de WPF, je vous recommande de lire cet article: WPF Layouts - A Visual Quick Start
Rachel
Merci pour le lien! Je vais le lire. Oui, je suis nouveau sur WPF. Avec "Docking", je voulais dire, lorsque je fais glisser un contrôle près d'un autre, j'obtiens une ligne rouge pour que tous les contrôles d'une ligne soient en fait sur une seule ligne. juste une aide de vs2012. quand je tourne le séparateur, je n'obtiens plus ces lignes.
Martin Weber
1
@MartinWeber Désolé, je ne peux pas vous aider davantage - j'utilise VS2010 et je n'utilise normalement pas du tout le concepteur glisser / déposer car je le trouve souvent inutile et n'aime pas maintenir le désordre XMAL que je pense qu'il génère :) Vous aurait probablement plus de chance de créer une nouvelle question spécifiquement pour votre problème de concepteur Visual Studio, car cette question semble ici plus axée sur la façon de créer un séparateur vertical
Rachel
Merci pour vos conseils. J'essaierai XAML sans Designer et lirai quelques didacticiels. Peut-être que si j'ai une meilleure compréhension des choses, je résoudrai le problème moi-même;)
Martin Weber
11

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.

Kevin K
la source
2

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.

Connor Mcgrann
la source
2
Excellent!!!! Résolu de cette façon, mais même idée: <Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/>
Anthony Nichols
2

Séparateur vertical

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

séparateur horizontal

<Rectangle HorizontalAlignment="Stretch" Fill="Blue" Height="4"/>
Mohimenul Joaa
la source
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 -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}"/>  

VoteCafé
la source
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>

utilisation

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

Voici comment je l'ai fait:

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