Why does star sizing in a nested grid not work?

Question

Consider the following XAML:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <Button Content="Button" HorizontalAlignment="Left"/>
  <Grid Grid.Column="1">
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Button Content="B" Margin="5"/>
    <Button Content="Button" Grid.Column="1" Margin="5"/>
  </Grid>
</Grid>

In the above, all ColumnDefinition values except one use the default value for Width, which is "*", i.e. "star sizing". The one exception is the column containing the nested Grid control, which is set to "Auto".

The way I expect this to work is as follows:

• The outer Grid sizes the second column according to the needs of its content, and then assigns the remaining width of the control to the first column.
• The inner Grid distributes its available space evenly to the two columns. After all, they both are set to use star sizing, and star sizing is supposed to set the GridLength property (width, in this case) to a weighted distribution of available space. The minimum layout size for this inner Grid (needed for the outer Grid to compute the width of its second column) is the sum of evenly-distributed-width, star-sized columns (i.e. in this case, two times the width of the column with the widest content).

But instead, the column widths for the nested grid are set according to the computed minimum size of each button, with no apparent weighted relationship between the two star-sized columns (gridlines are shown for clarity):

It works as expected if I don't have the outer grid, i.e. just make the inner grid the only grid in the window:

The two columns are forced to be the same size, and then of course the left-hand button is stretched to fit the size of its containing cell (which is what I want…the end goal is for those two buttons to have the same width, with the grid columns providing the layout to accomplish that).

