[wpf] 세로 구분 기호를 추가하는 방법은 무엇입니까?

그리드에 세로 구분자를 추가하고 싶지만 가로 만 찾을 수 있습니다. 구분선이 가로인지 세로인지 입력 할 수있는 속성이 없나요?

나는 많이 검색했지만 이것에 대한 짧고 쉬운 해결책을 찾지 못했습니다.

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

당신은 수평 분리를 원하는 경우, 변경 Orientation의를 StackPanel에 Vertical.

답변

이것은 저자가 요청한 것과 정확히 같지는 않지만 여전히 매우 간단하고 예상대로 정확하게 작동합니다.

Rectangle은 다음 작업을 수행합니다.

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

LayoutTransform대신 에서 변환을 설정해야 RenderTransform렌더 단계가 아닌 레이아웃 단계에서 변환이 발생합니다. 레이아웃 단계는 WPF가 컨트롤을 레이아웃하고 각 컨트롤이 차지하는 공간을 파악하려고 할 때 발생하는 반면, 렌더 단계는 WPF가 컨트롤을 렌더링하려고 할 때 레이아웃 단계 후에 발생합니다.

LayoutTransform및 RenderTransform 여기 또는 여기 의 차이점에 대해 자세히 읽을 수 있습니다.

답변

“라인”컨트롤을 사용하고 싶습니다. 구분자가 시작되고 끝나는 위치를 정확하게 제어 할 수 있습니다. 정확히 구분 기호는 아니지만 특히 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"/>

그것을하는 또 다른 방법.

답변

수직 분리기

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

수평 분리기

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

답변

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

이 예제를 시도해보고 그것이 당신의 필요에 맞는지 확인하십시오. 세 가지 주요 측면이 있습니다.

Line.Stretch가 채우기로 설정됩니다.
수평선의 경우 선의 VerticalAlignment가 Bottom으로 설정되고 VerticalLines의 경우 HorizontalAlignment가 Right로 설정됩니다.

그런 다음 행 또는 열 수를 줄에 알려야합니다. 이것은 RowDefinitions 또는 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}"/>