c# - WPF Grid RowSpan布局理解

我有一个非常简单的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);
        }
    }

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



但是实际输出是这样的



我的问题是，为什么在第一行中留有空白？我想我缺少了一个非常简单的东西.. :(

最佳答案

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

由于蓝色面板的高度（70）短于其行（行0）的高度，并且垂直于顶部垂直对齐，因此您得到了其下方的白色空间。

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

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

这是另一种查看方式：

第2行的高度是SaddleBrown的高度

第1行的高度是第2行的高度减去Red的高度

第0行的高度是梅花的高度减去第1行的高度

第0行的高度大于Blue的高度。蓝色与顶部垂直对齐，因此在其下方具有空白。

关于c# - WPF Grid RowSpan布局理解，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24038485/