Why does the WPF Grid not share space equally when the middle column has a MinWidth?
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)
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.
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?
not sure exactly what the issue is, but these two grids behave the way you want them to. I like the second more than the first since it explicitly specifies that the first and third column should take up leftover space equally.
<Grid Width="200" Height="200">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition MinWidth="100" Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="Red" Grid.Column="0" />
<Border Background="Yellow" Grid.Column="1" />
<Border Background="Blue" Grid.Column="2" />
</Grid>
<Grid Width="200" Height="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition MinWidth="100" Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border Background="Red" Grid.Column="0" />
<Border Background="Yellow" Grid.Column="1" />
<Border Background="Blue" Grid.Column="2" />
</Grid>
If you want equal width, you cannot use Auto. You must explicitly set the width of every column to the desired proportion, for 3 columns you want ".3*" for each. MinWidth takes precedence if the calculated Width becomes smaller than MinWidth.
精彩评论