Binding Control to Data Model in Windows Store Apps

In this article I will show you data binding with the data model class and how to enable reception of notifications to the user when the model is updated from the UI by the user. For receving notifications here I use TwoWay binding in the UI element. You can learn about DataBinding Modes from here.

Steps to be followed.

Step 1

I will design the UI for showing the data.

</Grid>
  <StackPanel Orientation="Horizontal" Margin="0,10,0,0">

      <Button x:Name="BindData" Content="Bind" Margin="0,0,10,0" Click="Bind_Click" />

  </StackPanel>
  <StackPanel>
      <Border BorderBrush="LightBlue" BorderThickness="4" Grid.Column="1" Grid.Row="0">
          <StackPanel Margin="5">

              <TextBlock Text="Name:" Style="{StaticResource BasicTextStyle}" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>

              <TextBox Text="{Binding Path=Name, Mode=TwoWay}" Width="350" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>

              <TextBlock Text="Organization:" Style="{StaticResource BasicTextStyle}" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>

              <TextBox Text="{Binding Path=Organization, Mode=TwoWay}" Width="350" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>

              <TextBlock Text="Designation:" Style="{StaticResource BasicTextStyle}" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>

              <TextBox Text="{Binding Path=Designation, Mode=TwoWay}" Width="350" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>

         </StackPanel>

      </Border>

    <Border BorderBrush="LightBlue" BorderThickness="0,4,4,4" Grid.Column="2" Grid.Row="0">

     <TextBlock x:Name="tbBoundDataModelStatus" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    </Border>
  </StackPanel>

</Grid>

Step 2

Here is the model class that is used to bind the UI control.

public class Employee : INotifyPropertyChanged //Implement INotifiyPropertyChanged interface to subscribe for property change notifications

{

        private string _name;

        private string _organization;

        private string _desig;

 

        public string Name

        {

            get { return _name; }

            set

            {

                _name = value;

                RaisePropertyChanged("Name");

            }

        }

        public string Organization

        {

            get { return _organization; }

            set

            {

                _organization = value;

                RaisePropertyChanged("Organization");

            }

        }

        public string Designation

        {

            get { return _desig; }

            set

            {

                _desig = value;

                RaisePropertyChanged("Designation");

            }

        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void RaisePropertyChanged(string name)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(name));

            }

        }

    }

}

Step 3

In the XAML.cs file, create the object of the model class and set the value to the property, as in:
 

private void Bind_Click(object sender, RoutedEventArgs e)

{

    Employee  _employee = new Employee();

    _employee.Name = "Jane Doe";

    _employee.Organization = "Contoso";

    _employee.Designation = "Software Developer";

    _employee.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(employeeChanged);

    MainPage.Current.DataContext = _employee;

    tbBoundDataModelStatus="";
}

Step 4

Create an Event handler for the class that fires when the model is updated in the UI, as in:
 

private void employeeChanged(object sender, PropertyChangedEventArgs e)

{

   tbBoundDataModelStatus.Text = "The property:'" + e.PropertyName + "' was changed";

          

}

Step 5

Build the app and run it.

Click on the Bind button. It will display the records.



Now, when you change the value in the given textbox, you will receive notification that the model has been updated by you. This is done using the TwoWay binding mode.