WPF Grid RowSpan 布局理解
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24038485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WPF Grid RowSpan layout understanding
提问by Muhammad Ummar
I have a very simple XAML
我有一个非常简单的 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>
The BorderedGridis just an extended version of WPF standard Grid, which have overriden OnRenderfunction to draw column and row lines. Following is it's implementation
这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);
}
}
The problem is, I am assuming the output should be like this
问题是，我假设输出应该是这样的
But the actual output is like this
但实际输出是这样的
My question is why this white space is left in first row? I think I am missing very simple thing.. :(
我的问题是为什么这个空白留在第一行？我想我错过了非常简单的事情.. :(
回答by Kess
All the rows need to be aligned irrespective of columns. Since the height of row 0 is auto. Its actual height becomes the height of its tallest child element + margin, which will be a portion of the plum height + 10 (from margin).
无论列如何，所有行都需要对齐。由于第 0 行的高度是自动的。它的实际高度变为其最高子元素的高度 + 边距，这将是梅花高度的一部分 + 10（距边距）。
Since the height (70) of the blue panel is shorter than the height of its row (row 0) and it is vertical aligned to the top, you get the the white space below it.
由于蓝色面板的高度 (70) 比其行（第 0 行）的高度短，并且与顶部垂直对齐，因此您会看到其下方的空白区域。
I believe the result you are seeing is what is expected based on your configuration of rows, row spans, height, etc.
我相信您看到的结果是基于您的行、行跨度、高度等配置的预期结果。
In a way, your horizontal grid lines already hinted at the computed row heights.
在某种程度上，您的水平网格线已经暗示了计算出的行高。
Here is another way to look at it:
这是查看它的另一种方式：
Height of row 2 is height of SaddleBrown
第 2 行的高度是 SaddleBrown 的高度
Height of row 1 is height of row 2 minus height of Red
第 1 行的高度是第 2 行的高度减去红色的高度
Height of row 0 is height of Plum minus height of row 1
第 0 行的高度是 Plum 的高度减去第 1 行的高度
Height of row 0 is great than the height of Blue. Blue is vertical aligned to the top and therefore has a white space below it.
第 0 行的高度大于 Blue 的高度。蓝色与顶部垂直对齐，因此其下方有一个空白区域。
回答by Dan Garant
I try not to spend too much time fighting with WPF's Auto. It seems like your two columns are largely independent in terms of their layout. You could do something like this, basically rendering two independent columns:
我尽量不花太多时间与 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>
