Steps to work with a Grid in a SilverLight application

  1. Create a New SilverLight application
  2. Add References to application
  3. Define Student Entity
  4. Add Grid Control to MainPage.Xaml
  5. 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

  1. New Web Project Name : DataGrid.web
  2. 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!