Совместное использование столбцов или строк в сетке

Question

Я пытаюсь создать асимметричный макет, используя Grid, где у меня есть 2 строки, 2 столбца и дополнительный общий столбец следующим образом:

<Grid Background="Black">
    <Grid.RowDefinitions>
        <RowDefinition Height="200" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle
        Grid.Row="0"
        Grid.Column="0"
        Width="200"
        Height="200"
        Fill="Red" />
    <Rectangle
        Grid.Row="0"
        Grid.Column="1"
        Grid.ColumnSpan="2"
        Width="250"
        Height="200"
        Fill="Blue" />
    <Rectangle
        Grid.Row="1"
        Grid.Column="0"
        Grid.ColumnSpan="2"
        Width="250"
        Height="200"
        Fill="Yellow" />
    <Rectangle
        Grid.Row="1"
        Grid.Column="2"
        Width="200"
        Height="200"
        Fill="Green" />
</Grid>

Но, однако, я пытаюсь настроить его, второй столбец всегда сворачивается, если я явно не установил фиксированную ширину (в данном случае 50 пикселей).Почему это происходит?

Разве второй столбец не должен изменять размер до остальной части каждого прямоугольника?

Answer 1

Используя Converter, мне удалось вручную вычислить размер общего столбца, поместив содержимое первого столбца в контейнер и связав ширину общего столбца с ActualWidth этого контейнера, вычтенной из ширины первого столбца.

, например

<Grid Background="Black">
    <Grid.RowDefinitions>
        <RowDefinition Height="200" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="{Binding ElementName=Rect3, Path=ActualWidth, Converter={StaticResource SharedColumnConverter}, ConverterParameter=200}" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle
        Grid.Row="0"
        Grid.Column="0"
        Width="200"
        Height="200"
        Fill="Red" />
    <Rectangle
        Grid.Row="0"
        Grid.Column="1"
        Grid.ColumnSpan="2"
        Width="250"
        Height="200"
        Fill="Blue" />
    <Rectangle
        Name="Rect3"
        Grid.Row="1"
        Grid.Column="0"
        Grid.ColumnSpan="2"
        Width="250"
        Height="200"
        Fill="Yellow" />
    <Rectangle
        Grid.Row="1"
        Grid.Column="2"
        Width="200"
        Height="200"
        Fill="Green" />
</Grid>