Hi All,
In this article, we will see how to work with Grid in Silver Light application
- Create New Silver Light application
- Add Reference to application
- Define Student Entity
- Add Grid Control to MainPage.Xaml
- Scratch code to bind source to Grid Control
Create New Silver Light application
- Open VS 2010, File, New, Project, Select Silver Light (from left), Select Silver Light 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 Reference 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 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
- 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>
- 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>
Scratch Code to Bind Source to Grid Control
- 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)
{
List.ClearValue(DataContextProperty);
List<student> stdList = new List<student>();
stdList.Add(new Student() { FirstName = "Surya", LastName = "Prakash" });
stdList.Add(new Student() { FirstName = "Veera", LastName = "Prakash" });
List.ItemsSource = stdList;
}
- Finally run the application & look for output.
Happy Koooding… Hope this helps!