web-dev-qa-db-ja.com

スタックパネルのアイテムを整列しますか？

水平方向のStackPanelに2つのコントロールを配置して、正しいアイテムをStackPanelの右側にドッキングできるようにすることができるかどうか疑問に思っていました。

私は以下を試しましたが、うまくいきませんでした：

<StackPanel Orientation="Horizontal">
    <TextBlock>Left</TextBlock>
    <Button Width="30" HorizontalAlignment="Right">Right<Button>
</StackPanel>

上記のスニペットでは、ButtonをStackPanelの右側にドッキングする必要があります。

注：Gridなどではなく、StackPanelで行う必要があります。

wpflayoutwpf-controlsstackpanelalignment
129
Shimmy

DockPanelでこれを達成できます：

<DockPanel Width="300">
    <TextBlock>Left</TextBlock>
    <Button HorizontalAlignment="Right">Right</Button>
</DockPanel>

違いは、 StackPanelは子要素を1行に配置します （垂直または水平のいずれか）に対して、 DockPanelは子要素を配置できる領域を定義することです互いに対して水平または垂直に （Dockプロパティは、同じコンテナ内の他の要素に対する要素の位置を変更します。HorizontalAlignmentなどの整列プロパティは、親要素に相対的な要素）。

更新

コメントで指摘したように、FlowDirectionのStackPanelプロパティも使用できます。 @D_Besterの answer を参照してください。

201
Dirk Vollmar

YoはStack panelのFlowDirectionをRightToLeftに設定でき、すべてのアイテムが右側に揃えられます。

62
RusBog

この質問に出くわした人のために、このレイアウトを実現する方法を次に示しますwith a Grid：

<Grid>
    <TextBlock Text="Server:"/>
    <TextBlock Text="http://127.0.0.1" HorizontalAlignment="Right"/>
</Grid>

作成する

Server:                                                                   http://127.0.0.1
26
mopsled

DockPanelを使用してこれを思い通りに動かすことができず、StackPanelの流れの方向を逆にするのは面倒です。グリッドを使用することはオプションではありません。グリッド内の項目は実行時に非表示になる可能性があり、したがって設計時に列の総数がわかりません。私が思いつくことのできる最良かつ最も簡単な解決策は次のとおりです。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="1" Orientation="Horizontal">
        <!-- Right aligned controls go here -->
    </StackPanel>
</Grid>

これにより、デザイン時および実行時の両方で、コントロールの数に関係なく、StackPanel内のコントロールが使用可能なスペースの右側に揃えられます。わーい！ :)

17
Ross

これは私にとって完璧に機能します。右から始めているので、ボタンを最初に置いてください。 FlowDirectionが問題になる場合は、その周りにStackPanelを追加し、その部分にFlowDirection = "LeftToRight"を指定するだけです。または、関連するコントロールにFlowDirection = "LeftToRight"を指定するだけです。

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft">
    <Button Width="40" HorizontalAlignment="Right" Margin="3">Right</Button>
    <TextBlock Margin="5">Left</TextBlock>
    <StackPanel FlowDirection="LeftToRight">
        <my:DatePicker Height="24" Name="DatePicker1" Width="113" xmlns:my="http://schemas.Microsoft.com/wpf/2008/toolkit" />    
    </StackPanel>
    <my:DatePicker FlowDirection="LeftToRight" Height="24" Name="DatePicker1" Width="113" xmlns:my="http://schemas.Microsoft.com/wpf/2008/toolkit" />    
</StackPanel>
5
D_Bester
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>
3
Attif

windows 10では、スタックパネルの代わりにrelativePanelを使用し、

relativepanel.alignrightwithpanel = "true"

含まれる要素。

0
Ahmed.Net

垂直スタックパネルのラベルが中央に配置されているような問題が発生している場合は、必ず全幅コントロールを使用してください。 Widthプロパティを削除するか、内部配置を許可する全幅コンテナーにボタンを配置します。 WPFは、コンテナを使用してレイアウトを制御することについてすべてです。

<StackPanel Orientation="Vertical">
    <TextBlock>Left</TextBlock>
    <DockPanel>
        <Button HorizontalAlignment="Right">Right</Button>
    </DockPanel>
</StackPanel>

左ラベルの後に右ボタンが続く垂直StackPanel

これがお役に立てば幸いです。

0
Christopher Zahrobsky