In UNDER 10 Minutes - WPF Binding Made Easy!

if you're building WPF applications or interested in getting started there's something about building applications using zaml that you just can't seem to escape hi my name is Nick centino and I'm a principal software engineering manager at Microsoft in WPF one of the things that we're doing all of the time with our user interfaces is setting up binding what binding allows us to do is create controls and then bind that control some of the properties on that control to some data that's in the back that means that we can create things like view models change the state of those things and have that reflected in the user interface in this video I'm going to walk through setting up some very basic bindings so if you've never done this before or you want to get started using WPF and explore how bindings work this video is for you that sounds interesting remember to subscribe to the channel and check out that pin comment for my courses on doome drain with that said we're going to go to visual studio look at a very simple WPF application and get started with binding all right so as promised we are going to get started with a very simple WPF application this is going to be a main window so very simple and it just has a grid on it and that grid has a label we're going to expand it for a text box in just a moment as well I'm showing this label here you can see that it has some text hardcoded right so the content property the one that we're interested in for this label has some text here so that means anything we type directly into the content you'll see that reflected in the user interface now when we talk about binding what we want to be able to do is have this content property of this label or if you if you have other controls and things like that this applies to those things as well but we need to have what's called a dependency property so something like content is a dependency property and we can bind that to something on our view model in the context here when we talk about view models a view model the instance that we're dealing with is whatever is set to be the data context on the control that we're working with that means if we were to go look at Main window xaml.cs you can see that this view model here that I'm passing in and setting to the data context that is going to be the thing that we bind to for example you can see that this view model defined right here the one that I'm passing an instance of into here this is going to have three different properties and that means that if we wanted to we could bind our label that we have to one of these three properties so if I go back to the main window here you can see that we just have this content property hardcoded like I was showing you but what we can do instead is we can use a binding so if I go type in binding here using the curly braces so you need to have this syntax where we put binding inside the curly braces and then we need to say what property on the data context we want to bind to and I forgot the name so if we jump back we can see fancy text is the one that I want to buy into I'm just going to copy that name and paste it right here and that means if we go to run this application now we should be able to see that binding is set to fancy text for content on the cool label which means it's going going to take whatever value we have for that property called Fancy text in this case we should see that that label says Fancy with two exclamation marks so if I go ahead and run this a very simple application it just has the label on it but you can see that it does say fancy so that's a very simple binding and if I go back to the zaml here this binding is working one way that's because labels are readon we don't change anything on the label itself we are just trying to take information from The View model and put that onto the user interface before we move on this is just a reminder that I do have courses available on D train if you want to level up in your C programming if you head over to dome train you can see that I have a course bundle that has my getting started and deep dive courses on C between the two of these that's 11 hours of programming in the C language taking you from absolutely no programming experience to being able to build basic applications you'll learn everything about variables Loops a bit of async programming and object-oriented programming as well make sure to check it out there are some other things that we can look at on bindings and I just wanted to show you that there's a mode property and technically this is one way right so it's one way because we're only having that binding work one way but we don't need to include that because by default we're getting the behavior we need but like I said this one's very basic what happens if we want to do something like have a text box which you can see on my screen it's hiding here in plain sight if we want to have a text box how can we get working with that so I figured I'd show you this example where we can actually use the label with the text text box and when we type stuff in the text box we can this is going to be super cool we can bind from the text box to the view model and then that view model that property on there back to the label as well so we'll have two controls that are using that same binding but it will mean that when we type into the text box we can update the label at the same time if I bring this code back into here you can see that I have a text box right I'm putting in the second row of the grid I'm just putting a little width on it so we can see it and like if I move my cursor out of the way you can see we have the label and then this text box as well so that's all there the other thing is the Syntax for this binding that I want to call out so this fancy text technically I think we could get away with not having a two-way binding but you can see that it's referring to the same property on The View model the same one that we have up here I'm going to try showing you if we can change 2A to something else I think if we do one way to Source it means that as we're typing things from the text box it will go update the view model and then this fancy text one we can go ahead and put the mode equal to one way and we can actually use the same update and I'm putting property changed here so that means that the trigger the way that we know that the binding has to take effect or be updated is because there's a property changed event so that means if we're using I notify property changed which is an interface it's very commonly used inside of WPF it triggers a property changed event and that's what's going to make this binding take effect I want to start off this way cuz this is what I had working and I'm going to show you when I go to run this we now have a text box and a label right they both have the same text but watch what happens as I start to change the text inside of the text box right so the binding is taking effect we were binding from the text box to the view model and then the view model back to the label so it's kind of a two-step thing going on here in theory we could go bind directly from the label to the text box but a lot of the patterns that we see in WPF are generally that you bind to from your control to the view model directly but this allows us to basically type stuff in the user interface have that stored into a view model and then simultaneously I'm showing that we can read that state back as well with a binding now what I wanted to do is change this from two-way to be oneway to source and I think that what happens here when we go to run this you can see that when I get this window popping up it looks a little bit different than what we had before and I wanted to call out that fancy text is initially set to be fancy but we changed the text box its binding is only one way to source that means it's never reading the property back out on the text box right so if I type into here it does go one way to the source which is the view models property so as I type it setting fancy text everything else after that works the same way but the initial state of this text box it never read in fancy text and that's all because I change this from 2A to oneway to Source but if I put it back to 2A again and just quickly run this you'll see that it starts with fancy once again so again just to call it out having mode 2A means that the text box itself will be able to load in that initial view model State and that way when we start to alter it it's now going to synchronize that back to the view model and then of course the label is unmodified it's still always reading that state back but these are still very simple bindings right what we're talking about here is just some text one in a text box that we can go manipulate and then the label itself is just reading that state in but what we've seen in this video so far are just really simple bindings and we got to see dependency properties on controls of a type in this case strings and then we were binding those to view model properties which were also of type strings so nothing complicated going on we're just dealing with strings to Strings but we can do something more complicated with bindings and that's when we're switching the types and that means we have to use something called value converters so if that sounds interesting and you want to build more complex WPF user interfaces you can check out this video next for Value converters thanks and I'll see you next time