Wie füge ich einen vertikalen Separator hinzu?

Ich möchte einem Raster ein vertikales Trennzeichen hinzufügen, aber ich kann nur das horizontale Trennzeichen finden. Gibt es keine Eigenschaft, in die Sie eingeben können, ob die Trennlinie horizontal oder vertikal sein soll?

Ich habe viel gesucht, aber keine kurze und einfache Lösung dafür gefunden.

Ich verwende .Net Framework 4.0 und Visual Studio Ultimate 2012.

Wenn ich versuche, den horizontalen Separator um 90 Grad zu drehen, verliert er die Fähigkeit, an andere Komponenten zu "andocken".

Der gedrehte Separator sieht folgendermaßen aus:

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

Dies sollte genau das tun, was der Autor wollte:

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

wenn Sie eine horizontale Trenn wollen, ist die Änderung Orientationdes StackPanelzu Vertical.

Dies ist nicht genau das, was der Autor gefragt hat, aber es ist sehr einfach und funktioniert genau wie erwartet.

Rechteck macht den Job:

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

In der Vergangenheit habe ich den hier gefundenen Stil verwendet

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

Sie müssen die Transformation LayoutTransformanstelle von festlegenRenderTransform damit die Transformation während des Layout-Durchlaufs und nicht während des Render-Durchlaufs erfolgt. Der Layout-Durchlauf erfolgt, wenn WPF versucht, Steuerelemente zu gestalten und herauszufinden, wie viel Platz jedes Steuerelement einnimmt, während der Render-Durchlauf nach dem Layout-Durchlauf erfolgt, wenn WPF versucht, Steuerelemente zu rendern.

Sie können mehr über den Unterschied zwischen LayoutTransformund RenderTransform hier oder hier lesen

Ich benutze gerne das "Line" -Steuerelement. Sie können genau steuern, wo das Trennzeichen beginnt und endet. Obwohl es nicht gerade ein Trennzeichen ist, funktioniert es genauso, insbesondere in einem StackPanel.

Die Liniensteuerung funktioniert auch innerhalb eines Rasters. Ich bevorzuge die Verwendung des StackPanel, da Sie sich keine Gedanken über überlappende Steuerelemente machen müssen.

<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 Startposition (sollte für eine vertikale Linie 0 sein)

X2 = x Endposition (X1 = X2 für eine vertikale Linie)

Y1 = y Startposition (sollte für eine vertikale Linie 0 sein)

Y2 = y Endposition (Y2 = gewünschte Linienhöhe)

Ich benutze "Rand", um Polster auf jeder Seite der vertikalen Linie hinzuzufügen. In diesem Fall befinden sich links 5 Pixel und rechts von der vertikalen Linie 10 Pixel.

Da Sie mit der Liniensteuerung die x- und y-Koordinaten von Anfang und Ende der Linie auswählen können, können Sie sie auch für horizontale Linien und Linien in einem beliebigen Winkel dazwischen verwenden.

Dies ist eine sehr einfache Methode ohne Funktionalität und mit allen visuellen Effekten.

Verwenden Sie ein Raster und passen Sie es einfach an.

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

Nur ein anderer Weg, es zu tun.

Vertikaler Separator

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

horizontaler Separator

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

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

Probieren Sie dieses Beispiel aus und prüfen Sie, ob es Ihren Anforderungen entspricht. Es gibt drei Hauptaspekte.

1. Line.Stretch ist auf Füllen eingestellt.

2. Für horizontale Linien ist die vertikale Ausrichtung der Linie unten und für vertikale Linien die horizontale Ausrichtung rechts eingestellt.

3. Wir müssen dann der Zeile mitteilen, wie viele Zeilen oder Spalten überspannt werden sollen. Dies erfolgt durch Bindung an die Eigenschaft RowDefinitions oder 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}"/>  

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

verwenden

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

So habe ich es gemacht:

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