Working with Grid in SilverLight

In this article, we will see how to work with a Grid in a SilverLight application.

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!