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