How do I get stackpanel to resize to fit the controls it's stacking?

Question

I'm making a toolbar. I want the width of the window to equal the total width of the buttons. StackPanel seems perfect for the job because it lines everything up, but it won't stretch.

  <Window Width="auto">
     <StackPanel Orientation="Horizontal" Width="auto">
        <Button />
        <Button />
     </StackPanel>
  </Window>

How do I make this work?

score 9 · Accepted Answer · edited May 23 '17 at 12:23

9

I found a very simple solution! Almost everybody (I've been searching tons of pages) suggests switching control types or something much more complex, but in fact, it's much simpler:

<Window         SizeToContent="Width"

That's the only change required.

The source of this bit: https://stackoverflow.com/a/2317914/971583, the second-ranked answer to the problem, which seems to me the better one.

edited May 23 '17 at 12:23

Community

1
1

answered Feb 22 '16 at 17:56

Alan Baljeu

2,383
4
25
40

However, this reply is not stretching your buttons:) – StepUp Feb 22 '16 at 18:00
4

Who said anything about stretching buttons. I want the container to resize. – Alan Baljeu Feb 22 '16 at 18:01

StepUp · Answer 2 · 2016-02-22T17:59:47.897

You can make the width of the window to equal the total width of the buttons using a UniformGrid instead of a StackPanel.

<UniformGrid Margin="10" Rows="1" HorizontalAlignment="Right"
            VerticalAlignment="Bottom">
    <Button Grid.Column="0" Content="No" FontSize="18" Margin="5" Padding="6,3"/>
    <Button Grid.Column="1" Content="Yes, Absolutely" Margin="5" Padding="6,3"/>
    <Button Grid.Column="2" Content="Maybe" Margin="5" Padding="6,3"/>
</UniformGrid>

The UniformGrid provides eacg cell is the same height and the same width. This is what you want as you then avoid having to set the button sizes manually.

Update:

I would suggest not to use Stackpanel. Even if you make the Stackpanel fill its parent, its children still "stacks" and won't fill the Stackpanel.

re, edit: I'm not trying to get StackPanel to fill the parent. I'm trying to get the parent to grow/shrink to fit the StackPanel. — Alan Baljeu, Feb 22 '16 at 21:41

score 1 · Answer 3 · answered Jun 18 '20 at 18:08

Depending on your setting, you can achieve that simply using StackPanel's alignments. For example this XAML

<Window Width="350" Height="350" ...> 
    <Grid>
        <StackPanel
            Background="Green">
            <Border
                Width="100"
                Height="100"
                Background="Blue" />
            <Border
                Width="100"
                Height="100"
                Background="Red" />
        </StackPanel>
    </Grid>
</Window>

Will create this (the panel stretches to parent's size):

And this panel:

<Window Width="350" Height="350" ...> 
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Background="Green">
            <Border
                Width="100"
                Height="100"
                Background="Blue" />
            <Border
                Width="100"
                Height="100"
                Background="Red" />
        </StackPanel>
    </Grid>
</Window>

Will create this (sized to the two contained Borders):

score 0 · Answer 4 · answered Feb 22 '16 at 17:26

0

Use a Grid with Columns instead.

<Grid HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button />
    <Button Grid.Column="1" />
    <Button Grid.Column="2" />
    <Button Grid.Column="3" />
</Grid>

answered Feb 22 '16 at 17:26

Jonathan LEI

21
4

3

I don't like grid, because I have to put in all these column definitions. If I add more controls, I need to update all the column numbers. It seems to me that Grid is useful when you have a rectangle with multiple rows of controls. A single row doesn't seem to make sense. – Alan Baljeu Feb 22 '16 at 17:39

How do I get stackpanel to resize to fit the controls it's stacking?

4 Answers4