In this lesson I will implement a Property Change Notification for a Windows Phone 7 application. This pattern is very popular for providing a communication between different user controls in Silverlight application. For example, we can use that pattern if we have one parent control with many child controls and parent control needs to be notified if one of child control's properties is changed.
Requirements:
- Visual Studio 2010 with Windows Phone Developer Tools
- Windows Phone 7 emulator
- Silverlight 4+
Additional:
- More information about Property Change Notification at MSDN.
Tutorial
-
First of all, we need to create a new Windows Phone application project for our lesson
-
Then we need to add a new User Control to our project. This user control will have a property that will be changed. I've created a user control called "MyUserControl"
-
Now we need to implement INotifyPropertyChanged interface for that user control.
public partial class MyUserControl : UserControl, INotifyPropertyChanged
INotifyPropertyChanged interface is using System.ComponentModel namespace
using System.ComponentModel;
During interface implementation a new event member is created
public event PropertyChangedEventHandler PropertyChanged;
-
Now we need to created a method to fire the property change event. It shall have string as an input parameter.
protected void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
-
Now we are ready to create a property itself. Pay attention that inside property setter a method OnPropertyChanged is called.
private string _myProperty = null;
public string MyProperty
{
get
{
return _myProperty;
}
set
{
this._myProperty = value;
OnPropertyChanged("MyPropertyChanged");
}
}
-
Now we need to change our property somehow. I have created a textbox and a button for that reason.
Also we need to add a click event to the button to set our property with a text from a textbox.
private void btn1_Click(object sender, RoutedEventArgs e)
{
MyProperty = textBox1.Text;
}
-
Now we need to add our child control to parent and attach to a PropertyChanged event of a child control inside our parent class. MainPage.xaml will be a parent class in our case. I have added our user control and textblock for displaying results to MainPage xaml:
XAML for ContentGrid will now look like that:
<Grid x:Name="ContentGrid" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<my:MyUserControl Grid.Row="2" HorizontalAlignment="Left" Margin="0,23,0,0" x:Name="usrControl" VerticalAlignment="Top" Width="474" />
<TextBlock Grid.Row="2" Height="91" HorizontalAlignment="Left" Margin="67,220,0,0" Name="tbResult" Text="TextBlock" VerticalAlignment="Top" Width="360" FontSize="36" />
</Grid>
To subscribe for an event we need to add following code to MainPage class constructor:
usrControl.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(usrControl_PropertyChanged);
This usrControl_PropertyChanged should look like that:
void usrControl_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (!string.IsNullOrEmpty(e.PropertyName))
{
if (e.PropertyName.Equals("MyPropertyChanged"))
{
tbResult.Text = usrControl.MyProperty;
}
}
}
-
Finally, after running the application in emulator, entering text to a textbox, pushing the "Change Property" button, a new text will appear in textblock.
