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

Il s'agit d'une façon très simple de procéder, sans fonctionnalité et avec un effet visuel,

Utilisez une grille et personnalisez-la tout simplement.

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

Juste une autre façon de faire.

Answer 2

Comme il devrait être clair pour tout le monde maintenant, il est étonnamment difficile de donner un aspect vertical à un séparateur WPF.

Le séparateur est horizontal par défaut, il ne dispose pas de Orientation et il ne tient pas compte du fait qu'il est placé dans une fenêtre orientée horizontalement. StackPanel .

En fait, il est si difficile de faire en sorte que le séparateur ait l'air vertical, que de nombreuses réponses suggèrent d'utiliser un Rectangle ou un Line au lieu d'un Separator ce qui n'est pas cool et qui admet la défaite.

Une réponse suggère d'utiliser le ToolBar.SeparatorStyleKey qui existe déjà et qui fait le travail. Cependant, je n'aime pas particulièrement cette solution, car je veux utiliser mon séparateur dans des endroits qui n'ont rien à voir avec les barres d'outils, donc mentionner une barre d'outils dans ces contextes est un leurre.

Une autre réponse suggère d'utiliser RotateTransform avec un angle de 90 degrés, ce qui fonctionne également, mais il faut alors définir la Width afin de spécifier la hauteur du séparateur, et je n'aime pas cela.

J'ai donc récupéré la source du style de séparateur de la barre d'outils et l'ai réduite au strict minimum pour qu'il fasse l'affaire. Je ne comprends pas du tout pourquoi l'incantation magique suivante permet d'obtenir le résultat souhaité, mais c'est le cas :

<Style x:Key="VerticalSeparatorStyle" TargetType="Separator">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Separator">
                <Border Background="{TemplateBinding Panel.Background}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Utilisez comme suit :

<Separator Width="1" Margin="10 3 10 3" Background="Black" Style="
    {StaticResource VerticalSeparatorStyle}" />

(C'est ainsi que l'histoire se passe avec WPF : la programmation se fait par incantations magiques).

Answer 3

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

utiliser

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

Answer 4

Juste une autre façon de faire un séparateur vertical.

<GridSplitter Width="3" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns" />

Il permet également de redimensionner les colonnes et les lignes.

Answer 5

Desde 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 correspond à vos besoins. Il comporte trois aspects principaux.

1. Line.Stretch est réglé sur fill.

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 à couvrir, ce que nous faisons en nous liant aux propriétés RowDefinitions ou 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}"/>