세로 구분 기호를 추가하는 방법

세로 구분 기호를 추가하는 방법

그리드에 수직 구분 기호를 추가하고 싶지만 수평 구분 기호만 찾을 수 있습니다.구분선 줄이 수평인지 수직인지 입력할 수 있는 속성이 없습니까?

많이 찾아봤지만, 짧고 쉬운 해결책을 찾지 못했어요.

.Net Framework 4.0과 Visual Studio Ultimate 2012를 사용하고 있습니다.

수평 세퍼레이터를 90도 회전시키면 다른 컴포넌트에 도킹할 수 없게 됩니다.

회전 세퍼레이터는 다음과 같습니다.

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

이렇게 하면 필자가 원하는 대로 실행할 수 있습니다.

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

로 구분하는 는, 「수평 구분」을 합니다.OrientationStackPanel로로 합니다.Vertical.

이것은 저자가 정확히 요구했던 것은 아니지만, 여전히 매우 간단하고 예상대로 작동한다.

직사각형은 다음 작업을 수행합니다.

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

예전에 여기서 본 스타일을 사용한 적이 있습니다.

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

, 하다, 하다, 하다에서 해야 합니다.LayoutTransformRenderTransform변환은 렌더 패스가 아닌 레이아웃 패스에서 이루어집니다.레이아웃 패스는 WPF가 컨트롤을 레이아웃하여 각 컨트롤이 차지하는 공간을 계산하려고 할 때 발생하는 반면 렌더 패스는 WPF가 컨트롤을 렌더링하려고 할 때 레이아웃 패스 후에 발생합니다.

두 가지 에 대해 수 있습니다.LayoutTransform ★★★★★★★★★★★★★★★★★」RenderTransform 여기나 여기나

수직 분리기

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

수평 분리기

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

저는 "라인" 컨트롤을 사용하는 것을 좋아합니다.세퍼레이터의 시작 및 종료 위치를 정확하게 제어할 수 있습니다.세퍼레이터는 아니지만 기능은 동일합니다.특히 StackPanel에서도 마찬가지입니다.

라인 컨트롤은 그리드 내에서도 동작합니다.서로 다른 컨트롤이 겹칠 염려가 없기 때문에 StackPanel을 사용하는 것이 좋습니다.

<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 시작 위치(수직선의 경우 0이어야 함)

X2 = x 끝 위치(수직 라인의 경우 X1 = X2)

Y1 = y 시작 위치(수직선의 경우 0이어야 함)

Y2 = y 종료 위치(Y2 = 원하는 라인 높이)

세로줄의 어느 쪽에나 패딩을 추가할 때 "마진"을 사용합니다.이 경우 세로줄 왼쪽에는 5픽셀, 오른쪽에는 10픽셀이 있습니다.

라인 컨트롤에서는 선의 시작과 끝의 x 및 y 좌표를 선택할 수 있으므로 수평선 및 선 사이의 모든 각도에 사용할 수도 있습니다.

이것은 매우 간단한 방법으로 기능 없이 모든 시각적인 효과를 얻을 수 있습니다.

그리드를 사용하면 간단하게 맞춤화할 수 있습니다.

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

그냥 다른 방법일 뿐이야

WPF 분리기를 수직으로 보이게 하는 것은 이제 모든 사람에게 분명해졌으므로 놀랄 만큼 어렵다.

디폴트로는 세퍼레이터는 수평이며, 세퍼레이터는 없습니다.OrientationAtribute, 그리고 그것은 수평 지향에 배치되는 것을 암시하지 않습니다.StackPanel.

사실, 세퍼레이터를 수직으로 보이도록 하는 것은 너무 어려워서 많은 답변들이 세퍼레이터를 사용하는 것을 제안합니다.Rectangle또는Line대신Separator냉정하지 않고 패배를 인정하는 거죠

한 가지 답변은 다음과 같습니다.ToolBar.SeparatorStyleKey이미 존재하며 작업을 수행합니다.단, 툴바와는 무관한 장소에서 세퍼레이터를 사용하고 싶기 때문에 이 솔루션을 별로 좋아하지 않습니다.따라서 이러한 컨텍스트에서 툴바를 언급하는 것은 불필요한 것입니다.

또 다른 답변은 다음과 같이 제안합니다.RotateTransform90도의 각도로, 그것도 작동하지만, 그 다음엔 세팅을 해야 합니다.Width세퍼레이터의 높이를 지정하기 위한 속성입니다만, 마음에 들지 않습니다.

그래서 저는 ToolBar Separator Style의 소스를 가져와 작업을 수행할 수 있는 최소값까지 제거했습니다.왜 다음 마법 주문이 원하는 결과를 얻었는지 전혀 알 수 없지만, 그것은 가능합니다.

<Style x:Key="VerticalSeparatorStyle" TargetType="Separator">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Separator">
                <Border Background="{TemplateBinding Panel.Background}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

다음과 같이 사용합니다.

<Separator Width="1" Margin="10 3 10 3" Background="Black" Style="
    {StaticResource VerticalSeparatorStyle}" />

(WPF는 이렇게 이야기가 진행됩니다.마법의 마법으로 프로그램을 짜고 있습니다.)

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 에서 :

이 예를 사용하여 고객의 요구에 적합한지 여부를 확인합니다.이 예에는 크게 세 가지 측면이 있습니다.

1. Line.Stretch는 fill로 설정되어 있습니다.

2. 수평선의 경우 선의 VerticalAlignment가 Bottom으로 설정되고 VerticalLines의 경우 HorizalAlignment가 Right로 설정됩니다.

3. 그런 다음 행 또는 열의 수를 지정해야 합니다. 이 작업은 RowDefinitions 또는 ColumnDefinitions 카운트 속성에 바인딩하여 수행됩니다.

   
   
   

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

사용하다

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

수직 분리기를 사용하는 또 다른 방법입니다.

<GridSplitter Width="3" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns" />

또한 열과 행의 크기를 조정할 수도 있습니다.

방법은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/13584998/how-to-add-a-vertical-separator