C# Data Binding: Using INotifyPropertyChanged in WPF Apps
Tags: advanced, csharp, tutorial
Published: 2019-09-09 11:18:19

---
title: C# Data Binding: Using INotifyPropertyChanged in WPF Apps
published: true
tags: advanced,csharp,tutorial
canonical_url: https://wellsb.com/csharp/advanced/wpf-data-binding-csharp-inotifypropertychanged/
---
[Source](https://wellsb.com/csharp/advanced/wpf-data-binding-csharp-inotifypropertychanged/)

Learn how to use the INotifyPropertyChanged interface to bind a UI control in your WPF application to a property in your C# code.

## C# Data Binding

In the previous tutorial, you learned [how to create an event handler](https://wellsb.com/csharp/advanced/csharp-event-handler-example/) and attach it to an event, such as the clicking of a button. For example, you learned how to use to use `statusLabel.Content = "You clicked the button!";` to change the content of a label when the user clicks a button.

Suppose, you want your program to display a different string every time an event is triggered, such as a count of how many times a button has been clicked. First, you will need an event handler to increment the value of some counter variable in your code. Then, you will need to make sure the UI is repainted so the new value of the variable is properly displayed on the screen.

You may be tempted to create an event handler that resembles the following:

```csharp
public int Counter;
 
private void Button_Click(object sender, RoutedEventArgs e)
{
    Counter++;
    countLabel.Content = $"You clicked the button {Counter} times.";
}
```

This code will work, and the application will update the label content with the new count each time the button is clicked, but it is not recommended practice. As your projects get more advanced, it is tedious (and resource intensive) to have to continually redefine the content of UI elements each time an event is raised.

Instead, it is better to bind the properties that are being changed directly to the UI controls, so the front-facing user interface will automatically adjust to back-end changes that are made to the value of the property. This is called data binding, and it is an important component of UI application development.

## WPF Binding with XAML

Starting with a new WPF application, create a user interface with a single button and a label by modifying the MainWindow.xaml file.

```csharp
<Grid>
    <Button x:Name="myButton" Content="Click me" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" Width="75" Click="Button_Click"/>
    <Label x:Name="counterLabel" Content="{Binding Counter}" Margin="0,60,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
```

Your Label’s Content attribute should look like the following: `Content="{Binding Counter}"`. This will bind the content of this label control (with name **counterLabel** ) to to some C# property named **Counter**.

For the binding to work, you need to, first, define the **Counter** property and, second, configure the program to notify the UI when the value of the property changes. Start by creating a class which contains a public property called **Counter**.

```csharp
public class CountModel
{
    private int _counter;
 
    public int Counter
    {
        get { return _counter; }
        set
        {
            _counter = value;
        }
    }
}
```

In this class, we have defined a private **\_counter** integer and a public **Counter** property. Remember, C# is a case-sensitive language, so the label defined in MainWindow.xaml is bound to the public property **Counter**. It is exposed and accessed using `get` and `set` accessors. The private fields simply hold the values for the public properties.

## Implementing INotifyPropertyChanged

Now that you have defined the Counter property, you need to notify the UI that the property has been changed. To do this, your class will need to implement the `INotifyPropertyChanged` interface. Change Line 31 to:

```csharp
public class CountModel : INotifyPropertyChanged 

```

`INotifyPropertyChanged` is found in the `System.ComponentModel` namespace, so you will need to add the namespace via a `using` directive.

```csharp
using System.ComponentModel;

```

Recall when you [learned about delegates](https://wellsb.com/csharp/advanced/how-to-use-delegates-in-csharp/) that delegates can be used in event handling to pass values to the UI thread. To implement the `INotifyPropertyChanged` interface, you must register the `PropertyChangedEventHandler` delegate as an event.

```csharp
public event PropertyChangedEventHandler PropertyChanged;

```

Finally, create a method called `OnPropertyChanged()` that will trigger each time the value of **Counter** is changed.

```csharp
public class CountModel : INotifyPropertyChanged //using System.ComponentModel;
{
    private int _counter;
 
    public int Counter
    {
        get { return _counter; }
        set
        {
            _counter = value;
            OnPropertyChanged(nameof(Counter));
        }
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    protected void OnPropertyChanged(string propertyName)
    {

    }
}
```

By invoking the `OnPropertyChanged()` method within the `set` accessor, you have ensured that the event will be raised each time the property is changed. The `OnPropertyChanged()` method should receive as a parameter the name of the property that is being changed. This should correspond to the name of the property that was bound to the UI control `{Binding Counter}`. Line 41 is equivalent to `OnPropertyChanged("Counter");`.

Finally, write the `OnPropertyChanged()` method. When the `PropertyChanged` event is raised, this method will instantiate an object containing the name of the property that was changed so the UI control can connect to the appropriate property.

```csharp
protected void OnPropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}
```

Now, the program will listen for changes to the **Counter** property, and the UI will automatically update to reflect those changes when they occur.

## Improving the Code

To reduce the possibility of typos when invoking the `OnPropertyChanged()` method, you may benefit from using the `CallerMemberName` class of the `System.Runtime.CompilerServices` namespace. In this case, you can invoke `OnPropertyChanged()` without passing any attributes. Simply change the method definition as follows.

```csharp
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")

```

Note, you will need to add a `using System.Runtime.CompilerServices;` directive and define a default value for the `propertyName` parameter in order to use `CallerMemberName`.

You can simplify the `OnPropertyChanged()` method by replacing the _if not null_ condition with a null-conditional member access operator `?.`, also known as an Elvis operator. The `?.` operator invokes the delegate once it ensures that the delegate is not null.

```csharp
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
```

## Final Bits

Finally, create an instance of the `CountModel` object within `public partial class MainWindow` but outside any subclasses. You will use the name of this object to set the `DataContext` attribute of the **counterLabel** from the XAML file.

```csharp
public partial class MainWindow : Window
{
    CountModel countModel = new CountModel();
    public MainWindow()
    {
        InitializeComponent();
        counterLabel.DataContext = countModel;
    }
...

```

Following is what your completed code should resemble:

```csharp
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
 
namespace DataBinding
{
    public partial class MainWindow : Window
    {
        CountModel countModel = new CountModel();
        public MainWindow()
        {
            InitializeComponent();
            counterLabel.DataContext = countModel;
        }
 
        public class CountModel : INotifyPropertyChanged
        {
            private int _counter;
 
            public int Counter
            {
                get { return _counter; }
                set
                {
                    _counter = value;
                    OnPropertyChanged();
                }
            }
 
            public event PropertyChangedEventHandler PropertyChanged;
 
            protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            countModel.Counter++;
        }
    }
}

```

## Formatting UI Controls

Right now, the app is fairly uninteresting. The label shows a number and increments the number each time the button is clicked. Fortunately, there is a way to bind the UI control to the changing counter property and then format the string the label displays.

```csharp
<Label x:Name="counterLabel" Content="{Binding Counter}" ContentStringFormat="You clicked the button {0} times." Margin="0,60,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

```

Now, the label displays a formatted string that contains a counter which automatically responds to changes to a C# property. The property is incremented each time the button click event is raised. When the property change event is raised, the UI is notified and the label is updated.

![](https://wellsb.com/csharp/wp-content/uploads/sites/2/2019/09/wpf-data-binding-min.gif)

You can use the `ContentStringFormat` attribute in the same way you might use [composite formatting](https://wellsb.com/csharp/beginners/csharp-string-interpolation-vs-composite-formatting/) for a C# string. In the example above, you created a formatted string that substitutes the bound parameter at the desired location `{0}`. It can also be used to format a variable to display as a currency `{0:C}` or as a number with a designated number of decimal points `{0:N2}`.

If you use a TextBlock instead of a Label, you will use `StringFormat` instead of `ContentStringFormat`. Following is an example:

```csharp
<TextBlock x:Name="counterTextBlock" Text="{Binding Counter, StringFormat='You clicked the button {0} times.'}" Margin="0,120,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

```

## The Bottom Line

Correctly binding front-end view control elements to variables and properties in the back-end model is an important part of C# application development. The examples in this tutorial follow the MVVM pattern for WPF application development, but the principles are similar to the MVC model for ASP.NET web development. In this tutorial, you were introduced to the concept of binding data in C#. You learned how to bind a XAML element to a C# class property, and you learned how to format the resulting string to display in your app. The comments are open for any questions you may have.

[Source](https://wellsb.com/csharp/advanced/wpf-data-binding-csharp-inotifypropertychanged/)