‫Welcome back.
‫Now that you know what dependency properties are, it's time to check out data binding because they
‫are interlinked to each other or connected to each other.
‫So in this video, we are going to talk about the four different binding modes.
‫So modes of data binding, and there is one that's called one way.
‫So it goes from the binding source towards the binding target.
‫Then there's the binding target towards binding source and backwards, which is the two way mode.
‫And then we have the one way to source which sends information from the target towards the source.
‫And finally we have the binding target one time, which is the binding source done in constructor or
‫during initialization.
‫So let's check out an example for that.
‫We can have a text box here where we can enter text in.
‫So I'm just going to give it a width of let's say 100 and I'm going to give it a margin of, let's say
‫50 pixels.
‫Now I want to use a stack panel instead of a grid.
‫So I'm going to change the name to Stack panel now in that.
‫TextBox.
‫I'm going to assign a text called.
‫Or well, it's just going to say something like 15.
‫And below that I will create a slider.
‫So the slider should have a minimum value of zero and a maximum value of 100.
‫Now let's just run the code as is so you can see what we have created there.
‫And as you can see, there is a value of 15.
‫It's a text box, so I can change the text if I like.
‫And there the slider.
‫And now what I want to do is I want to connect those two.
‫So I want to connect the slider to the text box.
‫And as you have seen, there are four different ways of connecting.
‫And the one that I'm going to use first is the one way data binding.
‫So in here I'm going to say that the text of my text box should be bound.
‫So I will use binding here and I want to know to whom should I bind?
‫So I want to bind to the slider.
‫So in order to communicate with the slider or to well, access the slider, the slider needs to have
‫a name.
‫So I'm going to give it the name, my slider, and now I can add that name in here.
‫So the element name that I want to bind is the my slider.
‫And actually this is not in hyphens.
‫Now the next thing is I need to have a path.
‫So what is it that I want to have from this slider?
‫And it could be multiple properties, right?
‫But the one that I am interested in is the value because I want to know the value of my slider.
‫So I say path equal value.
‫And now finally I need to assign the mode and we're going to start off with a one way mode.
‫And before I can test that, of course, I need to get rid of my old text that I had there.
‫And now we can go ahead and run the code.
‫And we will see if I drag the slider.
‫The value here changes as well.
‫Now as you can see, it has very many floating point values here or a long floating point value.
‫And I want to have a whole number.
‫So what I can do is I can use something called snap snap to take enabled.
‫So is snap to take enabled that one here and I'm going to say it's true.
‫So I want it to be enabled.
‫So if I run it again, then you will see we only will get whole values here, whole numbers.
‫All right, so that's great.
‫But now.
‫What do you also can see, by the way, is that it's not connected to the slider.
‫So the text is connected or the data source is our slider and the target is our text box.
‫So as you can see, the data is sent to the text box.
‫But as we have set the mode to one way, if I change the value of my text here or my text box, the
‫slider will not be interested in that, so it will not change anything.
‫So let's enter 25, for example, Slider doesn't care.
‫So if we change that to two way, then it will care.
‫And now by the way, just for you, this one here.
‫So our text box is our target text box is the target and our slider is the binding source.
‫So slider is binding source.
‫And now this whole thing here at the top makes a lot more sense, right?
‫So now we use the two way mode and you will see what that means in the second.
‫So there we are.
‫If I now enter a value in here and I press tab just so that the value is taken into consideration,
‫and I can see that our slider changes its value.
‫So now they are connected both ways.
‫What if I only wanted to have one way but towards the source?
‫So only the text should influence the slider, but the slider should not influence the text box.
‫Well then we can use this one way to source mode, so I'm going to use one way to source.
‫So let's run it again.
‫And now if I change the value here, as you can see, nothing changes.
‫But if I add a value in here, the slider is changing.
‫All right?
‫So that's the one way to source.
‫And now finally, the one time mode.
‫Let's go into our main window XAML.
‫We will need to write some code because as I said, it has to be done during initialization or in the
‫constructor.
‫And in our case it's in the constructor of our main window and we go ahead and use this for one time
‫binding.
‫So I'm going to access my slider and I'm going to set the value to, let's say 30.
‫Now I want to access the text box.
‫And as you can see, we can simply access this slider here because it has a name and it is in the same
‫class so we can straight away access it.
‫But now the text box does not have a name yet, so I'm going to give it a name which is going to be
‫my text box.
‫And now we can go ahead and access this text box.
‫My text box, dot text should be the my slider dot value dot to string.
‫So now the value of the slider at start will be 30 and the text of the text box will be the value of
‫the slider as a string.
‫Which is going to be 30 as well.
‫But it's not that we fixed it well, we fixed the value of the slider and the text hereby is also set
‫once.
‫So that's the one time mode here.
‫As you can see, if I change the slider now, our text is not changing.
‫If I added a value, if I change the value to 25, nothing is changing either.
‫So let's have one more look at something that might be interesting for you as well.
‫So now I want it to change two ways, but I also want it to change without me having to press tab.
‫And that's something that is triggered if we use the following approach.
‫So I'm going to add something to my data binding here because you can see there are multiple different
‫properties that we can access.
‫And the one that I want to use now is the update source trigger.
‫That one here update source trigger.
‫And as you can see here, default, explicit lost focus.
‫The one that is interesting for us is this property changed.
‫So I want this to be triggered whenever the property is changed.
‫So that means whenever the slider or whenever the text is changed.
‫So let's run this again.
‫Now remember, we're using two way again and I set it at 30 or to 30 at the start.
‫So it doesn't bother.
‫We can still use it in two way mode of course.
‫But now if I, let's say, change it to 25 or even while I'm typing, so I'm typing something like five,
‫five, even the five was taken into consideration or was changing something.
‫So if I add a value higher than 100, so let's say I'm trying to add 555, you see that it goes to the
‫maximum value, which is 100.
‫So if I well if I play around with it, you can see it's changed directly.
‫And that is because we have this additional information here which says update source trigger property
‫change.
‫So whenever the property of our.
‫But text box, which is the text property changes, that's when this update source triggers should be
‫executed.
‫And then this whole text is changing the text box slider, they are all changing, all right.
‫Because they're bound, right?
‫They're bound to each other two ways.
‫So that's one major example of data binding.
‫There is a lot more to know about data binding.
‫We have just bound the value, but you can also bind many other aspects as well.
‫So for example, here you see path is value, but you see it's a property path, but there are plenty
‫more.
‫So let's say I want to bind the background.
‫So let's say the background of my slider changes and you see 005 and so forth.
‫That's the background of the slider and the background of the slider is great.
‫So if I now change the background of the slider to let's say aqua, suddenly the value of my text is
‫f01, f f so that's the hexadecimal value for the color.
‫Aqua.
‫If I change it to white, it should be plenty of FS.
‫If I change it to black, it should be plenty of zeros.
‫As you see.
‫F.
‫Well, that's the alpha value.
‫And then you have the hexadecimal value, zero, zero zero and so forth.
‫So that's what you can do with data mining, not just the value.
‫You can bind pretty much every property that they share with each other.
‫All right.
‫So I'm going to go back to the value here and to save the project.
‫So I hope you enjoyed this video.
‫In the next video, we are going to go ahead and do some more interesting stuff with the WPF.