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>

但是，尽管我尝试进行设置，但除非我明确设置了固定宽度（在这种情况下为50px），否则第二列始终会折叠。为什么会这样？

第二列是否应该将自身调整为每个矩形的其余部分？

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>

共享网格中的列或行

1 个答案: