Grid inside a StackPanel: why do auto and * behave strangely?

Question

My google and stackoverflow search-fu have failed me, so I present to the community this question.

(This is all generated using VS2010 and .NET 4.0, in a blank default WPF Solution)

Consider the following XAML:

<StackPanel Orientation="Horizontal">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Border Name="aborder" Grid.Column="0" Grid.ColumnSpan="2" 
                    Background="Red" Width="200"/>
        <Border Name="aborder2" Background="Green"/>

    </Grid>
</StackPanel>

What would you predict the width of "aborder2" to be?

If you guessed "20 pixels", you would be wrong. The correct answer is 110 pixels.

Consider this XAML:

    <StackPanel Orientation="Horizontal">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Border Name="aborder" Grid.Column="0" Grid.ColumnSpan="2" 
                    Background="Red" Width="200"/>
        <Border Name="aborder2" Background="Green"/>

    </Grid>
</StackPanel>

What would you predict the width of "aborder2" to be?

If you guessed either 20 pixels or 110 pixels, you would be wrong. The correct answer is 200 pixels.

I cannot figure this out and it's driving me insane. It seems like the answer should be obvious; clearly there's some interaction between an auto-filling grid column and the stackpanel that causes the grid to freak out. But it just doesn't seem to make sense - whatever rules are governing this behavior seem to be arbitrary. Why 110 pixels? Why not 109 pixels or 100 pixels? I would understand if the auto-sized column failed to expand fully or something, but to have the fixed-width column randomly ignore its width has left me a burnt out shell of a developer.

Any help or guiding lights would be much appreciated!

I didn't think to put one in since it should default to column 0. I just tested it and explicitly setting the column doesn't seem to make a difference. — pfw, Nov 18 '11 at 21:21
It's worth noting that this only occurs when StackPanel Orientation is Horizontal. It doesn't occur in a Horizontal WrapPanel, even though that has similar layout measurement rules. I'm guessing this is a bug. I would generally recommend avoiding putting things that want to expand (in the stack direction) into a StackPanel, as taking on the minimum size that meets constraints is rarely the desired behavior. — Dan Bryant, Nov 18 '11 at 22:29

Rachel · Accepted Answer · 2011-11-18T21:21:53.777

6

I have no idea why the first example isn't rendering correctly

The 2nd is because Auto means "the same size as the contents", but you have nothing in Column2 so Column2 is getting rendered at 0px. You have something in Column1 which spans 2 cells, but since Column2 is rendered at 0 px it means Column1 is stretched to 200 px. By default, Grid's expand their children to fill all available space in the Cell, so this is making aborder2 stretch to 200px instead of 20.

I think the first example might be a similar situation, where Column2 is rendering at 0px because it has no content, however I am not sure why it is setting aborder2 to a width of 110. The 110 seems to come from (GridWidth / TotalColumns) + (1stColumnWidth / TotalColumns * NumberOfStarColumns), so I think it's a bug.

As a side note, you can set a Column1's MaxWidth="20" to force Column1 to always render as 20px

edited Nov 18 '11 at 21:21

answered Nov 18 '11 at 21:15

Rachel

130,264
66
304
490

1

Well, at least you derived the formula to determine 110px so you win an upvote! I couldn't find any relationship myself. – pfw Nov 18 '11 at 21:23
The second column renders at 90px, not 0, in the first example. The first column renders at 110 (110 + 90 = 200 to accommodate `aborder1`, though I don't know why they're rendered at these sizes), and `aborder2` is stretching to fill it. – Esoteric Screen Name Nov 18 '11 at 22:01
Interesting observation that setting MaxWidth prevents the resizing. – Dan Bryant Nov 18 '11 at 22:34
Figured I'd flag this as the answer since the edit provides a workaround and no more seem forthcoming. – pfw Nov 21 '11 at 21:05

Bill Reiss · Answer 2 · 2011-11-18T21:06:38.627

No answer for you, but it seems to happen in Silverlight too. I'd assume there's some bug in the arrange and measure passes. If you put a custom control in there instead of a border and override the measure and arrange methods you would probably get a better picture of what's going on.

To try to solve the mystery of where 110 comes from, I'm guessing (200 - 20) / 2 + 20

EDIT: I tried a few other formulas and it didn't hold up, looks more like:

(200 + 20) / 2

Grid inside a StackPanel: why do auto and * behave strangely?

2 Answers2