WPF INotifyPropertyChanged Tutorial

In this tutorial we will learn how to implement the INotifyPropertyChanged in our WPF applications to update property values to be displayed on our views when they are changed. In this episode we create a base Observable Object class to make this feature universal for all of our view models. We use this to change the background color of our application and to change a name value for a welcome message.

Don’t forget the survey at the bottom of this page!

Youtube

Code from this episode

 

MainWindow.xaml (Unbound)

<!-- www.toskerscorner.com -->
<Grid>
   <DockPanel LastChildFill="False">
       <StackPanel Width="150" DockPanel.Dock="Top">
          <TextBlock Text="Unknown/>
          <TextBox Text=""/>
          <Button>Submit</Button>
       </StackPanel>
      <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" DockPanel.Dock="Bottom">
         <Button>Red Background</Button>
         <Button>Blue Background</Button>
         <Button>Yellow Background</Button>
      </StackPanel>
   </DockPanel>
</Grid>

 

ObservableObject.cs

public class ObservableObject : INotifyPropertyChanged
{
     public event PropertyChangedEventHandler PropertyChanged;

     public void OnPropertyChanged(string prop)
     {
          if(PropertyChanged != null)
          {
               PropertyChanged(this, new PropertyChangedEventArgs(prop));
          }
     }
}

[youtube-comments]

4 thoughts on “WPF INotifyPropertyChanged Tutorial

  1. Tosker-

    I thought this was a great explanation and I tried to replicate this exact program and something isn’t working in my code…it is probably something pretty stupid, but I can’t locate it. Any chance I can get the remainder of the code to see where my error is or send you my code for you to compare?

    Ultimately I am trying to use this to change the colors of ellipses on a grid to create status lights…I am not sure it will be the same process, but I thought it might be a start…Still pretty new to c# and its teaching an old dog any tricks, but I am getting there.

    Thanks in advance and I love how you are doing these!

    1. Please disregard the code posting unless you want to…I forgot to return _color in the BackgroundViewModel…it works now…but I am trying to apply this same thing to and ellipse…there is a disconnect (probably the space between my ears)…can you give me some ideas?

      1. The problem you may be having with an ellipse might be that you are trying to use a “Background” property? With an ellipse, the property to set a color is called “Fill”. Both in which should accept a brush value. If your code is working for the background, it should work if you bind it to the ellipses “Fill” property as well. Another thing you may need to take notice in, is the hierarchy of binding. If, for example, you put your ellipse inside a stack panel and have the stack panel bound to something else(Or the parent of the stack panel and the parent of that) you change the pathway in which your ellipse is binding. (Though binding errors may not throw exceptions, your console output should indicate one if you dig through its messages at run-time).

        You can also feel free to email me at ToskersCorner@outlook.com and I would be more than delighted to help you dig in to this problem a little deeper.

        Side Note: I realize now I should have posted the full code – as I do in other tutorials. Unfortunately I no longer have the project. I may at some point simply re-write it and update the post for future people needing it.

Leave a Reply

Your email address will not be published. Required fields are marked *