web-dev-qa-db-ja.com

垂直セパレータを追加する方法は？

グリッドに垂直セパレータを追加したいのですが、水平しか見つけることができません。セパレーターの行を水平または垂直にする必要がある場合に入力できるプロパティはありませんか？

私はよく検索しましたが、これに対する短くて簡単な解決策は見つかりませんでした。

.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>
wpfxamlvisual-studio-2012separator
99
Martin Weber

これは、著者が望んだことを正確に行う必要があります。

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

水平セパレータが必要な場合は、OrientationのStackPanelをVerticalに変更します。

164
Emmanuel Romulus

これは著者が求めたものとまったく同じではありませんが、それでも非常にシンプルで、期待どおりに機能します。

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>
45
Anton Purin

過去に、私は見つけたスタイルを使用しました 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}" />

変換はLayoutTransformの代わりにRenderTransformで設定する必要があります。これにより、Renderパスではなくレイアウトパスで変換が行われます。レイアウトパスは、WPFがコントロールをレイアウトして各コントロールが占めるスペースを把握しようとするときに発生し、レンダリングパスは、WPFがコントロールをレンダリングしようとするレイアウトパスの後に発生します。

LayoutTransformとRenderTransformの違いについて詳しく読むことができます here または here

21
Rachel

「ライン」コントロールを使用するのが好きです。セパレータの開始位置と終了位置を正確に制御できます。厳密にはセパレーターではありませんが、特に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座標を選択できるため、水平線およびその間の任意の角度の線にも使用できます。

9
Kevin K

これは、機能も視覚効果も一切持たない非常に簡単な方法です。

グリッドを使用して、単純にカスタマイズします。

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

それを行う別の方法。

2
Connor Mcgrann

から 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-content-control-like-grid？forum = wpf ：

この例を試して、ニーズに合っているかどうかを確認してください。3つの主な側面があります。

  1. Line.Stretchは塗りつぶしに設定されます。

  2. 水平線の場合、線のVerticalAlignmentはBottomに設定され、VerticalLinesの場合、Horizo​​ntalAlignmentは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
VoteCoffee

ここに私がそれをした方法があります：

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