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.

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 am afraid I am unable to distinguish your solutions with the color in the different grids and sub-grids.

What I can advise is to create a UserControl for each functional area, then have a grid to arrange these areas.

Each UserControl is then free to create its own layout (with another grid, or a simpler StackPanel, or whatever) and is responsible to display a data subset/handle user events in its own area.

The outer grid is then an arbiter for things that involve more than one area (e.g. event forwarding between areas).

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.

Answer 3

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 4

Frankly i would go for a dockpanel or like that for top level composition, and grids for low level