Wie füge ich einen vertikalen Separator hinzu?

113

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>
Martin Weber
quelle
3
Kannst du nicht einfach einen gestylten verwenden Rectangle?
Paul
1
das funktioniert, ist aber nicht das, was ich will. Das Trennzeichen sollte die Steuerung sein, mit der dies durchgeführt wird. Es muss einen Weg geben ^^
Martin Weber
Ich glaube, ich benutze das Rechteck jetzt tatsächlich, auch wenn es mir nicht gefällt
Martin Weber
1
Borderkann auch eine Lösung sein ..
Mangesh

Antworten:

191

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.

Emmanuel Romulus
quelle
4
In meinem Fall wurde nur der Stil für das Trennzeichen benötigt, nicht das umschließende StackPanel.
Xtr
Ich habe immer eine implementiert RenderTransform. Ordentliche Abkürzung zum Erinnern :)
Ashley Grenon
3
Sollte eine Antwort sein, ist dies die beste. Nicht sicher, warum als 3. Antwort angezeigt!
Tatranskymedved
49

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>
Anton P.
quelle
2
Dies funktioniert hervorragend in UWP. Wenn Sie eine dünnere Linie benötigen, verwenden Sie Füllung anstelle der Strichfarbe und stellen Sie die Breite auf 3 ein: <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />
Anthony Nichols
25

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

Rachel
quelle
Das klingt gut. Es ändert sich jedoch nicht so viel. Ich kann die Steuerelemente immer noch nicht im GUI-Designer von vs2012 andocken. Vielleicht ein Bug in vs2012?
Martin Weber
@MartinWeber Ich bin mir nicht sicher, was Sie unter "Andocken" des Steuerelements in VS verstehen. In welcher Art von Panel wird Ihr Trennzeichen gehostet? Wenn es ein ist DockPanel, sollten Sie in der Lage sein, DockPanel.Dockauf Ihre SeparatorSeite zu setzen, an welche Seite Sie es andocken möchten. Bei WPF bestimmt das Panel, auf dem sich das Steuerelement befindet, normalerweise die Position des Steuerelements und manchmal sogar die Standardgröße. Wenn Sie neu in den Layouts von WPF sind, würde ich empfehlen, diesen Artikel durchzulesen
Rachel
Danke für den Link! Ich werde das lesen. Ja, ich bin neu bei WPF. Mit "Andocken" meinte ich, wenn ich ein Steuerelement in die Nähe eines anderen ziehe, erhalte ich eine rote Linie, sodass sich alle Steuerelemente in einer Zeile tatsächlich in einer Zeile befinden. Nur ein Helfer von vs2012. Wenn ich das Trennzeichen drehe, bekomme ich diese Linien nicht mehr.
Martin Weber
1
@MartinWeber Tut mir leid, ich kann Ihnen nicht mehr helfen - ich verwende VS2010 und verwende normalerweise überhaupt nicht den Drag / Drop-Designer, da ich ihn oft als unnötig empfinde und das XMAL-Durcheinander, von dem ich denke, dass es es erzeugt, nicht beibehalten möchte :) Sie
Rachel,
Vielen Dank für Ihre Tipps. Ich werde XAML ohne Designer ausprobieren und einige Tutorials lesen. Vielleicht löse ich das Problem selbst, wenn ich die Dinge besser verstehe;)
Martin Weber
11

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.

Kevin K.
quelle
2

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.

Connor Mcgrann
quelle
2
Ausgezeichnet!!!! Auf diese Weise gelöst, aber die gleiche Idee: <Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/>
Anthony Nichols
2

Vertikaler Separator

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

horizontaler Separator

<Rectangle HorizontalAlignment="Stretch" Fill="Blue" Height="4"/>
Mohimenul Joaa
quelle
0

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

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

verwenden

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

So habe ich es gemacht:

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