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

【问题标题】：Grid row auto-size relative sizing issue网格行自动调整相对大小问题
【发布时间】：2017-01-29 10:48:44
【问题描述】：

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

问题是，如果我有一个具有相对大小的行/列的网格，在另一个网格的行/列内，并且该行/列尺寸设置为自动，则子网格的相对大小似乎没有效果。

我对这个 xaml 的期望是，内部网格列仍然是相对大小的（一个是另一个宽度的 3 倍），即使它们位于父网格的自动大小列内。这是预期的行为，这是一个错误还是我缺少一些基本的东西？

谢谢！！

【问题讨论】：

请将您的代码作为文本插入，而不是作为编辑器的屏幕截图
是的，这是默认行为。 Auto 表示只需要最低限度。由于它设置在外部Grid 中，因此它具有优先权。
为什么不把第一个 3 列的网格去掉，去掉内部的网格？
感谢您的回复！只是想知道为什么书面形式的代码比图像更受欢迎？我认为这是一个很好的图像候选，因为它并排显示了代码和设计器。
auto 应该得到最小值是有道理的……但这不会破坏很多基本功能吗？ Basic CSS 支持这种情况就好了

标签： c# .net wpf wpf-controls

【解决方案1】：

试试这个：

   <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 计算自动列/行中某些内容的宽度的顺序有关。

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

我的解决方案删除了自动值，而是说第一个网格的第一列“占总宽度，你得到 2/3 的空间，另一列得到 1/3” - 它不是自动的，所以第二列没有以任何方式被压扁。

【讨论】：

谢谢！这就是在我发布问题之前我们最终要解决的问题:) 我认为我对 Auto 的解释完全不同。我认为 auto 只是更改了容器大小以适合孩子，而实际上它似乎无视任何孩子的大小并直接压扁任何东西，这看起来很奇怪....
@Ross 没错。 StackPanel 的工作方式非常相似。

【解决方案2】：

似乎外部 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>

调整大小后只有第一列在增加（见截图）

【讨论】：

哇，谢谢！这正是我想要做的！ :D 只是我还是 WPF 处理自动调整大小的方式似乎有点奇怪？对于这样一个基本功能，来自 CSS 似乎相当复杂。