WPF Grid RowSpan 布局理解答案

【问题标题】：WPF Grid RowSpan layout understandingWPF Grid RowSpan 布局理解
【发布时间】：2014-07-25 03:58:01
【问题描述】：

我有一个非常简单的 XAML

<ui:BorderedGrid>
        <ui:BorderedGrid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </ui:BorderedGrid.RowDefinitions>
        <ui:BorderedGrid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </ui:BorderedGrid.ColumnDefinitions>
        <StackPanel Background="Blue" VerticalAlignment="Top" Grid.Row="0" Grid.Column="0" Margin="5" Width="200" Height="70"></StackPanel>
        <StackPanel Background="Red" VerticalAlignment="Top" Grid.Row="1" Grid.Column="0" Margin="5" Grid.RowSpan="2" Width="200" Height="300"></StackPanel>
        <StackPanel Background="Plum" VerticalAlignment="Top"  Grid.Row="0" Grid.Column="1" Margin="5" Grid.RowSpan="2" Width="200" Height="150"></StackPanel>
        <StackPanel Background="SaddleBrown" VerticalAlignment="Top"  Grid.Row="2" Grid.Column="1" Margin="5" Width="200" Height="250"></StackPanel>
    </ui:BorderedGrid>

BorderedGrid 只是 WPF 标准 Grid 的扩展版本，它重写了 OnRender 函数来绘制列和行线。以下是它的实现

public class BorderedGrid : Grid
    {
        protected override void OnRender(DrawingContext dc)
        {
            double leftOffset = 0;
            double topOffset = 0;
            System.Windows.Media.Pen pen = new System.Windows.Media.Pen(System.Windows.Media.Brushes.LightGray, 1);
            pen.Freeze();

            foreach (RowDefinition row in this.RowDefinitions)
            {
                dc.DrawLine(pen, new System.Windows.Point(0, topOffset), new System.Windows.Point(this.ActualWidth, topOffset));
                topOffset += row.ActualHeight;
            }
            // draw last line at the bottom
            dc.DrawLine(pen, new System.Windows.Point(0, topOffset), new System.Windows.Point(this.ActualWidth, topOffset));

            foreach (ColumnDefinition column in this.ColumnDefinitions)
            {
                dc.DrawLine(pen, new System.Windows.Point(leftOffset, 0), new System.Windows.Point(leftOffset, this.ActualHeight));
                leftOffset += column.ActualWidth;
            }
            // draw last line on the right
            dc.DrawLine(pen, new System.Windows.Point(leftOffset, 0), new System.Windows.Point(leftOffset, this.ActualHeight));

            base.OnRender(dc);
        }
    }

问题是，我假设输出应该是这样的

但实际输出是这样的

我的问题是为什么这个空白留在第一行？我想我错过了非常简单的事情.. :(

【问题讨论】：

你试过去掉stackpanel blue的高度吗？
如果我去掉蓝色堆栈面板的高度，它就不会简单地显示出来。我需要显示它。
在这里你可以看到你的 grid.row=0 空间更高，所以当你设置 height=70 时，只有当你增加高度或减少 grid.row 部分时它才会覆盖那些部分。
您需要自动调整第一行的大小吗？将该行的大小固定为 70 可能会更好，避免在 WPF 的布局引擎部分完成一些代数来确定您想要的内容。
@DhavalPatel，对不起，我没明白你的意思。

标签： c# wpf layout grid

【解决方案1】：

无论列如何，所有行都需要对齐。由于第 0 行的高度是自动的。它的实际高度变为其最高子元素的高度 + 边距，这将是李子高度 + 10（距边距）的一部分。

由于蓝色面板的高度 (70) 比其行（第 0 行）的高度短，并且它与顶部垂直对齐，因此您会得到它下方的空白。

我相信您看到的结果是基于您的行、行跨度、高度等配置的预期结果。

在某种程度上，您的水平网格线已经暗示了计算的行高。

这是另一种看待它的方式：

第 2 行的高度是 SaddleBrown 的高度

第 1 行的高度等于第 2 行的高度减去红色的高度

第 0 行的高度是 Plum 的高度减去第 1 行的高度

第 0 行的高度大于蓝色的高度。蓝色与顶部垂直对齐，因此下方有一个空白区域。

【讨论】：

李子堆栈面板的行跨度为 2，因此直接子级是蓝色堆栈面板。我认为计算行高应该被认为是孩子，不是吗？

【解决方案2】：

我尽量不花太多时间与 WPF 的Auto 争吵。就布局而言，您的两列似乎在很大程度上是独立的。你可以这样做，基本上渲染两个独立的列：

<ui:BorderedGrid>
        <ui:BorderedGrid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </ui:BorderedGrid.ColumnDefinitions>
        <StackPanel Width="200" Grid.Column="0">
            <StackPanel Background="Blue"Margin="5" Height="70"></StackPanel>
            <StackPanel Background="Red" Margin="5" Height="300"></StackPanel>
        </StackPanel>
        <StackPanel Width="200" Grid.Column="1">
            <StackPanel Background="Plum" Margin="5" Height="150"></StackPanel>
            <StackPanel Background="SaddleBrown"Margin="5" Height="250"></StackPanel>
        </StackPanel>
</ui:BorderedGrid>

【讨论】：