title: What is better in WPF for UI layout, using one Grid, or nested Grids
body: <p>I am making a UI in WPF, I have a bunch of functional areas and I use a Grid to organize it.</p>
  
  <p>Now the Grid that I want is not uniform, as in, some functional area will span multiple cells in the Grid. I was wondering what the best practise is in solving this. Should I create one grid and then for each functional area set it to span multiple cells, or should I split it up into multiple nested Grids.</p>
  
  <p>In this image, the leftmost panel (panels separated by the gray bar) is what I want. The middle panel shows one grid where the blue lines are overlapped by a functional area. The rightmost panel shows how I could do it with nested grids. You can see the green grid has one horizontal split. In the bottom cell is the yellow Grid with a vertical split. In side the left cell is the red Grid with again a horizontal split.
  <a href="http://www.freeimagehosting.net/uploads/08f2711bae.jpg">Grids http://www.freeimagehosting.net/uploads/08f2711bae.jpg</a></p>
  
  <p>I was just wondering what is best practise, the middle or the right panel.</p>
  
  <p>UPDATE: Just for clarification, a more 'code oriented' example:</p>
  
  <p>The Middle panel</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="25" /&gt;
          &lt;RowDefinition Height="*" /&gt;
          &lt;RowDefinition Height="*" /&gt;
      &lt;/Grid.RowDefinitions&gt; 
  
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="200" /&gt;
          &lt;ColumnDefinition Width="*" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;Menu          Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" /&gt;
      &lt;uc:Info       Grid.Row="1" Grid.Column="0" /&gt;
      &lt;uc:Control    Grid.Row="2" Grid.Column="0" /&gt;
      &lt;uc:Simulation Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>The Right panel:</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="25" /&gt;
          &lt;RowDefinition Height="*" /&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;Menu Grid.Row="0"/&gt;
  
      &lt;Grid Grid.Row="1"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="200" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;Grid Grid.Column="0"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="*" /&gt;
                  &lt;RowDefinition Height="*" /&gt;
              &lt;/Grid.RowDefinitions&gt;
  
              &lt;uc:Info    Grid.Row="0" /&gt;
              &lt;uc:Control Grid.Row="1" /&gt;
          &lt;/Grid&gt;
  
          &lt;uc:Simulation Grid.Column="1" /&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Update: I have to admit that now that I wrote out the code for both approaches, the "span" solution looks a lot better.</p>