WPF INotifyPropertyChanged and Databinding

all right so it's time to learn what the inotify property change interface is and how to use it i'll first go over some theory and then we'll work with some code examples right so the inotify property change interface is used to notify binding targets that a property value has changed what do i mean by that well in order to fully implement the inotify property change interface you're going to need a source which we'll talk about in just a second as well as a target and if you're so what new to the concept of data binding and whatnot then i'm going to make the assumption that you have absolutely no idea what i'm currently talking about which is fine the target in our case is going to be the control which we're targeting with the binding so for instance a text box and its text property the source or the source of origin is going to be the data that it's bound to for instance a person model with members such as first name and last name we're going to be focusing on two-way binding meaning that the value we're setting in the text box is going to reflect on the member in the model and vice versa all right so first things first go ahead and boot up visual studio whichever version you're using i'm currently using the 2022 version the preview version which is now available for download link will be in the description then you can go ahead and create a project go ahead and search for wpf and select the first one that pops up make sure that it says c sharp windows and desktop doesn't matter if you choose core or not not for this example go ahead and click next give it a name i'm going to give it inpc short for inaudible property change next and create right so the first things first i like to click this button right here which splits the screen vertically giving my code on the right hand side and my designer on the left hand side i just think it looks way better and we're actually going to start by adding a text box a text box there we go self close we're also going to change this grid into a stack panel give it a width of i don't know 300 and underneath the text box we're actually going to create a label as well because when we do the binding we want to display the data in the label as well whichever data we type into the text box that is so the text that's going to be in here let's type test for instance that's going to reflect on the label as well so the text property or actually its content should reflect whatever value is in here that's the beauty of data binding but we can remove that for now and the text we're actually going to be data binding so we can remove that as well right let's go ahead and create a this is going to be our data context as well as our model usually we would have a view model separating that but it's okay well for for now we're just going to use the the model as the the data context so go ahead and create a new class we'll call this person model just like that and this is going to be a what's called a poco a plain old clr object just a fancy way of saying a model essentially we're going to be giving it a property type string named first name it's going to be a full property so type p r o p f u l l prop full tab tab we're going to change int to string click tab to change the name underscore name tab again name there we go so you can see that the private field actually has a underscore and a lowercase letter in the beginning that's just conventions now there's not a whole lot of things we're going to be doing with this as of right now we're going to leave it as is just make sure that this property right here is public right now let's head back into the designer let me actually close that one down uh this design window right here let's zoom out here and now we're gonna set the data context and i'll explain what that is as soon as we're done writing it it's like one line of code so underneath window in between the stack panel and the window we're going to type window.datacontext close that off you can see that it's screaming at us because it expects something within what we're going to do is we're going to type opening tag person model you can see for me it pops up i'm not entirely sure if it does that with visual studio 2019 or any other version but if it doesn't then just keep typing person model self close and you'll be able to hit alt and enter and it's gonna allow you to import the the xml namespace it's screaming saying that the namespace doesn't exist all we gotta do is rebuild the project by doing ctrl shift and b and you can see that the issues are gone right so we now have a data context for an entire window the data context is well the data that's within our person model because that's what we're setting as the the data context meaning that the the data the source of origin is going to be this class right here so if we want to get a hold of the name property we now can because again the the data context has been set moving on it is now time to implement the i notify property change interface and we're actually going to create an observable object as it's called because this code that we'll be writing we don't want to be writing it's like five lines of code and it would really clutter up the majority of our models if we were to write that every single time so why not just inherit from an object which already has the code implemented that's going to make sense in just a sec all right so create a new item add new class we're going to call it observable object just like that hit enter clean this up a little bit right so this is going to inherit from an interface uh i notify hence the i in i notify property changed so we'll do do this i notify properly changed just like that we're going to hit alt and enter to prompt the intellisense list now we're going to be using the system.component model here we go as you can see it added it right here it's still being pretty mad at us because we haven't actually implemented the interface we've just inherited from it so we'll do alt enter again i said alt enter again there we go implement interface exceeded implemented the event handler now with visual studio 2022 it might actually be within dot net 6.0 it allows us to uh create a nullable object because we will be no checking this either way so just in case your your snippet doesn't have the question mark here that's fine we can actually work without it because i'm pretty sure that the majority of people who are watching this won't have that anyways now let's create the the function the public void on property changed it's going to take a parameter and we're actually going to give it an attribute so it's going to be caller member name we'll talk about that in just a second alt enter to import that namespace string property name equals no and the curly braces and here's here you can see that it actually asks us if we want to null check the properties change the event handler which yes we will just not in that way we're not going to be using this statement we're going to be doing property change question mark dot invoke that essentially node checks the property changed and we can just do evoke right and this actually takes two parameters as well the first being the sender which is going to be this we should be able to see this yeah so the object sender is going to be this it's this class that we're sending it from and then the property changed event arg so it's going to be new oops new property changed event args there we go and which also takes a parameter of course property name now since i don't want to confuse too many people what this is doing it's going to be utilizing reflection in order to update the ui however this is all the code that you will be needing for this class i'm going to be showing you how to use it now moving on we can actually head over to the main window dot sample right so it's time to start actually binding data so the text box has a text property which we'll be binding to we'll do binding and then we need to find was it first name was it name yeah it was just name so in order to bind is going to be you know the property within the quotation marks is going to be curly braces binding and then the property that we want to bind to which if you remember we created the property right here now the binding works just fine we can actually we can actually test test this whole theory of the binding right now so if we head into the person model underneath the property we type ctor which is short for constructor and you don't need to write this it could be a good idea in order to do some testing but by all means you can just sit back and relax if that's what you want to do right so it's going to be task.run there we go followed by that there we go and inside our newly spawned thread which is chucked into the thread pool we're gonna have a while loop it's gonna be wall true debug dot right oh i gotta import that debug.rightline it's gonna be uh just do something like that there we go perfect let's actually make it sleep for a little bit this is a terrible way of making the thread sleep but for a testing purposes it'll be just fine so if i were to do this now if i were to run the application you can see that the name property is empty if i type something it's still going to be empty it's not until this control loses focus we'll see the property update i'll show you that so if i copy this text box paste it underneath here we can actually remove the the text because we're just going to be using it as a temporary mechanism to remove the focus from the original text box so if i run this again type something in here you can see that nothing is updated until i do this you can see that now the property is updated and even if i remove this or type aaa you can see that it doesn't update until we changed the focus to a different control now that's all because of the the update source trigger property which defaults to the value default which essentially means that the source updates only after the focus was lost on the control in this case well our text box control and obviously i just demonstrated this behavior right here so the if you want to see it update in real time we got to change the update source trigger this is just something good to know so we're going to do update source trigger and we want to instead of having it at default which is default we want to have it whenever the property changes so if we do this you see that there's nothing there i type a oh look it's a and like as soon as like i don't have to change the focus at all it changes as soon as i change that which is what we're going to be utilizing whenever we whenever we bind the data here as well right so here's the the beauty of i notify property changed if i were to bind let's see the the content property right here so binding to the same property as with the text box we can see that when i run this application and remember nothing changes until this control loses focus here we go notice how it updated the ui without me having to implement i notify property changed this part right here is kind of crucial to know not a whole lot of people know this as long as the data source that we're using when binding is a poco also known as plain old clr object the binding engine will try to subscribe to the property changed event through the property descriptor dot add value changed i don't want to go too deep into this now again if you want a more detailed video explaining how it actually works under the hood i would be more than happy to make a video on that now here's where i notify property really starts to shine not only does it help prevent memory leaks and it's also not going to be super heavy on the reflection usage what it will do however is let you bind from code so it allows you so the thing that we just talked about it allows you to change or update the ui from the ui however if i were to change this value through code let's say within the model itself in the constructor it wouldn't update the ui it wouldn't propagate the changes to the ui let me demonstrate that so just for for for some data sake if i were to do random r equals new well there we go and then we were to change the name property so name equals we'll do our.next and we'll get a value between 1 and 1000 to string here we go here's the thing these changes will update the actual property itself it won't update the ui though so let's check the output window real quick it's going to set the first value obviously because that's going to be the default value but you can see how the value changes but the ui doesn't change doesn't matter if we lose focus or not and here's where you'd want to implement something like i notified property changed now we already have our observable object so let's inherit from that observable object and let's just clean that up there we go and then on okay so i misspelled that it should be on property change let's change that oops we gotta implement that there we go okay we can't we can do it from here which is fine on the property changed here we go head back into here now check this out so if we run this now we can see that it changes it's a bit slow mainly because it's working with a different thread actually it's huh i figured it would be slower because it was working from a different thread but that's fine all right you can now see the changes from the code as well which previously wasn't possible now if you've looked at tutorials prior to this one you didn't understand but you managed to get to the point where they actually implemented this notice how some people actually specify explicitly the property name in here we don't have to do that why because we've called it attribute caller member name and if we look at it it says allows you to obtain the method or property name of the caller to the method and if we hit back who's the caller this property right here and that's pretty much it so a quick recap you don't need to implement i notify property change if you intend to update the ui from the ui and the binding source is a plain old clr object if however you do plan on changing the value from the code behind then i would highly recommend you to implement i notify property changed that's all for me if you have any questions make sure to leave a comment down below and i'll answer it as soon as i can the source code for this project will be my patreon which you'll find in the description as well that being said thank you so much for watching i really do appreciate you sticking all the way till the end and as always i'll see you in the next one

Channel: Payload

Views: 32,017

Keywords: inotifypropertychanged, databinding, wpf inotifypropertychanged, wpf databinding, c# databinding, csharp databinding, inotifypropertychanged interface, C# binding, wpf binding, how to databind, how to databind wpf, inotifypropertychanged wpf, databinding wpf, mvvm wpf, wpf mvvm, C# mvvm, .net, .net wpf, .net wpf mvvm, .net inotifypropertychanged, how to use inotifypropertychanged, how to wpf, how to mvvm, how to c#, c# tutorial, mvvm tutorial, how to code, programming, coding

Id: gOf2FZ6dkbU

Length: 14min 29sec (869 seconds)

Published: Mon Jul 26 2021