How can a WPF StackPanel fill vertically from bottom to top?

Question

I need to be able to fill a stackpanel with buttons but the buttons must appear at the bottom of the stackpanel first and populate upwards. The buttons are created dynamically and there's an unknown number of them so visual hackery just won't work. I've tried experimenting with vertical alignments but to no avail.

Thanks in advance.

Answer 1

The best way to solve the problem is to implement custom container derived from stackpanel but quick and dirty solution if elements are added at runtime is

    public Window1()
    {
        InitializeComponent();
        for (int i = 0; i < 10; i++)
        {
            Button btn = new Button();
            btn.Content = "Button " + i;
            MyStack.Children.Insert(0, btn);
        }
    }

Just insert item at 0 position instead of adding them.

Answer 2

Try putting the StackPanel inside another container (not a StackPanel; maybe a DockPanel) and bottom-aligning it. Then when you populate the buttons, put each new one into the first position.

Answer 3

Like so:

<StackPanel VerticalAlignment="Bottom">
    ...
</StackPanel>

and to populate with buttons upward you must insert the buttons at position 0, instead of adding them.

Answer 4

Thanks guys. Still lot's to learn with WPF!

Answer 5

Another alternative is to use a DockPanel instead.

Just set the LastChildFill to false on the DockPanel.

Then set the attached Dock property to each button you are adding to Bottom before adding to the DockPanel.

example :

            var button = new Button();
            DockPanel.SetDock(button, Dock.Bottom);

Answer 6

I found that using a UniformGrid with Column=1 gives a neat filling stack, or set Rows=1 give a neat horizonatally filled stack. And adding from the index 0 will work from bottom up.

Answer 7

Or you can rotate the StackPanel 180 degrees to get the buttons to stack from the bottom to the top and then rotating the buttons another 180 degrees to get them right-side-up again:

<StackPanel>
    <!-- rotate all buttons inside this panel -->
    <StackPanel.Resources>
        <Style TargetType="Button">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <RotateTransform Angle="180"/>
                </Setter.Value>
            </Setter>
        </Style>
    </StackPanel.Resources>

    <!-- rotate the stack panel -->
    <StackPanel.LayoutTransform>
       <RotateTransform Angle="180"/>
    </StackPanel.LayoutTransform>

    <!-- content -->
    <Button>1</Button>
    <Button>2</Button>

</StackPanel>

Answer 8

Love the transforms solution by Nir. I was wondering if it could be done using transforms.

One caveat, though: Don't use the transforms trick on a ScrollView based control such as a ListBox because the scroll bar operation will be inverted from the content. Hilarious to watch, as long as you're not the end user. ;>