Working with Grid in Silver Light

Hi All,

In this article, we will see how to work with Grid in Silver Light application

1. Create New Silver Light application
2. Add Reference to application
3. Define Student Entity
4. Add Grid Control to MainPage.Xaml
5. Scratch code to bind source to Grid Control

Create New Silver Light application

1. Open VS 2010, File, New, Project, Select Silver Light (from left), Select Silver Light Application & Name it as "DataGrid"
2. Now it will show another screen with

1. New Web Project Name : DataGrid.web
2. New Web Project Type: Asp.Net Web Site

Add Reference to Application

1. Right Click “DataGrid” project (not web) & select add reference, select .NET, look for System.Windows.Controls.Data, click OK

Define Student Entity

1. Right Click “DataGrid” project (not web) & select new Item & add class, name it Student & define below properties to it

    public class Student
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Marks { get; set; }
        public int Age { get; set; }  

    }

Add Grid Control to MainPage.Xaml

1. Go to MainPage.xaml, below is the default .xaml code

<usercontrol x:class="DataGrid.MainPage" xmlns:x="#unknown">
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <grid x:name="LayoutRoot" removed="White">

    </grid>
</usercontrol>

2. To work with Grid control we need to add name space to xaml as follows

   xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

   • Now lets add Grid control
   data:DataGrid: Allows to add grid control x:Name: allow to define name/id to grid control data:DataGrid.Columns: allows to define columns to grid data:DataGridTextColumn: allows to define grid text column, similarly we will have other columns types as “data:DataGridTemplateColumn“ Header: allow to define header text for column Binding: allow to define entity property to column eg: Binding="{Binding FirstName}" or Binding="{Binding Path= FirstName }" Finally grid control will look like

   <data:datagrid x:name="List" autogeneratecolumns="False" xmlns:x="#unknown" xmlns:data="#unknown">
    	<data:datagrid.columns>
          	<data:datagridtextcolumn header="F Name" binding="{Binding FirstName}" sortmemberpath="FirstName"></data:datagridtextcolumn>
                 <data:datagridtextcolumn header="L Name" binding="{Binding Path=LastName}" sortmemberpath="LastName"></data:datagridtextcolumn>
      	</data:datagrid.columns>
    </data:datagrid>

   • Finally our MainPage.xaml will looks like

     <usercontrol x:class="DataGrid.MainPage" xmlns:x="#unknown">
         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:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
         mc:Ignorable="d"
         d:DesignHeight="300" d:DesignWidth="400">
     
         <grid x:name="LayoutRoot" removed="White">
             <data:datagrid x:name="List" autogeneratecolumns="False" xmlns:data="#unknown">
                 <data:datagrid.columns>
                     <data:datagridtextcolumn header="F Name" binding="{Binding FirstName}" sortmemberpath="FirstName"></data:datagridtextcolumn>
                     <data:datagridtextcolumn header="L Name" binding="{Binding Path=LastName}" sortmemberpath="LastName"></data:datagridtextcolumn>
                 </data:datagrid.columns>
             </data:datagrid>
         </grid>
     </usercontrol>

Scratch Code to Bind Source to Grid Control

1. Go to MainPage.xaml.cs & add Loaded event handler below

public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            // clear data grid values
            List.ClearValue(DataContextProperty);

            // define students list 
            List<student> stdList = new List<student>();

            // create new student object, assign values to it & add object to list defined in above step
            stdList.Add(new Student() { FirstName = "Surya", LastName = "Prakash" });
            stdList.Add(new Student() { FirstName = "Veera", LastName = "Prakash" });

            // assign StdList to Gird
            List.ItemsSource = stdList;
        }

2. Finally run the application & look for output.

Happy Koooding… Hope this helps!