Chandradev's Blog

Hi
Data binding is one of very important concept in silverlight.Before doing any data binding operation in silverlight, we should have to know the exact binding syntax in silverlight.

What is databinding in silverlight ?
Binding is the process of creating connection between User interface(UI) and source of data.
OR
It is the process of pulling information out of an object and displaying it in our application.

In Silverlight we can create the binding using 2 different approaches
a.Binding at runtime
b.Binding at design time.

Binding Modes in Silverlight
There are 3 binding modes
a. Onetime: if we have display some constant data then we can use this mode like database name
b. One-way:It is default mode in silverlight.Here the target property is updated when the source property change. Here will be one-way communication between source and target control.
c.TwoWay: Here will be two way communication between source and target control. If target control data will change then that will reflect in source control and vice-verse.

Simple databinding example in silverlight 4.0

Step1:Create one Emp class and declare the property like this

public class Emp
{
public int Id { get; set; }
public string EmpName { get; set; }
public string EmpSal { get; set; }
}

Step2:Create one silverlight page and Using GridPanel create one simple form for displaying data like this

<UserControl x:Class="Binding_In_Silverlight.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid Name="GridEmp">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Margin="7" Grid.Row="0">EmpId:</TextBlock>
<TextBox Margin="5" Grid.Column="1" Text="{Binding Id}" Grid.Row="0"/>
<TextBlock Margin="7" Grid.Row="1">EmpName:</TextBlock>
<TextBox Margin="5" Grid.Column="1" Text="{Binding EmpName}" Grid.Row="1"/>
<TextBlock Margin="7" Grid.Row="2">EmpSalary:</TextBlock>
<TextBox Margin="5" Grid.Column="1" Text="{Binding EmpSal}" Grid.Row="2"/>

</Grid>

</UserControl>

Step3: Write the binding code in code behind page like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Binding_In_Silverlight
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
FillGridPanel();
}

protected void FillGridPanel()
{
Emp emp = new Emp();
emp.Id = 122;
emp.EmpName = "Ram Mohan";
emp.EmpSal = "35000";
GridEmp.DataContext = emp;

}

}
}

Step4:Compile the code, then you will get op like this

Binding with collection of data
Here we will bind the collection of items using listbox silverlight control

Step1:Take one listbox silverlight control and configure like this

<navigation:Page x:Class="Binding_In_Silverlight.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640" d:DesignHeight="480"
Title="Page1 Page">
<Grid x:Name="LayoutRoot">
<ListBox ItemsSource="{Binding}" Width="200" Height="100">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding EmpName}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</navigation:Page>

Step2:Write the code in code behind page for binding like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Binding_In_Silverlight
{
public partial class Page1 : Page
{
public Page1()
{
InitializeComponent();

var employees = new List<Emp>()
{
new Emp{ EmpName = "Chandradev Prasad Sah" },
new Emp { EmpName = "Murli Reddy"},
new Emp { EmpName = "Krishana" }
};
this.DataContext = employees;
}

}
}

Step3:Now compile the code then you will get op like this

Here i have used 2 types of property binding data with listbox and textbox i.e DataContext & Itemsource

What is the difference between DataContext & Itemsource property?
Datacontext is used for binding single data item on silverlight control like textbox but item source is used to display the collection of data item in Silverlight control like listbox and dataGrid

Thank you for reading this artical and feel free to send comment, if have any suggestion.