Data Binding with DataGrid control
In this demonstration we learn how to implement complex data binding in
silverlight. Here we show that how to bind data with list box control. We know
that complex data binding means to bind data with such type of controls which
have a capacity to show more than one value at a time. Best example for complex
data binding is ListBox control, ComboBox control and DataGrid control etc. Here
we see that how to bind data with DataGrid control.
XAML code which represent user
interface of Data Binding control
<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding}" Height="200" HorizontalAlignment="Left" Margin="43,36,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="293" >
<data:DataGrid.Columns>
<data:DataGridTemplateColumn Header="Employee Id" Width="Auto">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding ID}" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
<data:DataGridTemplateColumn Header="Employee Name" Width="Auto">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
<data:DataGridTemplateColumn Header="Employee Age" Width="Auto">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Age}" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
<data:DataGridTemplateColumn Header="Employee City" Width="Auto">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding City}" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
Noteà For implementing this task drag
and drop DataGrid control from Toolbox then make appropriate changes
Create a class named Employee
public class
Employee
{
public string
ID { get; set; }
public string
Name { get; set;
}
public string
Age { get; set;
}
public string
City { get; set;
}
}
Create a method name GetEmployeeData() in MainPage class
public List<Employee> GetEmployeeData()
{
List<Employee>
emp = new List<Employee>();
emp.Add(new
Employee() { Name = "Awadhendra", Age="22" , City="Allahabad"
, ID="E0001" });
emp.Add(new
Employee() { Name = "Abhishek", Age="24" , City="Allahabad"
, ID="E0002" });
emp.Add(new
Employee() { Name = "Amit", Age="30" , City="Kanpur"
, ID="E0003" });
emp.Add(new
Employee() { Name = "Haider", Age="28" , City="Kanpur"
, ID="E0004" });
emp.Add(new
Employee() { Name = "Sachindra", Age="25" , City="Allahabad"
, ID="E0005" });
emp.Add(new
Employee() { Name = "Uttam", Age="32" , City="Lucknow"
, ID="E0006" });
return emp;
}
Write down the following code at the load event of User Control
private void UserControl_Loaded(object sender,
RoutedEventArgs e)
{
dataGrid1.DataContext = GetEmployeeData();
}
Save the application and then execute it
|