Click here to Skip to main content
Click here to Skip to main content

Grid960 Layout for Silverlight

, 11 Jun 2013
Rate this:
Please Sign up or sign in to vote.
The 960 Grid System is a hugely popular layout system for web sites - Grid960 lets you use it in Silverlight!

Introduction

If you've never heard of the 960 Grid System, have a glance over the page here: http://960.gs/. The idea is that you have a page where the content is no wider than 960 pixels - you then lay out the content consistently in twelve columns in those 960 pixels. For example, in the page below we have:

  1. First row, three columns occupied by 'company', three columns space, six columns occupied by a menu.
  2. Second row, all twelve columns occupied by a tagline.
  3. Third row, two six column boxes.
  4. Fourth and fifth row, four three column boxes.  

960gs is a CSS based layout system for web pages that are designed to follow a horizontally fixed and vertically fixed or flowing layout. Why 960? Well we divide 960 horizontal pixels (a comfortable width for most screens) by 12 columns - then lay out our page with elements that span one or more of these columns. The Grid960 component can be used in 12, 16, 24 or a custom number of column layouts. 960 it a good number for web page layouts - because it is highly divisible - 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, and 480.

Using Grid960 

Using Grid960 couldn't be easier. First you must add a reference to Grid960:

xmlns:g960="clr-namespace:Grid960;assembly=Grid960"

Now we can add a grid to the page:

<!-- Create a Grid960... -->
<g960:Grid960> 
</g960:Grid960>

We add Grid960Row rows to the Grid960 next:

<!-- Create a Grid960... -->
<g960:Grid960>

    <!-- First row. -->
    <g960:Grid960Row>
    </g960:Grid960Row>

    <!-- Second row. -->
    <g960:Grid960Row>
    </g960:Grid960Row>
    
</g960:Grid960>

The final stage is to add Grid960Element elements to the rows. Below we have a row of three columns and a row of two columns:

<!-- Create a Grid960... -->
<g960:Grid960>

    <!-- First row. -->
    <g960:Grid960Row>
        <g960:Grid960Element ColumnSpan="4">
        </g960:Grid960Element>
        <g960:Grid960Element ColumnSpan="4">
        </g960:Grid960Element>
        <g960:Grid960Element ColumnSpan="4">
        </g960:Grid960Element>
    </g960:Grid960Row>

    <!-- Second row. -->
    <g960:Grid960Row>
        <g960:Grid960Element ColumnSpan="6">
        </g960:Grid960Element>
        <g960:Grid960Element ColumnSpan="6">
        </g960:Grid960Element>
    </g960:Grid960Row>
    
</g960:Grid960>

Essentially this is all there is to the Grid960 layout system! 

When you visit the main 960gs home page, you can see many examples of how common sites (like Drupal!) have actually used 960gs for their layout. 

The Example Application 

The example application shows two example layouts based on the system. It also has a quick reference diagram of the two most popular layouts - 12 column and 16 column.

Customizing Grid960 

Here are the key properties for each of the main parts of the Grid960 system.

Grid960 

Core layout options:

  • int Columns - The number of columns - the default is 12.
  • double ColumnMargin - The margin that each column has on the left and the right. The default is 10 pixels - with 12 columns this gives a width of sixty pixels per column.
  • double ColumnWidth - The width of each column. It is the combination of these three properties that makes the full width of the grid up to 960 pixels.

Presets:

  • Preset Preset - The preset can be Grid960_12_ColumnsGrid960_16_Columns, or Grid960_24_Columns. Setting any one of these presets will change all three properties above.

Grid960Row 

  • FrameworkElement FullWidthContent - This can be set to any framework element and will occupy the height of the row and the full width of the screen (useful for laying out backgrounds).
  • FrameworkElement RowWidthContent - This can be set to any framework element and will occupy the row width of the screen (almost always 960 pixels).
  • bool FillAvailableSpace - If set to true, then if the full Grid960 doesn't fill the vertical space on the screen, then this row will be stretched to fill the available space.

Grid960Element 

  • int ColumnSpanThe most important property for a Grid Element - how many columns it spans. 
  • int ColumnOffsetAllows you to offset a grid element by a specific number of columns. This defaults to zero. 

Thanks   

I'd like to offer my thanks to Nathan Smith who has kindly given me permission to port 960gs to Silverlight. 

Show Off!    

If any of you create a great layout with this, let me know - I'd love to put some examples on this page!

As usual, any comments of suggestions are most welcome!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Dave Kerr
Software Developer
United Kingdom United Kingdom
Follow my blog at www.dwmkerr.com and find out about my charity at www.childrenshomesnepal.org.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 4 Pinmembercjb11011-Jun-13 21:18 
GeneralRe: My vote of 4 PinmvpDave Kerr12-Jun-13 9:06 
GeneralRe: My vote of 4 Pinmembercjb11013-Jun-13 2:59 
QuestionAssembly missing PinmemberDBA-Sully11-Dec-12 9:08 
AnswerRe: Assembly missing PinmvpDave Kerr11-Dec-12 22:35 
BugRe: Assembly missing PinmemberDBA-Sully12-Dec-12 3:38 
SuggestionRe: Assembly missing PinmvpDave Kerr12-Dec-12 5:40 
GeneralRe: Assembly missing PinmemberDBA-Sully12-Dec-12 6:02 
GeneralRe: Assembly missing PinmvpDave Kerr12-Dec-12 8:19 
QuestionInteresting PinmvpSacha Barber1-May-12 3:00 
AnswerRe: Interesting PinmvpDave Kerr1-May-12 3:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 11 Jun 2013
Article Copyright 2012 by Dave Kerr
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid