WPF, XAML: Stretch when available space is smaller than MinWidth (with pictures)

Question

I have a Grid with a variable Width. It has three columns, the outer two serve as variable margins for the content that is in the middle column.

I want the Grid to have the following size-related properties:

• Grid.Width >= 220px: outer columns' width = 10px (thier MaxWidth) each and the middle column takes up the remaining space
• Grid.Width <= 200px: outer columns' width = 0px each and the middle column takes up the entire grid
• Between 200px and 220px the outer columns grow from 0px (at 200) to 10px (at 220) each. Between these points, the middle column's width remains 200px, since the outer columns need the changed Grid.Width to grow/shrink.

I've used this code:

<ColumnDefinition Width="10*" MaxWidth="10" />
<ColumnDefinition Width="200*" MinWidth="200"/>
<ColumnDefinition Width="10*" MaxWidth="10" />

And it works perfectly except for one problem: if the Grid's Width is smaller than the middle column's MinWidth, the column doesn't change its width to fit the Grid's width, but stays 200px. But if I remove the MinWidth property, the outer two columns won't "stretch" to 0px when the Grid's width is at 200px.

I want the middle column to stretch to the Grid's Width when the Grid is smaller than 200px. What do I do?

Answer 1

Of course the middle columns stays 200 DIP wide if you set its MinWidth to 200. This is exactly what the MinWidth property is used for.

If you want some more customized behaviour, you should implement it using a programming language such as C#. You could for example handle the SizeChanged event of the Grid and hide the outer columns when its width is less than 200 DIP. Something like this:

private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    Grid grid = (Grid)sender;
    if (e.NewSize.Width < 200)
    {
        grid.ColumnDefinitions[0].Width = new GridLength(0);
        grid.ColumnDefinitions[2].Width = new GridLength(0);
    }
    else
    {
        grid.ColumnDefinitions[0].Width = new GridLength(10, GridUnitType.Star);
        grid.ColumnDefinitions[2].Width = new GridLength(10, GridUnitType.Star);
    }
}

XAML:

<Grid SizeChanged="Grid_SizeChanged">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10*" MaxWidth="10" />
        <ColumnDefinition Width="200*" />
        <ColumnDefinition Width="10*" MaxWidth="10" />
    </Grid.ColumnDefinitions>
</Grid>