EightyOne Unite
EightyOne Unite

Reputation: 11795

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

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.

Upvotes: 42

Views: 39562

Answers (7)

dthorpe
dthorpe

Reputation: 36072

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. ;>

Upvotes: 0

Nir
Nir

Reputation: 29584

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>

Upvotes: 17

Tri Q Tran
Tri Q Tran

Reputation: 5690

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.

Upvotes: 1

JB.
JB.

Reputation: 645

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);

Upvotes: 10

Pop Catalin
Pop Catalin

Reputation: 62920

Like so:

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

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

Upvotes: 59

Ria
Ria

Reputation: 364

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.

Upvotes: 2

Oleg
Oleg

Reputation: 1100

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.

Upvotes: 4

Related Questions