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


114

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

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

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

3
그냥 스타일을 사용할 수 Rectangle없습니까?
paul

1
작동하지만 내가 원하는 것은 아닙니다. 구분자는이를 수행하는 컨트롤이어야합니다. 방법 ^^이 있어야한다
마틴 웨버

나는 내가 그것을 좋아하지 않더라도 지금 실제로 Rectangle을 사용한다고 생각한다
Martin Weber

1
Border또한 해결책이 될 수 있습니다.
Mangesh

답변:


193

이것은 저자가 원하는 것을 정확하게 수행해야합니다.

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

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


4
제 경우에는 둘러싸는 StackPanel이 아니라 구분 기호에 스타일 만 필요했습니다.
Xtr

나는 항상 RenderTransform. 깔끔한 바로 가기 : 기억
애슐리 Grenon에게

3
대답이 될 것입니다.이 si가 최고입니다. 왜 세 번째 답변으로 표시되는지 잘 모르겠습니다!
Tatranskymedved

s Menu사이 MenuItem의 수평 및 수직 모두에서 완벽하게 작동합니다 . 메뉴의 높이 / 너비에 맞게 항상 잘 늘어납니다.
natiiix

50

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

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>

2
이것은 UWP에서 잘 작동합니다. 대신 스트로크 색상의 얇은 라인을 사용 채우기 필요하고 3 폭을 설정 한 경우 : <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />
안토니 니콜스

25

과거에는 여기 에서 찾은 스타일을 사용했습니다

<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가 컨트롤을 렌더링하려고 할 때 레이아웃 단계 후에 발생합니다.

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


그거 좋을 거 같아. 그러나 그다지 변하지 않습니다. 여전히 vs2012의 GUI 디자이너에서 컨트롤을 도킹 할 수 없습니다. vs2012의 버그일까요?
Martin Weber

@MartinWeber VS에서 컨트롤을 "도킹"한다는 것이 무슨 뜻인지 잘 모르겠습니다. 구분자가 호스팅되는 패널 유형은 무엇입니까? 그것은이 있다면 DockPanel, 당신은 설정 할 수 있어야합니다 DockPanel.Dock당신의 Separator어떤면 당신이에 도킹 할 수 있습니다. WPF를 사용하면 컨트롤을 호스팅하는 패널이 일반적으로 컨트롤의 위치를 ​​결정하고 때로는 기본 크기를 결정합니다. WPF의 레이아웃을 처음 사용하는 경우 다음 문서를 읽는 것이 좋습니다. WPF 레이아웃-시각적 빠른 시작
Rachel

링크 주셔서 감사합니다! 나는 그것을 읽을 것이다. 예, 저는 WPF를 처음 사용합니다. "도킹"이란 컨트롤을 다른 컨트롤 근처로 끌면 빨간색 선이 표시되어 한 줄의 모든 컨트롤이 실제로 한 줄에 있다는 의미입니다. vs2012의 도우미입니다. 구분선을 회전 할 때이 선이 더 이상 표시되지 않습니다.
Martin Weber

1
@MartinWeber 죄송합니다. 더 이상 도움을 드릴 수 없습니다. 저는 VS2010을 사용하며 일반적으로 드래그 / 드롭 디자이너를 전혀 사용하지 않습니다. 종종 필요하지 않다고 생각하고 XMAL이 생성하는 엉망을 유지하고 싶지 않기 때문입니다. :) 당신 Visual Studio 디자이너 문제에 대한 새 질문을 만드는 것이 더 좋을 것입니다. 여기에있는이 질문은 세로 구분 기호를 만드는 방법에 더 초점을 맞추는 것 같습니다
Rachel

귀하의 팁에 감사드립니다. 디자이너없이 XAML을 시도하고 몇 가지 자습서를 읽어 보겠습니다. ) 나는 사물의 더 나은 이해를 얻을 어쩌면 만약 내가 문제 직접 해결한다
마틴 웨버

11

"라인"컨트롤을 사용하고 싶습니다. 구분자가 시작되고 끝나는 위치를 정확하게 제어 할 수 있습니다. 정확히 구분 기호는 아니지만 특히 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 좌표를 선택할 수 있으므로 가로선과 그 사이의 모든 각도에서 선에 사용할 수도 있습니다.


2

이것은 기능과 시각 효과가없는 아주 간단한 방법입니다.

그리드를 사용하고 간단히 사용자 정의하십시오.

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

그것을하는 또 다른 방법.


2
우수한!!!! 이런 식으로 해결했지만 같은 생각 : <Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/>
Anthony Nichols

2

수직 분리기

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

수평 분리기

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

0

에서 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가 채우기로 설정됩니다.

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

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


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>

사용하다

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.