垂直セパレータを追加するにはどうすればよいですか?


113

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

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

.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か?
ポール

1
それは機能しますが、私が望むものではありません。セパレータはこれを行うためのコントロールである必要があります。方法がある必要があります^^
Martin Weber

四角形は、気に入らなくても、実際に使用していると思います
Martin Weber

1
Borderまた、解決策になることができます。..
マンゲシュ

回答:


192

これは、作者が望んでいたことを正確に実行するはずです。

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

あなたが水平方向の区切りをしたい場合は、変更するOrientationのをStackPanelしますVertical


4
私の場合、セパレータにはスタイルだけが必要で、外側のStackPanelは必要ありませんでした。
2016

私は常に実装しましたRenderTransform。覚えるべききちんとしたショートカット:)
アシュリーグレノン2016

3
答えになるはずです、これが一番いいです。なぜ3番目の回答として表示されるのかわからない!
Tatranskymedved

s MenuMenuItemの水平方向と垂直方向の両方で完璧に機能します。メニューの高さ/幅に一致するように常に適切に伸縮します。
natiiix

50

これは、作者が尋ねたとおりではありませんが、それでも非常に単純で、期待どおりに機能します。

長方形は仕事をします:

<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-designerでコントロールをドッキングできません。たぶんvs2012のバグ?
Martin Weber

@MartinWeber VSでコントロールを「ドッキング」することの意味がわかりません。セパレーターはどのタイプのパネルでホストされていますか?の場合はDockPanel、ドッキングする側に設定できDockPanel.DockますSeparator。WPFでは、通常、コントロールをホストするパネルがコントロールの位置を決定し、デフォルトのサイズを決定することもあります。WPFのレイアウトを初めて使用する場合は、この記事を読むことをお勧めします。WPFレイアウト-ビジュアルクイックスタート
Rachel

リンクをありがとう!それを読みます。はい、WPFは初めてです。「ドッキング」とは、あるコントロールを別のコントロールの近くにドラッグすると、赤い線が表示されるため、1行のすべてのコントロールが実際には1行にあることを意味します。vs2012からのヘルパーです。セパレーターを回転させると、これらの線が表示されなくなります。
Martin Weber

1
@MartinWeber申し訳ありませんが、これ以上はお役に立てません。私はVS2010を使用しており、ドラッグアンドドロップデザイナーはまったく使用しません。XMALの混乱を維持したくないためです。ここで、この質問は、より多くの縦のセパレータを作成する方法に焦点を当てているようだと、おそらく、特にあなたのVisual Studioデザイナーの問題のために新しい質問を作成し、より良い運を持っているでしょう
レイチェル

ヒントをありがとうございます。DesignerなしでXAMLを試し、いくつかのチュートリアルを読みます。多分私が物事をよりよく理解したら、私は自分で問題を解決します;)
Martin Weber

11

「Line」コントロールを使用したい。セパレーターの開始位置と終了位置を正確に制御できます。これは厳密にはセパレータではありませんが、特に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"/>
アンソニー・ニコルズ

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

この例を試してみて、ニーズに合っているかどうかを確認してください。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
<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.