What is better in WPF for UI layout, using one Grid, or nested Grids

Question

I am making a UI in WPF, I have a bunch of functional areas and I use a Grid to organize it.

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.

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. Grids http://www.freeimagehosting.net/uploads/08f2711bae.jpg

I was just wondering what is best practise, the middle or the right panel.

UPDATE: Just for clarification, a more 'code oriented' example:

The Middle panel

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="25" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions> 

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Menu          Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
    <uc:Info       Grid.Row="1" Grid.Column="0" />
    <uc:Control    Grid.Row="2" Grid.Column="0" />
    <uc:Simulation Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" />
</Grid>

The Right panel:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="25" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Menu Grid.Row="0"/>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <uc:Info    Grid.Row="0" />
            <uc:Control Grid.Row="1" />
        </Grid>

        <uc:Simulation Grid.Column="1" />
    </Grid>
</Grid>

Update: I have to admit that now that I wrote out the code for both approaches, the "span" solution looks a lot better.

Answer 1

I would personally go with your middle layout using a single grid with column and row spans to structure the overall layout of the UI, then put a panel in each of those sections to contain the actual controls (and possible further detailed layout).

Answer 2

I would recommend to create one master grid divided into functional areas, then create separate grids/stackpanels/etc in these areas. You may not know the requirements for each functional area, so you can arrange their elements freely and switch bettween layouts. When you put everything in one grid with span columns and/or rows - you would get a "hard to manage" layout.