Click here to Skip to main content
15,879,535 members
Articles / Programming Languages / C#

Grid960 Layout for Silverlight

Rate me:
Please Sign up or sign in to vote.
4.94/5 (13 votes)
11 Jun 2013CPOL3 min read 45.2K   1.4K   37  
The 960 Grid System is a hugely popular layout system for web sites - Grid960 lets you use it in Silverlight!
<UserControl x:Class="Grid960Sample.BasicSample16View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:g960="clr-namespace:Grid960;assembly=Grid960"
             xmlns:local="clr-namespace:Grid960Sample"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="1024">

    <Grid x:Name="LayoutRoot" Background="White">
        
        <Grid.Resources>
            <Style TargetType="g960:Grid960Row">
                <Setter Property="Margin" Value="0,5,0,5" />
            </Style>
        </Grid.Resources>
        
        <g960:Grid960 Preset="Grid960_16_Columns">
            
            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element1" ColumnSpan="16">
                    <local:ElementView DataContext="{Binding ElementName=element1}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element2" ColumnSpan="1">
                    <local:ElementView DataContext="{Binding ElementName=element2}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element3" ColumnSpan="15">
                    <local:ElementView DataContext="{Binding ElementName=element3}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element4" ColumnSpan="2">
                    <local:ElementView DataContext="{Binding ElementName=element4}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element5" ColumnSpan="14">
                    <local:ElementView DataContext="{Binding ElementName=element5}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element6" ColumnSpan="3">
                    <local:ElementView DataContext="{Binding ElementName=element6}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element7" ColumnSpan="13">
                    <local:ElementView DataContext="{Binding ElementName=element7}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element8" ColumnSpan="4">
                    <local:ElementView DataContext="{Binding ElementName=element8}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element9" ColumnSpan="12">
                    <local:ElementView DataContext="{Binding ElementName=element9}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element10" ColumnSpan="5">
                    <local:ElementView DataContext="{Binding ElementName=element10}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element11" ColumnSpan="11">
                    <local:ElementView DataContext="{Binding ElementName=element11}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element12" ColumnSpan="6">
                    <local:ElementView DataContext="{Binding ElementName=element12}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element13" ColumnSpan="10">
                    <local:ElementView DataContext="{Binding ElementName=element13}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element14" ColumnSpan="7">
                    <local:ElementView DataContext="{Binding ElementName=element12}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element15" ColumnSpan="9">
                    <local:ElementView DataContext="{Binding ElementName=element13}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element16" ColumnSpan="8">
                    <local:ElementView DataContext="{Binding ElementName=element12}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element17" ColumnSpan="8">
                    <local:ElementView DataContext="{Binding ElementName=element13}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element18" ColumnSpan="1" ColumnOffset="0">
                    <local:ElementView DataContext="{Binding ElementName=element18}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element19" ColumnSpan="1" ColumnOffset="1">
                    <local:ElementView DataContext="{Binding ElementName=element19}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element20" ColumnSpan="1" ColumnOffset="2">
                    <local:ElementView DataContext="{Binding ElementName=element20}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element21" ColumnSpan="1" ColumnOffset="3">
                    <local:ElementView DataContext="{Binding ElementName=element21}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element22" ColumnSpan="1" ColumnOffset="4">
                    <local:ElementView DataContext="{Binding ElementName=element22}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element23" ColumnSpan="1" ColumnOffset="5">
                    <local:ElementView DataContext="{Binding ElementName=element23}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element24" ColumnSpan="1" ColumnOffset="6">
                    <local:ElementView DataContext="{Binding ElementName=element24}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element25" ColumnSpan="1" ColumnOffset="7">
                    <local:ElementView DataContext="{Binding ElementName=element25}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element26" ColumnSpan="1" ColumnOffset="8">
                    <local:ElementView DataContext="{Binding ElementName=element26}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element27" ColumnSpan="1" ColumnOffset="9">
                    <local:ElementView DataContext="{Binding ElementName=element27}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element28" ColumnSpan="1" ColumnOffset="10">
                    <local:ElementView DataContext="{Binding ElementName=element28}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element29" ColumnSpan="1" ColumnOffset="11">
                    <local:ElementView DataContext="{Binding ElementName=element29}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element30" ColumnSpan="1" ColumnOffset="12">
                    <local:ElementView DataContext="{Binding ElementName=element30}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element31" ColumnSpan="1" ColumnOffset="13">
                    <local:ElementView DataContext="{Binding ElementName=element31}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element32" ColumnSpan="1" ColumnOffset="14">
                    <local:ElementView DataContext="{Binding ElementName=element32}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element33" ColumnSpan="1" ColumnOffset="15">
                    <local:ElementView DataContext="{Binding ElementName=element33}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element34" ColumnSpan="4" ColumnOffset="0">
                    <local:ElementView DataContext="{Binding ElementName=element34}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element35" ColumnSpan="4" ColumnOffset="0">
                    <local:ElementView DataContext="{Binding ElementName=element35}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element36" ColumnSpan="1" ColumnOffset="0">
                    <local:ElementView DataContext="{Binding ElementName=element36}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element37" ColumnSpan="7" ColumnOffset="0">
                    <local:ElementView DataContext="{Binding ElementName=element37}" />
                </g960:Grid960Element>
            </g960:Grid960Row>

            <g960:Grid960Row>
                <g960:Grid960Element x:Name="element38" ColumnSpan="1" ColumnOffset="0">
                    <local:ElementView DataContext="{Binding ElementName=element38}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element39" ColumnSpan="7" ColumnOffset="0">
                    <local:ElementView DataContext="{Binding ElementName=element39}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element40" ColumnSpan="4" ColumnOffset="0">
                    <local:ElementView DataContext="{Binding ElementName=element40}" />
                </g960:Grid960Element>
                <g960:Grid960Element x:Name="element41" ColumnSpan="4" ColumnOffset="0">
                    <local:ElementView DataContext="{Binding ElementName=element41}" />
                </g960:Grid960Element>
            </g960:Grid960Row>
            
        </g960:Grid960>
    </Grid>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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


Written By
Software Developer
United Kingdom United Kingdom
Follow my blog at www.dwmkerr.com and find out about my charity at www.childrenshomesnepal.org.

Comments and Discussions