スタックパネルでアイテムを揃えますか？

水平方向のStackPanelに2つのコントロールを配置して、適切なアイテムをStackPanelの右側にドッキングできるかどうかを考えていました。

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

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

上のスニペットでは、ButtonをStackPanelの右側にドッキングします。

注：グリッドなどではなく、StackPanelで実行する必要があります。

これは次のようにして実現できますDockPanel。

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

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

更新

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

ヨは、設定することができますFlowDirectionのStack panelにRightToLeftし、すべての項目が右側に整列されます。

この質問つまずく人のために、ここでこのレイアウトを実現する方法だとGrid：

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

作成する

Server:                                                                   http://127.0.0.1

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内のコントロールが使用可能なスペースの右側に配置されます。わーい！:)

これは私にとって完璧に機能します。右側から始めているので、ボタンを最初に置いてください。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>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>

Windows 10の場合、スタックパネルの代わりにrelativePanelを使用し、

relativepanel.alignrightwithpanel = "true"

含まれる要素。

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

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

左のラベルとそれに続く右のボタンがある垂直方向のStackPanel

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

サイズ値のハードコーディングを回避する必要がある場合は、おそらくあなたが望むものではないかもしれませんが、私はこれに「シム」（セパレータ）を使用することがあります：

<Separator Width="42"></Separator>