it-swarm.com.de

Wie füge ich einen vertikalen Separator hinzu?

Ich möchte einem Gitter einen vertikalen Separator hinzufügen, aber ich kann nur den horizontalen Separator finden. Gibt es keine Eigenschaft, in die Sie eingeben können, ob die Linie des Trennzeichens horizontal oder vertikal sein soll?

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

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

Wenn ich versuche, den horizontalen Separator um 90 Grad zu drehen, kann er nicht mehr an andere Komponenten "andocken".

Das gedrehte Trennzeichen 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>
99
Martin Weber

Dies sollte genau das tun, was der Autor wollte:

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

wenn Sie ein horizontales Trennzeichen wünschen, ändern Sie das Orientation des StackPanel in Vertical.

164

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

Rechteck erledigt die Arbeit:

<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

In der Vergangenheit habe ich den gefundenen Stil verwendet hier

<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 Umwandlung in LayoutTransform anstelle von RenderTransform festlegen, damit die Umwandlung während des Layoutdurchlaufs und nicht während des Renderdurchlaufs erfolgt. Der Layoutdurchlauf wird ausgeführt, wenn WPF versucht, Steuerelemente zu layouten und herauszufinden, wie viel Speicherplatz jedes Steuerelement belegt. Der Renderdurchlauf wird nach dem Layoutdurchlauf ausgeführt, wenn WPF versucht, Steuerelemente zu rendern.

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

21
Rachel

Ich benutze gerne die "Line" -Steuerung. Sie haben die genaue Kontrolle darüber, wo der Separator beginnt und endet. Obwohl es sich nicht gerade um ein Trennzeichen handelt, funktioniert es auf die gleiche Weise, insbesondere in einem StackPanel.

Die Liniensteuerung funktioniert auch innerhalb eines Rasters. Ich bevorzuge die Verwendung des StackPanel, da Sie sich nicht um die Überlappung verschiedener Steuerelemente kümmern 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 "margin", um auf jeder Seite der vertikalen Linie einen Abstand hinzuzufügen. In diesem Fall befinden sich 5 Pixel links und 10 Pixel rechts von der vertikalen Linie.

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

9
Kevin K

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.

2
Connor Mcgrann

Von http://social.msdn.Microsoft.com/Forums/vstudio/en-US/12ead5d4-1d57-4dbb-ba81-bc13084ba370/how-can-i-add-a-line-as-a -visuelle-trennzeichen-zum-inhaltskontroll-ähnlichen-raster? forum = wpf :

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

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

  2. Bei horizontalen Linien wird die vertikale Ausrichtung der Linie auf "Unten" und bei vertikalen Linien auf "Rechts" gesetzt.

  3. Anschließend müssen wir der Zeile mitteilen, wie viele Zeilen oder Spalten zu überspannen sind. Dies erfolgt durch Bindung an die count-Eigenschaft von RowDefinitions oder 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

So habe ich es gemacht:

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