In this particular example, I can use UniformGrid as a work-around, to force even distribution of column widths. This is how I want it actually to look (UniformGrid doesn't have a ShowGridLines property, so you just have to imagine the imaginary line between the two right-most buttons):

But I really would like to understand more generally how to accomplish this, so that in more complex scenarios I would be able to use star-sizing in a nested Grid control.

It seems that somehow, being contained within the cell of another Grid control is changing the way that star sizing is computed for the inner Grid control (or preventing star sizing from having any effect at all). But why should this be? Am I missing (yet again) some esoteric layout rule of WPF that explains this as "by design" behavior? Or is this simply a bug in the framework?

Update:

I understand Ben's answer to mean that star-sizing should be distributing only the left-over space after the minimum sizes for each column has been accounted for. But that is not what one sees in other scenarios.

For example, if the column containing the inner grid has been sized explicitly, then using star-sizing for the inner grid's columns results in the columns being sized evenly, just as I'd expect.

I.e. this XAML:

<Grid ShowGridLines="True">
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <!--
    <ColumnDefinition Width="Auto"/>
    -->
    <ColumnDefinition Width="60"/>
  </Grid.ColumnDefinitions>
  <Button Content="Button" HorizontalAlignment="Left"/>
  <Grid Grid.Column="1" ShowGridLines="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Button Content="B" Margin="5"/>
    <Button Content="Button" Grid.Column="1" Margin="5"/>
  </Grid>
</Grid>

produces this output:

In other words, at worst, I'd expect WPF to first calculate the minimum size of the inner grid without considering the star-sizing (e.g. if the short button takes 10 pixels and the long button takes 70, then the total width would be 80), and then still distribute evenly the column widths (i.e. in the 10/70 example, each column would wind up with 40 pixels, truncated the longer button, similar to the above image).

Why should star-sizing sometimes evenly distribute the widths across columns and sometimes not?

Update #2:

Here is a simple example that shows clearly and dramatically how WPF treats star-sizing differently depending on whether it's the one to compute the Grid width or you are:

<Window x:Class="TestGridLayout2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        SizeToContent="WidthAndHeight"
        Title="MainWindow">
  <Window.Resources>
    <Style TargetType="Border">
      <Setter Property="BorderBrush" Value="Black"/>
      <Setter Property="BorderThickness" Value="1"/>
    </Style>
    <Style TargetType="TextBlock">
      <Setter Property="FontSize" Value="24"/>
    </Style>
  </Window.Resources>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>

    <Border Grid.Column="0"/>
    <Border Grid.Column="1"/>

    <StackPanel>
      <TextBlock Text="Some text -- one"/>
      <TextBlock Text="Some text -- two"/>
      <TextBlock Text="Some text -- three"/>
    </StackPanel>
    <StackPanel Grid.Column="1">
      <TextBlock Text="one"/>
      <TextBlock Text="two"/>
      <TextBlock Text="three"/>
    </StackPanel>
  </Grid>
</Window>

When you run the program, you see this:

WPF has ignored star-sizing, setting each column width to its minimum. If you simply click on the window border, as if to resize the window (you don't even have to actually drag the border anywhere), the Grid layout gets redone, and you get this:

At this point, the star-sizing gets applied (as I'd expect) and the columns are proportioned according to the XAML declarations.

Answer 1

I would agree that Ben's answer strongly hints at what might be going on underneath the covers here:

As Ben points out, WPF is ignoring the star-sizing for the purposes of computing the inner Grid object's minimum width (perhaps reasonably…I think there's room for honest debate, but clearly that's one possible and legitimate design).

What's not clear (and which Ben does not answer) is why this should then imply that star-sizing is also ignored when it comes time to calculate the column widths within that inner Grid. Since when a width is imposed externally, proportional widths will cause content to be truncated if necessary to preserve those proportions, why does the same thing not happen when the width is computed automatically based on the minimum required sizes of the content.

I.e. I'm still looking for the answer to my question.

In the meantime, IMHO useful answers include work-arounds to the issue. While not actual answers to my question per se, they are clearly helpful to anyone who may run across the issue. So I'm writing this answer to consolidate all the known work-arounds (for better or worse, one big "feature" of WPF is that there always seems to be at least a few different ways to accomplish the same result :) ).

Workaround #1:

Use UniformGrid instead of Grid for the inner grid object. This object does not have all the same features as Grid and of course doesn't allow for any columns to be of different width. So it may not be useful in all scenarios. But it does easily address the simple one here:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <Button Content="Button" HorizontalAlignment="Left"/>
  <UniformGrid Rows="1" Columns="2" Grid.Column="1">
    <Button Content="B" Margin="5"/>
    <Button Content="Button" Grid.Column="1" Margin="5"/>
  </UniformGrid>
</Grid>

Workaround #2:

Bind the MinWidth property of the smaller content object (e.g. here, the first Button in the grid) to the ActualWidth property of the larger one. This of course requires knowing which object has the largest width. In localization scenarios, that could be problematic, as the XAML would have to be localized in addition to the text resources. But that is sometimes necessary anyway, so… :)

That would look something like this (and is essentially what answerer dub stylee provided as an answer here):

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <Button Content="Button" HorizontalAlignment="Left"/>
  <Grid Grid.Column="1">
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Button Content="B" Margin="5"
            MinWidth="{Binding ElementName=button2, Path=ActualWidth}"/>
    <Button x:Name="button2" Content="Button" Grid.Column="1" Margin="5"/>
  </Grid>
</Grid>

A variation (which for brevity I won't include here) would be to use a MultiBinding that takes all of the relevant controls as input and returns the largest MinWidth of the collection. Of course, then this binding would be used for the Width of each ColumnDefinition, so that all the columns were explicitly set to the largest MinWidth.

There are other variations on the binding scenario as well, depending on which widths you want to use and/or set. None of these are ideal, not just because of the potential localization issues, but also because it embeds more explicit relationships into the XAML. But in many scenarios, it will work perfectly.

Workaround #3:

By using the SharedSizeGroup property of the ColumnDefinition values, it is possible to explicitly force a group of columns to have the same width. In this approach, the inner Grid object's minimum width is then computed on that basis, and of course the widths wind up the same too.

For example:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <Button Content="Button" HorizontalAlignment="Left"/>
  <Grid Grid.Column="1" IsSharedSizeScope="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition SharedSizeGroup="buttonWidthGroup"/>
      <ColumnDefinition SharedSizeGroup="buttonWidthGroup"/>
    </Grid.ColumnDefinitions>
    <Button Content="B" Margin="5"/>
    <Button Content="Button" Grid.Column="1" Margin="5"/>
  </Grid>
</Grid>

This approach allows one to use Grid, and so get all the normal features of that object, while addressing the specific behavior of concern. I would expect it not to interfere with any other legitimate use of SharedSizeGroup.

However, it does imply "Auto" sizing, and precludes "*" (star) sizing. In this particular scenario, that's not a problem, but as in the case of the UniformGrid work-around, it does limit one's options when trying to combine this with other sizing. E.g. having a third column use "Auto" and wanting the SharedSizeGroup columns to take the remaining space of the Grid.

Still, this would work in many scenarios without any trouble at all.

Workaround #4:

I wound up revisiting this question because I ran into a variation on the theme. In this case, I am dealing with a situation where I want to have different proportions for the columns that are being sized. All of the above workarounds assume equal-sized columns. But I want (for example) one column to have 25% of the space, and another column to have 75% of the space. As before, I want the total size of the Grid to accommodate the minimum width required for all of the columns.

This workaround involves simply explicitly doing myself the computation I feel that WPF ought to be doing. I.e. taking the minimum widths of the content of each column, along with the specified proportional sizes, compute the actual width of the Grid control.

Here is a method that will do that:

private static double ComputeGridSizeForStarWidths(Grid grid)
{
    double maxTargetWidth = double.MinValue, otherWidth = 0;
    double starTotal = grid.ColumnDefinitions
        .Where(d => d.Width.IsStar).Sum(d => d.Width.Value);

    foreach (ColumnDefinition definition in grid.ColumnDefinitions)
    {
        if (!definition.Width.IsStar)
        {
            otherWidth += definition.ActualWidth;
            continue;
        }

        double targetWidth = definition.ActualWidth / (definition.Width.Value / starTotal);

        if (maxTargetWidth < targetWidth)
        {
            maxTargetWidth = targetWidth;
        }
    }

    return otherWidth + maxTargetWidth;
}

This code finds the smallest width that can still accommodate every star-sized column at that columns minimum width and proportional sizing, along with the remaining columns that are not using star-sizing.

You can call this method at an appropriate time (e.g. in the Grid.Loaded event handler), and then assign its return value to the Grid.Width property to force the width to the right size to accommodate the minimum required widths for all columns while maintain the specified proportions.

A similar method would do the same thing for row heights.

Workaround #5:

I guess it bears pointing out: one can simply specify the Grid size explicitly. This only works for content where the size is known in advance, but again, in many scenarios this would be fine. (In other scenarios, it will truncate content, because even if the size specified is too small, when it's explicit, WPF goes ahead and applies the star-sizing proportions).

I encourage others to add additional work-arounds to this answer, if they are aware of good work-arounds that are materially different from those already shown. Alternatively, feel free to post another answer with your work-around, and I will (at my earliest convenience :) ) add it here myself.

Answer 2

This is a bit of a workaround and doesn't explain the cause of the behavior you are describing, but it achieves what you are looking for:

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Button HorizontalAlignment="Left" Content="Button" />
    <Grid Grid.Column="1"
          ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0"
                Margin="5"
                MinWidth="{Binding ElementName=Button2, Path=ActualWidth}"
                Content="B"
                x:Name="Button1" />
        <Button Grid.Column="1"
                Margin="5"
                Content="Button"
                x:Name="Button2" />
    </Grid>
</Grid>

I have to assume that an Auto column width is calculated based on the minimum width of the child controls. I wasn't able to confirm or disprove this looking through any documentation, but it is probably expected behavior. In order to force the Button controls to take up equal size, you can just bind the MinWidth property to the ActualWidth of the other Button. In this example, I only bound the Button1.MinWidth to the Button2.ActualWidth to illustrate your desired behavior.

Also, please ignore the Button.Height, I didn't bother to set them different than the default.

Answer 3

From the documentation (Modern apps) (WPF):

starSizing A convention by which you can size rows or columns to take the remaining available space in a Grid.

It doesn't cause more minimum space to be requested, it affects distribution of space in excess of the minimum.