How to use Grid Layout to partition the layout of the website

Grid Layout is one of the widely used layouts in Silverlight application. It allows the user to partition it into structural grid like TABLE element in HTML.

To create columns/rows, user needs to define the columns and rows first under the Grid tag.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="0.5*"/>
    </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
        <RowDefinition Height="0.3*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
</Grid>

The value “*” means the rest of the remaining space but if value like “0.5*”, it works as a percentage. User may also use pixels as value, for e.g. “300”.

Once you have finished definining the layout, you can assign them to elements. You can imagine them like Array, their index starts with value “0”. The Border element must be inside the Grid tag.

<Border Grid.Column="0" Grid.Row="0">
...
</Border>

Or if you want to work with RowSpan or ColumnSpan,

<Border Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2"

If you do not want to define the columns and spans, the items under the Grid element can overlap each other, and this can give another type of good effect like

The above picture shows 3 Border elements under a Grid element.

del.icio.us Tags: Silverlight 2,Visual Studio 2008