网格行自动调整相对大小问题

Grid row auto-size relative sizing issue

我是一个相对的 WPF 新手,我仍在努力了解它的基础知识。我刚刚遇到了一个让我难过的网格大小问题(而且似乎不仅限于网格)。

问题是,如果我有一个相对大小 rows/columns 的网格,在另一个网格的 row/column 内,并且 row/column 尺寸设置为自动,相对大小对于子网格似乎没有效果。

我对此 xaml 的期望是内部网格列仍然相对大小(一个是另一个宽度的 3 倍),即使它们位于父级的自动调整大小的列中网格。这是预期的行为,这是一个错误还是我遗漏了一些基本的东西?

谢谢!!

试试这个:

   <Grid Background="DarkBlue">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Label BorderBrush="White"
               BorderThickness="1"
               Content="Cell 1"
               Foreground="White" />
        <Grid Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10*" />
                <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>
            <Label BorderBrush="White"
                   BorderThickness="1"
                   Content="Cell 2"
                   Foreground="White" />

            <Label Grid.Column="1"
                   BorderBrush="White"
                   BorderThickness="1"
                   Content="Cell 3"
                   Foreground="White" />
        </Grid>
    </Grid>

第二个网格行为异常的原因是第一个网格的列设置为自动。 因为它是自动的,所以它试图将其中的所有内容压缩到尽可能小——如果没有标签,第二个网格的每一列的宽度将为 0。加上标签的宽度使它们大致相等。

我认为这与 WPF 在自动计算某些东西的宽度的顺序有关 column/row。

它做的第一件事是注意第二个网格的自动值,即 0。然后,在这之后,它将内容的宽度添加到这个计算值中——因为两个标签的大小大致相同,这会产生两个相似的列。

我的解决方案删除了​​ auto 值,取而代之的是第一个网格的第一列 "of the total width, you get 2/3rds of the space, and the other column gets 1/3rd" - 它不是 auto,所以第二列不会以任何方式被压扁。

似乎外部 Grid 列决定了内部 Grid 的宽度。通过将列宽绑定到内部网格宽度来尝试反转度量顺序:<ColumnDefinition Width="{Binding Path=ActualWidth, ElementName=InnerGrid}"/>

<Grid Background="DarkBlue">
    <Grid.Resources>
        <Style TargetType="Label">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="BorderThickness" Value="1"/>
        </Style>
    </Grid.Resources>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="{Binding Path=ActualWidth, ElementName=InnerGrid}"/>            
    </Grid.ColumnDefinitions>

    <Label Content="Cell 1" />

    <Grid Grid.Column="1" Name="InnerGrid" Background="DarkRed">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <Label Content="Cell 2.1" />
        <Label Grid.Column="1" Content="Cell 2.2" />
    </Grid>
</Grid>

调整大小后只有第一列在增加(见屏幕截图)