title: WPF Grid RowSpan layout understanding
body: <p>I have a very simple XAML</p>
  
  <pre><code>&lt;ui:BorderedGrid&gt;
          &lt;ui:BorderedGrid.RowDefinitions&gt;
              &lt;RowDefinition Height="Auto"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="Auto"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="Auto"&gt;&lt;/RowDefinition&gt;
          &lt;/ui:BorderedGrid.RowDefinitions&gt;
          &lt;ui:BorderedGrid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
          &lt;/ui:BorderedGrid.ColumnDefinitions&gt;
          &lt;StackPanel Background="Blue" VerticalAlignment="Top" Grid.Row="0" Grid.Column="0" Margin="5" Width="200" Height="70"&gt;&lt;/StackPanel&gt;
          &lt;StackPanel Background="Red" VerticalAlignment="Top" Grid.Row="1" Grid.Column="0" Margin="5" Grid.RowSpan="2" Width="200" Height="300"&gt;&lt;/StackPanel&gt;
          &lt;StackPanel Background="Plum" VerticalAlignment="Top"  Grid.Row="0" Grid.Column="1" Margin="5" Grid.RowSpan="2" Width="200" Height="150"&gt;&lt;/StackPanel&gt;
          &lt;StackPanel Background="SaddleBrown" VerticalAlignment="Top"  Grid.Row="2" Grid.Column="1" Margin="5" Width="200" Height="250"&gt;&lt;/StackPanel&gt;
      &lt;/ui:BorderedGrid&gt;
  </code></pre>
  
  <p>The <code>BorderedGrid</code> is just an extended version of WPF standard <code>Grid</code>, which have overriden <code>OnRender</code> function to draw column and row lines. Following is it's implementation</p>
  
  <pre><code>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);
          }
      }
  </code></pre>
  
  <p>The problem is, I am assuming the output should be like this</p>
  
  <p><img src="https://i.stack.imgur.com/AQyVP.png" alt="Output should be like this"></p>
  
  <p>But the actual output is like this</p>
  
  <p><img src="https://i.stack.imgur.com/K5UvR.png" alt="enter image description here"></p>
  
  <p>My question is why this white space is left in first row? I think I am missing very simple thing.. :(</p>