Is nesting grids a good idea?

Question

I find myself nesting a lot of grids inside grids in WPF. I just found myself 3 Grids deep, and stopped to think: "Should I be doing this?" Is there some kind of performance cost? Is it unmaintainable? (Kind of like heavily nested ifs maybe.)

I guess the alternative is to have one grid, and use a whole lot of column spans.

(You may ignore the use of Events, I am aware commands are prob a better idea)

<Grid Name="grid">
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Grid Grid.Column="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition/>
        <RowDefinition Height="20"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" 
        HorizontalAlignment="Left" Click="btnStart_Click" 
        Content="New Game"/>
    <Button Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" 
        HorizontalAlignment="Center" Click="btnRun_Click" 
        Content="Run"/>
    <Button Grid.Row="0" Grid.Column="2" VerticalAlignment="Top" 
        HorizontalAlignment="Center" Click="btnUndo_Click" 
        Content="Undo"/>
    <Button Grid.Row="0" Grid.Column="3" VerticalAlignment="Top" 
        HorizontalAlignment="Right" Click="btnStep_Click" 
        Content="Step"/>

    <Grid Grid.Row="1" Grid.ColumnSpan="4">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <board:BoardView x:Name="boardView" Grid.Row="0"  Background="Firebrick"/>
        <GridSplitter  ResizeDirection="Rows" HorizontalAlignment="Stretch" 
            VerticalAlignment="Bottom" />
        <TextBox Name="txtLog" Grid.Row="1" 
            Text="{Binding Path=GameLog.Log, Mode=TwoWay}"
            VerticalScrollBarVisibility="Visible" FontFamily="Global Monospace" 
            AcceptsReturn="True" Height="260" VerticalAlignment="Stretch"/>

    </Grid>

    <CheckBox Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"  
        Content="Use Algebraic Notation" 
        IsChecked="{Binding Path=UseAlgebraicNotation}"/>

</Grid>

<ContentControl Grid.Column="0" 
                Content="{Binding Path=Game.BlackPlayer}"
                Margin="3"
                />

<ContentControl Grid.Column="3" 
                Content="{Binding Path=Game.WhitePlayer}"
                Margin="3"
                />

</Grid>

Answer 1

It's better to use nested grids that are easy to read, than complex spanning. I try to avoid spanning in most scenarios, unless it's just 1 simple span. But when in doubt, nest the grids, because that way future layout changes won't break everything where as spanning is directly tied to the number of columns you have.

A great example of this is headers and footers, you wouldn't want them to not fill the width of an app,

Answer 2

The Grid is the most powerful layout control in XAML technology. Since you use a Grid inside another probably you already considered use another layout control first. But they can't fit where you want. In many cases I will need a layout control I think about some things:

1. Can I stack these controls vertically or horizontally? So I use StackPanel.
2. I want only a visual effect and will have only one child? So I use Border.
3. I want to stack these controls but one of then need to fill the last? Use DockPanel.

The layout controls other than Grid are very specific. The Grid gives to you the power to choose your interface that is simpler to modify.

As soon as you put a Grid inside other you made for other person easier to change things. You separate the logic of every part of your interface so it became compact in each part.

P.S. Canvas I never used. Use only if you need to code something like drag n' drop or you need something that need to be very hard coded in the screen. (I can't remember things other than drag'n'drop). If you try to use only one Grid you can. But it will be very difficult for you and any people that need work on that code. If you open any Framework control you can see that its uses o lot of grids too.