C# WPF Tutorial #8 - Data Bindings using INotifyPropertyChanged

welcome back everyone this time we are going to dive into Data bindings we're going to teach this topic a little bit differently I'm going to try to walk around the problem a lot because there are a lot of nuances that come with data binding and I don't want you to get stuck in the same pitfalls that I've seen a lot of Junior engineers get stuck in so copy this code down you can style these controls however you like but just have a three row grid with a text box a button and a text block and make sure to bind the text properties like we did last video to a property called bound text okay now we learned from last video that we are going to need a full property for our binding so let's say proper web tab a string tab tab found text tab found text so now we have a property and last time what we did was when this bound text Setter was set we accessed the control directly and I told you explicitly do not do this because we're going to do something called on property changed and that's what we are going to talk about one of the main bonuses of a data binding is to separate the GUI from The Code by defining a property in the GUI our designer can keep working and we can keep designing and by defining this property with an unchanged Handler we don't have to reference the GUI control directly like we did in the last video therefore we don't have to have the GUI finished to continue working on our code that also lets it beat separately testable which is important so how do we go from code to GUI and vice versa well if you look at your bound property it should have three dots and it should say no data context found well that's how we do it we have to define a data context to know how to link these bindings with where they are in the code now there is a way to do this in xaml and Define your data context at design time which is what would make these three dots go away but what we're going to do is since we're using the code behind for our data context we are going to say data context equals this in our Constructor setting the data context property to this code behind file now if you're using a design practice design pattern like mbvm this data context would be set to a view model and your code behind would be largely unused but doing it this way it's a little bit easier to understand what's going on so we'll talk more about mvvm later now what we have done is bound bound text to our text boxes text so when we enter something in our text box we would expect the setter to get called and our bound text property to be filled with whatever is in this box but we've also bound the bound text to the text of the text block so whatever is entered in this box we want to show up in our text block but now we run into the same problem we had last video because when the setter is run we have no way to tell the GUI hey it's changed display it and that's why we had to call the control directly but you can see that if you bind to multiple things or if you had a very complex binding like say to a model or a collection how this could get very bad very fast but instead we can use this on property changed and let the GUI handle it for us to make use of on property changed we need to implement the interface I notify property changed and I notify property changed is going to live in the namespace system.component model so you're going to need to add that as a using so that you can add the interface now that we have the interface we need to implement it so we will go and Implement our interface and what that's going to do is add a public event of type property changed event handler and give us an event property changed now that we have a property changed event we can do what's called invoke it and that's exactly what the GUI does when we do something like click a button so rather than us receiving an event that was invoked from the GUI we are actually invoking our own event so that the GUI can hear it to do that in our Setter we're going to want to say property changed if it's not no we want to invoke the event now just like the GUI events invoke takes a couple of arguments Ascender and then a specific type of event arguments so the sender is going to be this because it's coming from here and then we're going to want to create a new property changed event arguments and in this property changed event argument you see that it takes a property name well that property name is going to be our property name bound text so now this is going to say anytime this Setter is set invoke the event that this property has changed and that way the GUI can respond accordingly so let's see this in action we have our data context and our event our things are bound so when we run this we would expect to type in this text box and the text block display it but it does not now watch what happens when I push the set button oh it showed up but why our button has no click Handler and no code to do anything well that's one of those nuances I was talking about that always catches Junior developers so a binding has more than just a binding property it actually has things like update Source trigger and this is specific to each control and every control has its own default a lot of controls default is property changed but a text Box's default is lost Focus so until we click into another control or say press a button this Source trigger is not going to fire our event saying the property has changed so we need to change this to update Source trigger equals property changed now there may be times where you don't want this binding to fire until you leave the text box but if you need to do any sort of real-time validation or immediately mirror what has happening in the box somewhere else then you need to do it on property changed and not lost Focus so now when we run this every change to our box will be mirrored in our text block immediately so now we can go directly from a GUI control into a string property without having to manipulate the GUI control itself which is very useful but the other side of the token is now we can also set this property and have it update the GUI directly without having to call the GUI control so let's use our set button and let's add a click Handler to it and now in there let's just set our property bound text equals set from code so now when we run this then we press the set button you can see both of our bindings have automatically updated so now we have created a two-way logical separation of our GUI and our code we can populate code properties from GUI controls and we can update our GUI controls just by setting our code properties this is extremely useful when dealing with really any type of project but especially say a database project where you're loading and saving data all the time you don't have to worry about calling all of your GUI controls they can just update themselves now I want to touch on one more nuance and that is the two-way communication that we described now again these bindings have additional properties one being mode so say that you needed your GUI to populate your property but for some reason you don't want setting your property to automatically update your GUI maybe you need to do something in the interim and explicitly update your GUI so we could set our mode equal to one way to source that way one way from the GUI to our source property not from our property back so the default here is going to be mode 2 way in which we saw it go back and forth but this way when we run it if we enter into our text box you see our binding is updated but if I set the property from our code this binding was updated because it is two-way this one was not because it is one way to source so now if we change this it'll update our binding if we change our property it will update this one but not this one and occasionally you need to be able to do that so just keep in mind that you can do that very easily with the mode property so before we wrap things up let's go back to our code behind and notice that I have this commented out on property change that I said we would use but instead we have this gigantic event invocation once your GUI starts to grow you're going to have potentially hundreds maybe even thousands of these properties laying around and you don't want to have to type all of this out every time so what we can do instead is we can create another method on property changed and in this method we can invoke our event and we can take the property name and pass it directly into our event invocation now we don't need to write this out every time we can use on property change and send it the property name but since.net is awesome we don't have to stop there we can make our property name have a default value of null add some square brackets and use collar member name attribute which is going to require system.runtime.compiler services and what that's going to do is it is going to automatically populate this argument for US based on the caller so if our bound text is the one calling this method we do not need to have this in here at all because this property will be automatically populated with the collar member name so any property that we have we can add on property change to it and it will automatically be populated with its own property name so no matter how many properties we have all we need to do is add on property change to them and all of our GUI bindings will be taken care of the last thing I want to mention is the Simplicity of this example we're binding a string property to a couple of string based controls and that's for ease of learning but if you have a control like a data grid you could bind a whole collection of objects and when the GUI is updated it can populate properties within objects within collections so it can get very powerful and we'll dive into some of those things later next up we're going to switch gears a little bit and talk about the built-in message box class so thanks for watching everybody I hope this was helpful if you have any questions feel free to ask happy coding and until next time as always take care

Channel: Kampa Plays

Views: 30,786

Keywords: C#, WPF, OnPropertyChanged, INotifyPropertyChanged, Data Bindings, UpdateSourceTrigger

Id: 56m0H1qhZuw

Length: 11min 22sec (682 seconds)

Published: Thu Dec 29 2022