Grid Columns with different resize "priorities"

Question

I have a layout with 5 columns (1 and 5 same size, 2 and 4 same size):

| 1 | 2 | 3 | 4 | 5 |

We allow the user to resize the app horizontally (shrink it) and the behavior I'm trying to achieve is the following: shrink columns 1 and 5 until they disappear

|1| 2 | 3 | 4 |5|

|| 2 | 3 | 4 ||

| 2 | 3 | 4 |

Then and only then, start shrinking 2 and 4 until a minimum width (3 always stays the same size)

I've tried this with a single Grid and nested Grids also but I can't reproduce the expected behavior. Like the tittle says, I'd like to prioritize which columns shrink first.

Answer 1

You can produce that using three Grids

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid  x:Name="Grid1" Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>            
        <Rectangle Fill="LightBlue" Grid.Column="0" Width="200"/>
        <Rectangle Fill="LightGreen" Grid.Column="1" Width="100"/>
    </Grid>

        <Grid  x:Name="Grid3" Grid.Column="1">
            <Rectangle Fill="Black" Width="100"/>
        </Grid>

    <Grid x:Name="Grid5" Grid.Column="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="LightGreen" Grid.Column="0" Width="100"/>
        <Rectangle Fill="LightBlue" Grid.Column="1" Width="200"/>
    </Grid>
</Grid>

The Result

Answer 2

Here is example.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="1000*" MaxWidth="300" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0" Background="White" />
    <Grid Grid.Column="2" Background="White" />
    <Grid Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="1000*" MaxWidth="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="PaleGreen" />
        <Grid Grid.Column="2" Background="PaleGreen" />
        <Grid Grid.Column="1" Background="WhiteSmoke" />
    </Grid>
</Grid>