How to use MaxWidth instead of Width

Question

I have question about MaxWidth. Lets look at this code:

    <Grid Height="50" Background="Red">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0" Width="200" Background="Green" BorderBrush="Black" BorderThickness="2" />
        <Grid Grid.Column="2" Width="200" Background="Yellow" BorderBrush="Black" BorderThickness="2" />
        <Grid Grid.Column="3" Width="200" Background="Blue" BorderBrush="Black" BorderThickness="2" />
    </Grid>

We have red Grid with height 50px and width whole screen. In this grid i want to have 3 items, for example grids, one left of screen and two right of screen, all with width 200px.

On bigger screens this code works good, we have green 200px grid on left, and two yellow and blue 200px grids on right, with red space between them.

But on smaller screens(smaller than 600px) blue grid is cut off. I want to green and yellow grids stay 200px, and blue grid to take as much as it can, for example 150px or 100px. I try to just change Width=200 to MaxWidth=200 on blue grid, but with this code blue grid disappear. It is not stretching, its width is 0. How to make it stretching as much as possible, up to 200px?

Answer 1

You can achieve the desired effect with this XAML:

<Grid Height="50" Background="Red">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="999*" MaxWidth="200" />
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0" Width="200" Background="Green" BorderBrush="Black" BorderThickness="2" />
    <Grid Grid.Column="2" Width="200" Background="Yellow" BorderBrush="Black" BorderThickness="2" />
    <Grid Grid.Column="3" Background="Blue" BorderBrush="Black" BorderThickness="2" >
        <Button HorizontalAlignment="Right" Content="Test"/>
    </Grid>
</Grid>

I've added a Button in the Blue Grid to show that it stretches correctly.

The trick is to set the MaxWidth on the ColumnDefinition level and remove the 200px restriction at the Grid level (otherwise it will never get smaller than that).

The 'hack' comes at the Width of the ColumnDefinition where you need to allow it to stretch freely, which is achieved with '*'. But you already have a stretchable column. So you need to have the 2nd column (the Red one) shrink first and only then start shrinking the Blue one. While this is not possible out of the box, you can use this trick to achieve it. 999* means that the Blue column should be 999 times larger than the red one so when you resize it will try to maintain that ratio. Only when the Red one becomes small enough (0px at this point) will the blue one start to resize.