Jak dodać pionowy separator?

Question

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

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

używam .Net Framework 4.0 oraz Visual Studio 2012. Ostateczny

Gdy próbuję obrócić poziomy separator o 90 stopni, traci zdolność do „DOCK” do innych komponentów.

Obrócone 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> 

Answer 1

W przeszłości Używałem styl znaleziono here

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

Musisz ustawić transformację w LayoutTransform zamiast RenderTransform tak więc transformacji występuje podczas przejścia Układu, a nie podczas przejścia Renderowania. Przekazanie układu ma miejsce, gdy WPF próbuje rozmieścić elementy sterujące i ustalić, ile miejsca zajmuje każda z nich, podczas gdy przejście Renderowanie następuje po przejściu układu, gdy WPF próbuje renderować formanty.

można przeczytać więcej na temat różnicy między LayoutTransform i RenderTransformhere lub here

Answer 2

To nie jest dokładnie to, co autor poprosił, ale nadal jest to bardzo prosty i działa dokładnie tak, jak oczekiwano.

Prostokąt 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> 

Answer 3

ten powinien zrobić dokładnie to, co autor chciał:

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

jeśli chcesz poziomy separator, zmień Orientation z StackPanel do Vertical.

Answer 4

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:

Spróbuj tego przykładu i sprawdzić, czy pasuje do Twoich potrzeb, istnieją trzy główne aspekty do niego.

1. Line.Stretch jest ustawiony do wypełnienia.

2. W przypadku linii poziomych ustawienie pionowe linii jest ustawiane na dole, a w przypadku linii pionowych ustawienie poziomo jest ustawione w prawo.

3. Następnie musimy powiedzieć linii, ile wierszy lub kolumn ma rozpiętość, odbywa się to przez powiązanie z właściwością countDefinition lub 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}"/> 
   

Answer 5

Jest to bardzo prosty sposób to zrobić bez funkcjonalności i wszystkim efekt wizualny,

Użyj siatki i po prostu dostosuj ją.

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

To kolejny sposób na zrobienie tego.

Answer 6

Lubię używać kontroli „Line”. Daje ci dokładną kontrolę nad miejscem rozpoczęcia i zakończenia separatora. Chociaż nie jest dokładnie separatorem, działa tak samo, szczególnie w StackPanel.

Prace kontrolne linii w siatce też. Wolę używać StackPanel, ponieważ nie musisz się martwić o różne nakładanie się 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 pozycji wyjściowej (powinno być 0 do linii pionowej)

X2 = X kończy pozycji (X1 = X2 do linii pionowej)

Y1 = Y pozycję wyjściową (w przypadku wynosić od 0 do linii pionowej)

Y2 = y zakończenia pozycji (Y2 = pożądanej wysokości linii)

używać „margines” dodać margines z każdej strony linii pionowej. W tym przypadku 5 pikseli po lewej i 10 pikseli po prawej stronie pionowej linii.

Ponieważ kontrola linia pozwala wybrać xiy współrzędne początku i na końcu linii, można również użyć go do linii poziomych i linii pod dowolnym kątem pomiędzy.