UWP (Universal Windows Platform) is a platform provided by Microsoft that allows you to develop Windows applications that can run on various devices. UWP is used in conjunction with the MVVM (Model-View-ViewModel) architecture, where data binding plays an important role. Data binding is a technique for establishing the relationship between UI elements and data models, allowing the UI to automatically reflect changes in the data model. While it is theoretically possible, to implement it practically, one must understand the INotifyPropertyChanged interface.
1. What is the INotifyPropertyChanged interface?
INotifyPropertyChanged is an interface that is used to notify the UI when a property of a data model class has changed. The core of this interface is the PropertyChanged event. The UI subscribes to this event, and when a property of the data model changes, the event is raised to update the UI. This makes it easy to maintain synchronization between the data and the UI.
1.1 Components of INotifyPropertyChanged
INotifyPropertyChanged interface has the following structure:
public interface INotifyPropertyChanged
{
event PropertyChangedEventHandler PropertyChanged;
}
1.2 PropertyChangedEventHandler
PropertyChangedEventHandler is a method used to identify the changed property. It receives the name of the changed property when invoked and is used to update that property in the UI. Its structure is as follows:
public delegate void PropertyChangedEventHandler(object sender, PropertyChangedEventArgs e);
1.3 PropertyChangedEventArgs
PropertyChangedEventArgs class represents the name of the property and is passed when the PropertyChanged event occurs. This class has the following structure:
public class PropertyChangedEventArgs : EventArgs
{
public PropertyChangedEventArgs(string propertyName);
public string PropertyName { get; }
}
2. Implementing the INotifyPropertyChanged interface
Now, let’s actually implement the INotifyPropertyChanged interface. Below is an example of a simple ViewModel class.
using System;
using System.ComponentModel;
public class Person : INotifyPropertyChanged
{
private string name;
public string Name
{
get { return name; }
set
{
if (name != value)
{
name = value;
OnPropertyChanged(nameof(Name));
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
The above Person class implements INotifyPropertyChanged and raises the PropertyChanged event whenever the Name property changes. The OnPropertyChanged method ensures that the event is called to subscribers.
2.1 Using in ViewModel
Next is a simple example of a UWP application using this Person ViewModel. I will define a XAML view and a ViewModel to demonstrate data binding.
// MainPage.xaml
// MainPage.xaml.cs
public sealed partial class MainPage : Page
{
public Person PersonViewModel { get; set; }
public MainPage()
{
this.InitializeComponent();
PersonViewModel = new Person();
this.DataContext = PersonViewModel;
}
}
In the above code, the TextBox and TextBlock are each bound to the Name property, allowing the input from the user in the TextBox to be reflected in real-time in the TextBlock. When the user changes the text in the TextBox, the Person class that implements INotifyPropertyChanged detects it and informs the UI.
3. Importance of the INotifyPropertyChanged interface
INotifyPropertyChanged interface plays an important role in simplifying synchronization between data and UI and improving maintainability within the MVVM architecture. Accurately reflecting changes in data state in a complex UI application enhances the stability of the application and the user experience.
3.1 Performance Improvement
Setting bindings for all properties can impact performance. It is advisable to manage only those properties that require event firing using INotifyPropertyChanged for optimization.
3.2 Improved Code Readability
Utilizing data binding clarifies the relationship between the UI and business logic, enhancing code readability and maintainability. Particularly, the MVVM pattern allows for clear separation of responsibilities among components, reducing the complexity of the code.
4. Example of Using INotifyPropertyChanged
Let’s create a ViewModel with multiple properties for a complex application. This example allows input for the user’s age and occupation.
public class UserProfile : INotifyPropertyChanged
{
private string name;
private int age;
private string occupation;
public string Name
{
get { return name; }
set
{
if (name != value)
{
name = value;
OnPropertyChanged(nameof(Name));
}
}
}
public int Age
{
get { return age; }
set
{
if (age != value && value >= 0)
{
age = value;
OnPropertyChanged(nameof(Age));
}
}
}
public string Occupation
{
get { return occupation; }
set
{
if (occupation != value)
{
occupation = value;
OnPropertyChanged(nameof(Occupation));
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Manages the user’s profile through additional properties. Below is the XAML code that uses this ViewModel.
// UserProfilePage.xaml
In this example, the user can input their name, age, and occupation, and the changes are immediately reflected in the UI. Through data binding between the TextBox and TextBlock, user-entered values are updated in real-time.
5. Conclusion
The INotifyPropertyChanged interface provides a deep connection between data and UI in UWP development. This helps improve the maintainability and user experience of applications. By adopting the MVVM architecture, it is possible to effectively manage concerns and enhance the readability of applications through data binding.
Through this course, we learned the basics of the INotifyPropertyChanged interface and UWP application development utilizing it. Based on this, we can apply this concept in developing more complex applications.