C# WPF Tutorial - Using INotifyPropertyChanged

what's going on guys Tasker here and in this video we are going to talk about the inotify property changed interface in WPF now we are going to be working with this application that I already kind of set out the sam'l so if you choose to follow along I will provide in the description a link to get the code here for the sam'l and you can copy and paste that into your window content with that being said like I mentioned we're going to talk about the implementation of the property changed interface and before we start jumping into coding we're going to hop over to these slides real quick real quick and just have an overview on what it actually is and then come right back here and dig in deep and start working on the example inotify property changed as an interface you can use in WPF to notify a client that the value of a property has changed this interface requires an implementation of a property changed event which you use when notifying a property has been changed using this method generally requires multiple implementations and it usually is wise to create a base class that handles this often creating an observable object class for your view models to be derived from then calling a method in its base class to handle these updates here's an example of what our base class may look like when implementing this interface so here you'll see we have a public class called observable object and this will inherit the inotify property changed interface and then we have a protected void called property changed normally I'll name it on property changed and we supply it with a parameter of a string value which would be the property name then we check if the property changed event is null and if not then we will set the property changed event and we will pass it the current class and supply it a new property changed event our key in supplied with the property name that was passed as the parameter here is an example of what our view models may look like when having the object as its base class and utilizing its property changed method so notice we have our view model inherit the observable object and then when we change a property we call the property changed method which signals its value has changed if the name property is bound to text block for example its text value will update accordingly this can have code smell you may realize that this can cause our code to get a little bulky if we have a large amount of controls found too many changeable properties and implement them all as previously shown things can get pretty ugly this is why we must also be very aware that we follow solid principles if we begin to notice implementing this is becoming a little chaotic we need to ask ourselves are we giving our view model too many responsibilities there is a more elegant way to implement this but as for now I'm going to keep things simple okay so now that we're back from the slides we are going to like we mentioned work on implementing the observable object class so we're going to go over to our notify change project add class and here we're going to create an observable object all right we'll create that there will be a public class and this will have to use the inotify property changed interface so I notify changed off the bat we won't have it so we'll hit control period and add in our system dot component model namespace now that we have that we'll have a little error because we haven't implemented the interface to this class just yet so this is why we will create a public event of a property change event handler and we will call this property change we then will create a protected void of property changed it'll take a string parameter of the property name and then we will check if the property change event is not equal no then our property changed pass it this class and then a new property changed event arts and we will also send this the parameter of the property name so the reason we do this is because as we create more view models each view model would need to have exactly what we created here and we don't want to duplicate code and it would just become pretty cumbersome after we create a few view models so by creating this any class that we plan on having observable properties to the user from the view then it will inherit from the observable object and if those properties are subject to change we can simply call this protected void here which if we have the observable object as our base class we can use this method here and we'll call the on property changed with the property name and it will update it as so next we need to create a view models folder we're only going to be working with view models today because it's not going to be too big of a project and now that we have that we want to create first a person view model which actually reminds me let me go back real quick I don't know why I skipped through that let me go back real quick and explain exactly what the hell we're even making here ok well first we have the Welcome unknown so if it doesn't know your name it'll just say unknown and basically here is where we're going to put in the text box the name your name so once you change your name it'll say welcome Joe John Jerry Katherine whatever so if you haven't left the video after this terrible start off here let's go back to our view models and we're going to go to our view models and we're going to create a person view model ok and this will be a public class and this will inherit our of reservable object and then we will create a private string name and then we will create a public string name with a git and basically if we input a empty string because we're going to do one way to source and then one way explicit so if we're going to do that we want to make sure if this is not declared that it'll at least return something because we don't want to break the binding by throwing an error so we're going to say if string dot is no lor empty we'll pass it our private name here so if it is null or empty we're simply going to return unknown and then obviously if it's not it'll continue on to here and we will simply return the value of the name then we are going to do a set and here is where we will set the name to a devalue past and then we will call our own property change name so if it does if this does not yet have a value which it won't once we instantiate it it'll just return unknown and then as the name property here is supplied a new value to give to our private string here it'll update the on property changed and then it once it does that whatever we bind to this property will then again call the get accessor and it will get the private string we have here but its new value because we changed it then we said it changed so then it will recall it and get it again next we go here to our main view we are also going to be changing the background color of our grid by using these buttons so we're going to create a background view model okay and here we'll have a public class this will be derived from our observable objects and in here we're going to have a private brush will hit control period enter in our system dot windows dot media namespace so brush this will hold the color and we're going to say a public brush color I get and then again we don't want to break any binding so we're going to say if our color is no and we will return brushes red so I think red is a good indicator of something bad and then we'll say return color if it does have a value and we're also going to do set let's say color equals value we provide and then again we'll call our on property change color so this is going to be pretty quick now one last thing we need is a main view model to tie it all together so we'll go to our view models again going to say class main view model here's our public class and then we are going to create a public person view model that we will call person but actually we need to make it a property so because we are going to be binding so let's say public get private set we're going to say a public background view model and we will appropriately call this background and we'll say get privates up and seat or tap tap to create a constructor real quick and we will instantiate these to just empty declarations for the beginning this way we can actually see our null checking as well okay and since with the person named I'm going to be showing you binding one way to source and updating its source trigger but for the backgrounds we're going to have to actually set those manually so here we're going to do a public lloyd step background pass at a brush again control period to add in the system windows media and then we're going to say brush color and then here we are simply going to say background color equals brush color so now we have it all tied together you might want to fast forward maybe ten seconds if you don't want to hear me because I'm just going to go through each of these real quick so we got our main view model here which will hold our person view model and our background view model and off the bat we are going to just have these as blank instances so by default we will get our default values that we set here for example our name will return unknown so we'll get our name if it's null or empty it'll return unknown and then if not it will return the value and we have our own property changes being called to the public property because this is what we're going to be binding to you don't want to say the property name of the private string you want it of the public one we are bound to and same goes for the background so now we'll go over to our main view model so here we are in our main view model hello to you who have fast forward and now we're going to start binding from our sam'l to these view models so first things first is we're going to look at our text blocks so right now it's set to just say welcome unknown so now we need to bind it to our person's name so we're going to say binding person dot name and because we want to walk a message we are also now going to learn about string format so comma string format and here we'll type how we want to format it so we want it to say welcome and then 0 in the brackets which if you're familiar with working with console applications or any other string format in code-behind similar to when you do that and then you pass the value afterwards so it'll say welcome and then it will insert whatever value it's bound to next we're going to have our text box here which is where we're going to see our one way to source so this is where we're going to also say this is bound to the person name but we're going to set its mode so comma mode to one way to source and we'll talk more about that in a minute next we have our red blue background and yellow background buttons we're going to just set events for these right off the bat so we're going to say red click enter hop back to our main window select our blue button go to its click event blue clicked and hop back to our main window which there's a quick way to do this maybe there is if you know a quicker way to set all these events uh put in the comments so yellow click alright so now we have our dunce one thing we're also going to notice and I'll run the application just because it is not going to work yeah okay right now you'll notice we have nothing displayed and doing nothing doesn't work just yet and because we haven't set the data context so this is where we have our main queue model control period we need to enter in our view models name space and we're going to call this underscore main and off of that we'll just create a new instance of it and then now we need to set the data context of this window to main whoops data context equals underscore main all right and now if we go to our red clicked blue clicked yellow clicked we can say main dot set background brushes and this is what red oh okay that is kind of a problem but I'll talk about that later main set background blue whoops not blue clicks brushes blue and then for yellow main set background brushes yellow and you'll notice earlier I just said oops we might have a problem that's because our red clicked is if we go back to our background view model is what we said for when it's null so we're going to have to change that to get a accurate indicator and I like orange so let's do orange so we'll change that to orange go back to our main view so now we have all of this I'm going to say start without debugging because that little tool up above gets a little annoying so notice now it's going to say welcome unknown and let's test our backgrounds so our backgrounds are not working so we're going to have to fix that in just a second but let's see if our welcome message is working so if I say my name is Jo notice it's not changing but if I hit submit it's going to change the submit isn't doing anything but the fact that I am changing the focus of the text box will then update it so I could say Jerry okay click are not working background buttons and see it'll update what we didn't do is we didn't bind it to anything where did we you know we see who he's passed everything but we didn't bind our grids background to it so we're going to say background binding background dot color okay so now we'll run the application again to see if our background buttons work and let's notice now that should have been the initial indicator actually now we have the orange background red blue yellow so now we can change our backgrounds which is pretty cool but we still have a problem when we type in our text box here it only changes when we hit the arbitrary submit button to lose focus so one way of changing this is by updating the source trigger which you can access when binding so if we do comma after our mode one way to source will say comma and this will relax ice exes like my little accent there access the update source trigger and this is where we will set it to property changed so actually let me go rewind equals so you'll notice here we have default and then we have like for example loss focus which is when we like click the button so it would change when the control loses focus and then we have property change and I'll go over lake explicit and stuff and other time but so here we set it to property change so whenever the value changes in the text block that's when it'll update the one way to source so now I will go to debug and I'm going to start without debugging so I don't get the anointing tool that covers up our welcome message so here we have welcome and I click it and as I type j:o you'll see it updates I could say yeah Mary I guess I don't know why yeah so we'll do that and then as we erase it it goes back to unknown I can say Jessica same thing erase and I'll go back to unknown and our backgrounds are still working so I hope I didn't move through that too quickly at the bottom of this video right now there should be a link to give me a survey on how you like this video I'm trying to work on improving things and it's easier when you guys are more vocal with me so you can take the little survey below it's like five seconds and it'll just ask you questions about this video and what I could improved on or what you didn't like or what you did like and you can take that a few of like annotations turned off or whatever it should be in the description as well I hope you guys enjoyed this video and I do plan on next doing we're learning about the I command interface and relay commands or command delegates so that should be really interesting because we'll be able to use our notify property changes with that tutorial as well so it will be useful to have this and then move on to that and I also do plan on having a future tutorial kind of like our machine view model one but in this case we'll be just creating a simple context book application where you can store contact information or people's names phone numbers addresses etc so with all that being said like the video comment on it or dislike it if you didn't like it and all I ask is if you do that just at least let me know what you didn't like and subscribe so thanks for watching

Channel: ToskersCorner

Views: 37,039

Keywords: C#, .Net, Programming, tutorial, beginner, how to, source code, wpf binding, property changed, INotifyPropertyChanged, property binding, update source trigger wpf, binding mode wpf, binding mode, wpf, windows presentation foundation, beginner wpf, C# wpf, C# tutorial, learn programming, C# programming, wpf mvvm, learn to program, wpf xaml, wpf tutorial, learn C#

Id: LEKngPq342s

Length: 22min 0sec (1320 seconds)

Published: Wed Dec 07 2016