Simple Two Way Data Binding Application in Silverlight

Using this simple application I hope to explain basic data binding technique in silverlight. 1. First create a new silverlight application and named it as BasicSilverlightApp. 2. Now design your main grid like bellow

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="Name:" VerticalAlignment="Center" Margin="5"/>
        <TextBox Text="{Binding Name,Mode=TwoWay}" VerticalAlignment="Center" Grid.Column="1" Margin="5"/>

        <TextBlock Text="Age:" VerticalAlignment="Center" Grid.Row="1" Margin="5"/>
        <TextBox Text="{Binding Age,Mode=TwoWay}" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5"/>

        <TextBlock Text="Location" VerticalAlignment="Center" Grid.Row="2" Margin="5"/>
        <TextBox Text="{Binding Location,Mode=TwoWay}" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5"/>

    </Grid>

3. Now we do some coding in MainPage.xaml.cs page.First we will add a loaded event handler to the page.

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            throw new NotImplementedException();
        }
    }

Now we will add a class called Person to define a Person object and to enable the Two way binding we have to implement Person has from INotifyPropertyChanged interface.This will help to create a change event for each property.

    public class Person : INotifyPropertyChanged
    {
        private string _name;
        private int _age;
        private string _location;

        public event PropertyChangedEventHandler PropertyChanged;

        private void CatchPropertyChange(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }

        public string Name
        {
            get
            {
                return _name;
            }
            set
            {
                _name = value;
                CatchPropertyChange("Name");
            }
        }

        public int Age
        {
            get
            {
                return _age;
            }
            set
            {
                _age = value;
                CatchPropertyChange("Age");
            }
        }

        public string Location
        {
            get
            {
                return _location;
            }
            set
            {
                _location = value;
                CatchPropertyChange("Location");
            }
        }

    }

4.Now we created out Person class and now we will create an instance of the Person class and set it to the LayoutRoot's DataContext.

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            Person person = new Person()
            {
                Name="Erandika Sandaruwan",
                Age=25,
                Location="Gampaha"
            };

            this.LayoutRoot.DataContext = person;
        }

5. Now you can run your silverlight application and then you will see the following output. [caption id="attachment_66" align="aligncenter" width="557" caption="Output"][/caption] Download Source Code Here : Download