Working with Grid in SilverLight

Steps to work with a Grid in a SilverLight application

Create a New SilverLight application
Add References to application
Define Student Entity
Add Grid Control to MainPage.Xaml
Scratch code to bind source to Grid Control

Create a New SilverLight application

Open VS 2010 -> File -> New -> Project -> Select SilverLight (from left) -> Select SilverLight Application & Name it as "DataGrid"

Now it will show another screen with

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

Add References to application

Right Click "DataGrid" project (not web) & select add reference, select .Net, look for System.Windows.Controls.Data, click Ok

Define Student Entity

Right Click "DataGrid" project (not web) & select new Item & add a class, name it Student & define the below properties in 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 a Grid Control to MainPage.Xaml

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

<UserControl x:Class="DataGrid.MainPage"
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" Background="White">
</Grid>
</UserControl>

To work with a 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 us to add grid control
x:Name: Allows us 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">
<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 look like

<UserControl x:Class="DataGrid.MainPage"
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" Background="White">
<data:DataGrid x:Name="List" AutoGenerateColumns="False">
<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

Go to MainPage.xaml.cs & add a 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;
}

Finally run the application & look for output.

Happy coding... Hope this helps!