Jak dodać separator pionowy?

114

Chcę dodać separator pionowy do siatki, ale mogę znaleźć tylko poziomą. Czy nie ma właściwości, w której można wpisać, czy linia separatora ma być pozioma czy pionowa?

Szukałem dużo, ale nie znalazłem na to krótkiego i łatwego rozwiązania.

Używam .Net Framework 4.0 i Visual Studio Ultimate 2012.

Jeśli spróbuję obrócić poziomy separator o 90 stopni, traci on możliwość „zadokowania” do innych komponentów.

Obrócony separator wygląda następująco:

<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
źródło
3
nie możesz po prostu użyć stylizowanego Rectangle?
paul
1
to działa, ale nie jest tym, czego chcę. separatorem powinien być element sterujący, z którym można to zrobić. musi być sposób ^^
Martin Weber
Myślę, że teraz używam Rectangle, nawet jeśli mi się to nie podoba
Martin Weber,
1
Bordermoże być również rozwiązaniem ...
Mangesh

Odpowiedzi:

193

Powinno to zrobić dokładnie to, czego chciał autor:

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

jeśli chcesz poziomy separator, należy zmienić Orientationz StackPanelcelu Vertical.

Emmanuel Romulus
źródło
4
W moim przypadku potrzebny był tylko styl separatora, a nie otaczający panel StackPanel.
Xtr
Zawsze wdrażałem RenderTransform. Zgrabny skrót do zapamiętania :)
Ashley Grenon
3
Powinna być odpowiedzią, to jest najlepsze. Nie wiem, dlaczego pokazujemy jako trzecią odpowiedź!
Tatranskymedrował
Działa doskonale zarówno w poziomie, jak i pionie Menumiędzy MenuItems. Zawsze ładnie się rozciąga, aby dopasować wysokość / szerokość menu.
natiiix
50

Nie jest to dokładnie to, o co pytał autor, ale mimo to jest bardzo proste i działa dokładnie tak, jak oczekiwano.

Rectangle spełnia swoje zadanie:

<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.
źródło
2
Działa to świetnie w UWP. Jeśli potrzebujesz cieńszej linii, użyj wypełnienia zamiast koloru obrysu i ustaw szerokość na 3: <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />
Anthony Nichols
25

W przeszłości korzystałem ze znalezionego tutaj stylu

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

Trzeba ustawić transformację LayoutTransformzamiast RenderTransformwięc przemiana zachodzi podczas przejściu układu, a nie podczas przełęczy render. Przejście układu występuje, gdy WPF próbuje rozmieścić kontrolki i dowiedzieć się, ile miejsca zajmuje każda kontrolka, podczas gdy przebieg renderowania występuje po przejściu układu, gdy WPF próbuje renderować kontrolki.

Możesz przeczytać więcej o różnicy między LayoutTransformi RenderTransform tutaj lub tutaj

Rachel
źródło
To brzmi świetnie. Jednak to nie zmienia się tak bardzo. Wciąż nie mogę zadokować elementów sterujących w projektancie interfejsu użytkownika vs2012. Może błąd w vs2012?
Martin Weber
@MartinWeber Nie jestem pewien, co masz na myśli przez „dokowanie” formantu w VS. W jakim typie panelu jest hostowany twój separator? Jeśli tak DockPanel, powinieneś być w stanie ustawić DockPanel.Docksię Separatorpo dowolnej stronie, na której chcesz, aby był zadokowany. W przypadku WPF panel obsługujący formant zwykle określa położenie formantu, a czasem nawet domyślny rozmiar. Jeśli jesteś nowy w układach WPF, polecam przeczytanie tego artykułu: Układy WPF - wizualny szybki start
Rachel
Dzięki za link! Przeczytam to. Tak, jestem nowy w WPF. Przez „dokowanie” miałem na myśli, że kiedy przeciągam kontrolkę w pobliże innej, pojawia się czerwona linia, tak że wszystkie kontrolki w jednej linii znajdują się w jednej linii. tylko pomocnik z vs2012. kiedy obracam separator, nie widzę już tych linii.
Martin Weber
1
@MartinWeber Przepraszam, nie mogę ci więcej pomóc - używam VS2010 i normalnie w ogóle nie używam projektanta przeciągania / upuszczania, ponieważ często uważam go za niepotrzebny i nie lubię utrzymywać bałaganu XMAL, myślę, że generuje :) Ty prawdopodobnie miałby więcej szczęścia podczas tworzenia nowego pytania specjalnie dla twojego problemu z projektantem Visual Studio, ponieważ to pytanie wydaje się bardziej skupione na tym, jak utworzyć separator pionowy
Rachel
Dziękuję za wskazówki. Spróbuję XAML bez Projektanta i przeczytam kilka samouczków. Może jak lepiej zrozumiem, sam rozwiążę problem;)
Martin Weber
11

Lubię używać kontrolki „Line”. Daje ci dokładną kontrolę nad tym, gdzie zaczyna się i kończy separator. Chociaż nie jest to dokładnie separator, działa w ten sam sposób, szczególnie w StackPanel.

Kontrola linii działa również w siatce. Wolę używać StackPanel, ponieważ nie musisz się martwić o nakładanie się różnych kontrolek.

<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 pozycja początkowa (powinna wynosić 0 dla linii pionowej)

X2 = x pozycja końcowa (X1 = X2 dla linii pionowej)

Y1 = y pozycja początkowa (powinna wynosić 0 dla linii pionowej)

Y2 = y pozycja końcowa (Y2 = żądana wysokość wiersza)

Używam „marginesu”, aby dodać dopełnienie po dowolnej stronie pionowej linii. W tym przypadku jest 5 pikseli po lewej stronie i 10 pikseli po prawej stronie pionowej linii.

Ponieważ kontrolka linii umożliwia wybranie współrzędnych x i y początku i końca linii, można jej również użyć do linii poziomych i linii pod dowolnym kątem pomiędzy nimi.

Kevin K.
źródło
2

To bardzo prosty sposób na zrobienie tego bez funkcjonalności i wszystkich efektów wizualnych,

Użyj siatki i po prostu ją dostosuj.

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

Po prostu inny sposób, aby to zrobić.

Connor Mcgrann
źródło
2
Doskonały!!!! Rozwiązałem to w ten sposób, ale ten sam pomysł: <Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/>
Anthony Nichols
2

Separator pionowy

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

separator poziomy

<Rectangle HorizontalAlignment="Stretch" Fill="Blue" Height="4"/>
Mohimenul Joaa
źródło
0

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

Wypróbuj ten przykład i sprawdź, czy odpowiada Twoim potrzebom, są trzy główne aspekty.

  1. Line.Stretch jest ustawione na wypełnienie.

  2. W przypadku linii poziomych VerticalAlignment linii jest ustawiane jako Bottom, a dla VerticalLines ustawienie HorizontalAlignment na Right.

  3. Następnie musimy powiedzieć linii, ile wierszy lub kolumn ma obejmować, odbywa się to przez powiązanie z właściwością RowDefinitions lub 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
źródło
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>

posługiwać się

<StackPanel  Orientation="Horizontal"  >
       <TextBlock>name</TextBlock>
           <Separator Style="{StaticResource MySeparatorStyle}" ></Separator>
       <Button>preview</Button>
 </StackPanel>
hyperneu
źródło
-3

Oto jak to zrobiłem:

<TextBlock Margin="0,-2,0,0">|</TextBlock>
Dion Kurczek
źródło