Align items in a stack panel?

Shimmy Weitzhandler picture Shimmy Weitzhandler · Jan 7, 2010 · Viewed 167.5k times · Source

I was wondering if I can have 2 controls in a horizontal-oriented StackPanel so that the right item should be docked to the right side of the StackPanel.

I tried the following but it didn't work:

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

In the snippet above I want the Button to be docked to the right side of the StackPanel.

Note: I need it to be done with StackPanel, not Grid etc.

Answer

Dirk Vollmar picture Dirk Vollmar · Jan 7, 2010

You can achieve this with a DockPanel:

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

The difference is that a StackPanel will arrange child elements into single line (either vertical or horizontally) whereas a DockPanel defines an area where you can arrange child elements either horizontally or vertically, relative to each other (the Dock property changes the position of an element relative to other elements within the same container. Alignment properties, such as HorizontalAlignment, change the position of an element relative to its parent element).

Update

As pointed out in the comments you can also use the FlowDirection property of a StackPanel. See @D_Bester's answer.