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.