Why does the WPF Grid not share space equally when the middle column has a MinWidth?

Question

In this example the first column gets 100 and the next 2 columns get 50 each, which is the expected behaviour.

<Grid Width="200" Height="200">
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="100" />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Border Background="Red" Grid.Column="0" />
    <Border Background="Yellow" Grid.Column="1" />
    <Border Background="Blue" Grid.Column="2" />
</Grid>

If I move the MinWidth to the middle column ...

<Grid Width="200" Height="200">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition MinWidth="100" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Border Background="Red" Grid.Column="0" />
    <Border Background="Yellow" Grid.Column="1" />
    <Border Background="Blue" Grid.Column="2" />
</Grid>

... then the first column gets 33.3 and the last column 66.6 which seems weird. Not sure why this should change the grid's behaviour. I would expect columns 0 and 2 to get 50 each.

Update: I understand why this happens, but was wondering if anyone thinks it is a bug (especially since the behaviour in Silverlight is different)

Answer 1

This issue only arises when you have a center column, which implies you have an odd number of columns defined for your grid. I'm not sure why this is happening nor do I think it's intentional behavior. But, another workaround is to always ensure you have an even number of columns defined even if you are only utilizing an odd number of them (hiding the extra column using MaxWidth=0).

    <Grid Width="200" Height="200">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" MinWidth="100"/>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" MaxWidth="0"/> <!--Workaround-->
        </Grid.ColumnDefinitions>

        <Border Grid.Column="0" Background="Red"/>
        <Border Grid.Column="1" Background="Yellow"/>
        <Border Grid.Column="2" Background="Blue"/>
    </Grid>

Disadvantage here is you have an empty column in your grid. The advantage is you get the expected space distribution behavior.

Answer 2

Just an update.. I have tried the XAML snippet with a combination of .NET 3.5/4.0 Silverlight 3/4 and still could not get equal width for the second example...

This XAML was the only way around that issue:

<Grid Width="200" Height="200">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".5*" />
            <ColumnDefinition MinWidth="100" />
            <ColumnDefinition Width=".5*" />
        </Grid.ColumnDefinitions>
        <Border Background="Red" Grid.Column="0" />
        <Border Background="Yellow" Grid.Column="1" />
        <Border Background="Blue" Grid.Column="2" />
    </Grid>

Any update on your side guys?