In this article i am going to describe how to Bind Data to a Property in Silverlight in some simple steps.
Step 1: Create a new Silverlight Application Project, give it a name say BindingInSilverlight.
Step 2: Go to MainPage.xaml and prepare UI.
Initially xaml inside it will look like this:
<UserControl x:Class="BindingInSilverlight.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="500" d:DesignWidth="800">
<Grid x:Name="LayoutRoot" Background="White" Margin="50,20,0,0">
</Grid>
</UserControl>
Now add RowDefinitions and ColumnDefinitions in Grid tag,
it will give a better look and feel to our layout.
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
Add some Controls in it like TextBlock and TextBox with Grid.Row and Grid.Column specifications for accurate layout.
Add Binding paraeters: Name and Place are two Properties to Bind here.
<TextBlock Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Text="Insert Values to Bind"
FontSize="16" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Row="1" FontSize="14" Grid.Column="0" Text="Name :" VerticalAlignment="Center"/>
<TextBlock Grid.Row="2" FontSize="14" Grid.Column="0" Text="Place To Visit:" VerticalAlignment="Center"/>
<TextBox FontSize="14" Text="{Binding Name, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Margin="5"/>
<TextBox FontSize="14" Text="{Binding Place, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Margin="5"/>
<TextBlock Grid.ColumnSpan="2" Grid.Column="3" Grid.Row="0" Text="Binding..." FontSize="16" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Row="1" FontSize="14" Grid.Column="3" Text="Hello:" VerticalAlignment="Center"/>
<TextBlock Grid.Row="2" FontSize="14" Grid.Column="3" Text="Welcome to:" VerticalAlignment="Center"/>
<TextBlock FontSize="14" Text="{Binding Name}" Grid.Row="1" Grid.Column="4" Margin="5"/>
<TextBlock FontSize="14" Text="{Binding Place}" Grid.Row="2" Grid.Column="4" Margin="5"/>
Finally our UI will look like this:
Left Side to get Data from User, and Right side to show binding.

Step 3: Go to MainPage.xaml.cs page, now we have to add some Code there.
First of all implement INotifyPropertyChanged interface with namespace System.ComponentModel,
the INotifyPropertyChanged interface is used to notify clients, typically binding clients, that a property value has changed.
Also define Properties Name and Place with their get and set methods along with a OnPropertyChanged method,
this will be called when it notifies some change in the Property.
After doing all our MainPage.xaml.cs will look something like this:
using System.ComponentModel;
namespace BindingInSilverlight
{
public partial class MainPage : INotifyPropertyChanged // INotifyPropertyChanged interface.
{
public event PropertyChangedEventHandler PropertyChanged; // PropertyChanged event
private void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs(property)); // Notification.
}
}
private string _name;
public string Name
{
get { return _name; }
set
{
_name = value;
OnPropertyChanged("Name");
}
}
private string _place;
public string Place
{
get { return _place; }
set
{
_place = value;
OnPropertyChanged("Place");
}
}
public MainPage()
{
DataContext = this;
InitializeComponent();
}
}
}
Step 4: Start filling Details.
you will see whenever you navigate away from any TextBox its contents are automatically
visible in the Right hand side of the Layout as:

This is how we can Bind Data to a Property in Silverlight.
92a75380-79f1-4d9a-96fa-44d420108be7|0|.0
Categories:
Silverlight
16. October 2012
Tags:
Silverlight, Databinding