Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

This question has been in the back of my mind since I started with WPF and Silverlight. In general, is it better to use nested grids, or just set the Column/Row Span properties in a single Grid?

Better could be measured in many ways (not limited to these):

  • Easier to read
  • Easier to maintain and/or extend
  • Better performance
  • Quicker to implement/type
  • For example, consider that I want to divide my view into three regions. One region spans the width of the top half of the page. The other two regions each span half of the bottom of the page. I'll attempt to draw it in text:

    ---------
    |   1   |
    ---------
    | 2 | 3 |
    ---------
    

    The heart of the question is, "which of these two solutions to the example is better and why?"

    Solution 1:

    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
    
      <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">1</TextBlock>
    
      <TextBlock Grid.Row="1" Grid.Column="0">2</TextBlock>
    
      <TextBlock Grid.Row="1" Grid.Column="1">3</TextBlock>
    </Grid>
    

    Solution 2:

    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
    
      <TextBlock Grid.Row="0">1</TextBlock>
    
      <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
    
      <TextBlock Grid.Column="0">2</TextBlock>
    
      <TextBlock Grid.Column="1">3</TextBlock>
    
      </Grid>
    </Grid>
    

    I realize that there probably is no "correct" answer. Both solutions work, and are not greatly different. My hope is to gauge which one is more often done in the community at large. If there is a convention that is often followed I hope to learn it.

    share|improve this question
        
    Give it a shot on ui.stackexchange.com if you don't get a good answer here. –  Peter Turner Feb 16 '11 at 17:57
    add comment

    2 Answers

    I'm going to go with "It depends."

    In the easy situation you defined I would go with the colspan b/c it's easier to read.

    For something more complex I go with a nested approach.

    The silverlight app I'm working on right now has a very complex UI, and I use nested grids to help me logically layout the data. This way, when I'm looking in my control tree, instead of seeing a giant list of controls, I see:

    Main Layout:

    • Top Bar
    • Left Bar
    • Content Ara

    I also have another nesting of grids in those ones:

    Top Bar:

    • Info
    • Search Criteria
    • etc.

    This way it's logically laid out so that I can quickly find something I'm looking for.

    Is it the best approach? Maybe, maybe not. One advantage that I found it had was that when the UI changed on me (Left Bar use to be Right Bar) it was a quick change. I didn't have to change anything inside that gird, I just had to move that grid in the Main Layout.

    share|improve this answer
        
    +1 for laying it out logically based on grid components –  Rachel Feb 16 '11 at 18:02
    add comment

    In my limited experience, nested grids are preferred for many situations, because there aren't a whole lot of user interfaces that call for an "even grid," which is what a single grid with multiple rows and columns gets you. A nested grid can give you more flexibility, especially if you need to change things in the future.

    Think of it this way: do you really have a series of controls that you need to lay out in lock-step? If so, a single grid may be best. Are you just trying to use grids to maintain some sanity in laying out a complex UI? You are likely better off with nested grids.

    That said, your given situation is so simple, I see no reason not to use a single grid.

    share|improve this answer
    add comment

    Your Answer

     
    discard

    By posting your answer, you agree to the privacy policy and terms of service.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.