133

グリッドに垂直セパレータを追加したいのですが、水平セパレータしか見つかりません。セパレーターの線が水平か垂直かを入力できるプロパティはありませんか?

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

.Net Framework 4.0 と Visual Studio Ultimate 2012 を使用しています。

水平 Separator を 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>
4

11 に答える 11

58

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

長方形は仕事をします：

<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>
于 2014-03-20T10:56:57.433 に答える
26

過去に私はここにあるスタイルを使用しました

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

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

と の違いについて詳しくはLayoutTransform、RenderTransform こちらまたはこちらをご覧ください。

于 2012-11-27T15:11:22.747 に答える
13

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

于 2016-06-19T04:50:47.813 に答える
2

これは非常に単純な方法で、機能はなく、すべての視覚効果があり、

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

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

それを行う別の方法です。

于 2016-01-27T14:58:25.113 に答える
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 :

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

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

  2. 水平線の場合、線の VerticalAlignment は Bottom に設定され、VerticalLines の場合、Horizo​​ntalAlignment は Right に設定されます。

  3. 次に、何行または何列にまたがるかを行に伝える必要があります。これは、RowDefinitions または 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}"/>

于 2014-10-06T19:58:10.170 に答える