Làm cách nào để thêm Dấu phân cách dọc?

Tôi muốn thêm Dấu phân cách dọc vào Lưới, nhưng tôi chỉ có thể tìm thấy dấu ngang. Không có Thuộc tính, nơi bạn có thể nhập nếu dòng của dấu phân cách là ngang hay dọc?

Tôi đã tìm kiếm rất nhiều, nhưng không tìm thấy một giải pháp ngắn gọn và dễ dàng cho việc này.

Tôi sử dụng .Net Framework 4.0 và Visual Studio Ultimate 2012.

Nếu tôi cố xoay Dấu phân cách ngang 90 độ, nó sẽ mất khả năng "gắn kết" với các Thành phần khác.

Dấu phân tách đã xoay trông như thế này:

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

Điều này sẽ làm chính xác những gì tác giả muốn:

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

nếu bạn muốn có dấu phân cách ngang, hãy thay đổi dấu Orientationhiệu StackPanelthành Vertical.

Đây không phải là chính xác những gì tác giả yêu cầu, nhưng vẫn còn, nó rất đơn giản và hoạt động chính xác như mong đợi.

Rectangle thực hiện công việc:

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

Trước đây, tôi đã sử dụng kiểu được tìm thấy ở đây

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

Bạn cần phải đặt chuyển đổi trong LayoutTransformthay vì RenderTransformđể chuyển đổi xảy ra trong quá trình chuyển Bố cục, không phải trong quá trình kết xuất. Quá trình vượt qua Bố cục xảy ra khi WPF đang cố gắng sắp xếp các điều khiển bố cục và tìm ra bao nhiêu dung lượng mà mỗi điều khiển chiếm bao nhiêu dung lượng, trong khi chuyển Kết xuất xảy ra sau khi vượt qua bố cục khi WPF đang cố gắng hiển thị các điều khiển.

Bạn có thể đọc thêm về sự khác biệt giữa LayoutTransformvà RenderTransform tại đây hoặc tại đây

Tôi thích sử dụng điều khiển "Dòng". Nó cho phép bạn kiểm soát chính xác vị trí bắt đầu và kết thúc của dải phân cách. Mặc dù nó không chính xác là một dấu phân cách, nhưng nó hoạt động theo cùng một cách, đặc biệt là trong StackPanel.

Điều khiển dòng cũng hoạt động trong một lưới. Tôi thích sử dụng StackPanel hơn vì bạn không phải lo lắng về các điều khiển khác nhau chồng chéo lên nhau.

<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 vị trí bắt đầu (phải là 0 đối với một đường thẳng đứng)

X2 = x vị trí kết thúc (X1 = X2 cho một đường thẳng đứng)

Y1 = y vị trí bắt đầu (phải là 0 đối với một đường thẳng đứng)

Y2 = y vị trí kết thúc (Y2 = chiều cao dòng mong muốn)

Tôi sử dụng "margin" để thêm phần đệm vào bất kỳ phía nào của đường thẳng đứng. Trong trường hợp này, có 5 pixel ở bên trái và 10 pixel ở bên phải của đường thẳng đứng.

Vì điều khiển dòng cho phép bạn chọn tọa độ x và y của điểm bắt đầu và kết thúc của dòng, bạn cũng có thể sử dụng nó cho các đường ngang và đường ở bất kỳ góc nào ở giữa.

Đây là một cách làm rất đơn giản, không có chức năng và tất cả hiệu ứng hình ảnh,

Sử dụng lưới và chỉ cần tùy chỉnh nó.

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

Chỉ là một cách khác để làm điều đó.

Dấu phân cách dọc

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

dải phân cách ngang

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

Từ 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 :

Hãy thử ví dụ này và xem nó có phù hợp với nhu cầu của bạn không, có ba khía cạnh chính của nó.

1. Line.Stretch được thiết lập để điền.

2. Đối với các đường ngang, Căn chỉnh dọc của đường được đặt Dưới cùng và đối với Dòng dọc, Căn chỉnh ngang được đặt thành Phải.

3. Sau đó, chúng ta cần cho dòng biết có bao nhiêu hàng hoặc cột để kéo dài, điều này được thực hiện bằng cách liên kết với thuộc tính đếm RowDefinitions hoặc 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}"/>  

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

sử dụng

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

Đây là cách tôi đã làm điều đó:

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