12/20/2010

The Magic of Binding and INotifyPropertyChanged in WPF

Recently I found out that "Any sufficiently advanced technology is indistinguishable from magic" - Clarke's third law.

I was surfing through internet for some good WPF examples and came to the post of Pete Brown on Puff the Magic POCO Binding and INotifyPropertyChanged in WPF so thaught of trying it out.

I'll try to explain the same in much simpler way (as I did it) for extremely new developer in WPF.

Here we go...

1. Open Visual Studio 2010 -> File -> New Project -> Visual C# -> WPF Application

2. Paste below XAML CODE in your code.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox x:Name="PeopleList"
                 Height="287"
                 HorizontalAlignment="Left"
                 DisplayMemberPath="LastName"
                 Margin="12,12,0,0"
                 VerticalAlignment="Top"
                 Width="138" />
        <TextBox Height="23"
                 HorizontalAlignment="Left"
                 Margin="265,24,0,0"
                 x:Name="LastNameField"
                 VerticalAlignment="Top"
                 DataContext="{Binding ElementName=PeopleList, Path=SelectedItem}"
                 Text="{Binding LastName}"
                 Width="120" />
        <TextBlock Height="23"
                   HorizontalAlignment="Left"
                   Margin="178,27,0,0"
                   Text="Last Name"
                   VerticalAlignment="Top" />
    </Grid>
</Window>


3. In the code-behind add a Person Class:

class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}


4. Here's the rest code-behind's code :

public partial class MainWindow : Window
{
private ObservableCollection _people;
public MainWindow()
{
InitializeComponent();

_people = new ObservableCollection();

_people.Add(new Person() { LastName = "Brown" });
_people.Add(new Person() { LastName = "Fitz" });
_people.Add(new Person() { LastName = "Hanselman" });
_people.Add(new Person() { LastName = "Heuer" });
_people.Add(new Person() { LastName = "Galloway" });
_people.Add(new Person() { LastName = "Stagner" });
_people.Add(new Person() { LastName = "Liberty" });
_people.Add(new Person() { LastName = "Litwin" });
_people.Add(new Person() { LastName = "Papa" });
_people.Add(new Person() { LastName = "Guthrie" });

PeopleList.ItemsSource = _people;
}
}


That's it. Now run the appliction (by presssing F5 key), select any value from the List Box and it will appear into the Text Box.

The Magic of Binding and INotifyPropertyChanged in WPF

OK, so what's the magic over here??!!

Select any value from the List Box, once it appear on Text Box, Change the value into the Text Box and press TAB.

Woha!!!! Magic!!! isn't it??

As sson as you press the TAB key, the value also got changed into the List Box!!!!!

Hmm....now let's try to understand what's just happening over here. That's calledthe magic of PropertyDescriptor.

The PropertyDescriptor has the AddValueChanged method by which a listener can sign up to get the property change notifications from that descriptor. And to add on, this will only work with binding. If you update the values from code-behind, this magic won't occur.

I suggest you to read the post of Pete Brown on Puff the Magic POCO Binding and INotifyPropertyChanged in WPF for more in depth details.

0 comments: