1 00:00:00,510 --> 00:00:01,470 ‫Welcome back. 2 00:00:01,500 --> 00:00:07,170 ‫Now that you know what dependency properties are, it's time to check out data binding because they 3 00:00:07,170 --> 00:00:09,400 ‫are interlinked to each other or connected to each other. 4 00:00:09,420 --> 00:00:14,040 ‫So in this video, we are going to talk about the four different binding modes. 5 00:00:14,040 --> 00:00:19,380 ‫So modes of data binding, and there is one that's called one way. 6 00:00:19,380 --> 00:00:22,710 ‫So it goes from the binding source towards the binding target. 7 00:00:22,710 --> 00:00:28,470 ‫Then there's the binding target towards binding source and backwards, which is the two way mode. 8 00:00:28,470 --> 00:00:34,200 ‫And then we have the one way to source which sends information from the target towards the source. 9 00:00:34,500 --> 00:00:41,850 ‫And finally we have the binding target one time, which is the binding source done in constructor or 10 00:00:42,150 --> 00:00:43,860 ‫during initialization. 11 00:00:43,860 --> 00:00:46,320 ‫So let's check out an example for that. 12 00:00:46,500 --> 00:00:51,510 ‫We can have a text box here where we can enter text in. 13 00:00:51,510 --> 00:00:59,940 ‫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 14 00:00:59,940 --> 00:01:01,020 ‫50 pixels. 15 00:01:01,020 --> 00:01:05,040 ‫Now I want to use a stack panel instead of a grid. 16 00:01:05,040 --> 00:01:09,300 ‫So I'm going to change the name to Stack panel now in that. 17 00:01:10,540 --> 00:01:11,470 ‫TextBox. 18 00:01:11,470 --> 00:01:13,990 ‫I'm going to assign a text called. 19 00:01:14,500 --> 00:01:17,230 ‫Or well, it's just going to say something like 15. 20 00:01:17,680 --> 00:01:21,310 ‫And below that I will create a slider. 21 00:01:22,090 --> 00:01:31,360 ‫So the slider should have a minimum value of zero and a maximum value of 100. 22 00:01:32,290 --> 00:01:37,150 ‫Now let's just run the code as is so you can see what we have created there. 23 00:01:37,780 --> 00:01:39,910 ‫And as you can see, there is a value of 15. 24 00:01:39,910 --> 00:01:42,970 ‫It's a text box, so I can change the text if I like. 25 00:01:43,060 --> 00:01:45,280 ‫And there the slider. 26 00:01:45,520 --> 00:01:49,030 ‫And now what I want to do is I want to connect those two. 27 00:01:49,030 --> 00:01:52,120 ‫So I want to connect the slider to the text box. 28 00:01:52,480 --> 00:01:56,080 ‫And as you have seen, there are four different ways of connecting. 29 00:01:56,080 --> 00:02:01,090 ‫And the one that I'm going to use first is the one way data binding. 30 00:02:01,240 --> 00:02:07,960 ‫So in here I'm going to say that the text of my text box should be bound. 31 00:02:07,960 --> 00:02:15,610 ‫So I will use binding here and I want to know to whom should I bind? 32 00:02:15,610 --> 00:02:18,040 ‫So I want to bind to the slider. 33 00:02:18,040 --> 00:02:24,100 ‫So in order to communicate with the slider or to well, access the slider, the slider needs to have 34 00:02:24,100 --> 00:02:24,790 ‫a name. 35 00:02:24,790 --> 00:02:31,060 ‫So I'm going to give it the name, my slider, and now I can add that name in here. 36 00:02:31,060 --> 00:02:36,190 ‫So the element name that I want to bind is the my slider. 37 00:02:36,490 --> 00:02:39,880 ‫And actually this is not in hyphens. 38 00:02:40,210 --> 00:02:44,170 ‫Now the next thing is I need to have a path. 39 00:02:44,170 --> 00:02:47,110 ‫So what is it that I want to have from this slider? 40 00:02:47,110 --> 00:02:49,720 ‫And it could be multiple properties, right? 41 00:02:49,720 --> 00:02:57,760 ‫But the one that I am interested in is the value because I want to know the value of my slider. 42 00:02:58,870 --> 00:03:01,000 ‫So I say path equal value. 43 00:03:01,300 --> 00:03:08,620 ‫And now finally I need to assign the mode and we're going to start off with a one way mode. 44 00:03:09,880 --> 00:03:13,720 ‫And before I can test that, of course, I need to get rid of my old text that I had there. 45 00:03:13,990 --> 00:03:17,860 ‫And now we can go ahead and run the code. 46 00:03:20,460 --> 00:03:24,060 ‫And we will see if I drag the slider. 47 00:03:24,090 --> 00:03:26,010 ‫The value here changes as well. 48 00:03:26,040 --> 00:03:32,700 ‫Now as you can see, it has very many floating point values here or a long floating point value. 49 00:03:32,700 --> 00:03:34,930 ‫And I want to have a whole number. 50 00:03:34,950 --> 00:03:42,960 ‫So what I can do is I can use something called snap snap to take enabled. 51 00:03:42,960 --> 00:03:52,370 ‫So is snap to take enabled that one here and I'm going to say it's true. 52 00:03:52,380 --> 00:03:53,970 ‫So I want it to be enabled. 53 00:03:53,970 --> 00:03:59,850 ‫So if I run it again, then you will see we only will get whole values here, whole numbers. 54 00:04:00,150 --> 00:04:01,710 ‫All right, so that's great. 55 00:04:01,800 --> 00:04:02,730 ‫But now. 56 00:04:03,630 --> 00:04:09,030 ‫What do you also can see, by the way, is that it's not connected to the slider. 57 00:04:09,030 --> 00:04:16,560 ‫So the text is connected or the data source is our slider and the target is our text box. 58 00:04:16,740 --> 00:04:20,250 ‫So as you can see, the data is sent to the text box. 59 00:04:20,250 --> 00:04:28,650 ‫But as we have set the mode to one way, if I change the value of my text here or my text box, the 60 00:04:28,650 --> 00:04:32,310 ‫slider will not be interested in that, so it will not change anything. 61 00:04:32,880 --> 00:04:36,210 ‫So let's enter 25, for example, Slider doesn't care. 62 00:04:36,510 --> 00:04:42,180 ‫So if we change that to two way, then it will care. 63 00:04:42,180 --> 00:04:45,990 ‫And now by the way, just for you, this one here. 64 00:04:45,990 --> 00:04:56,370 ‫So our text box is our target text box is the target and our slider is the binding source. 65 00:04:56,550 --> 00:05:03,690 ‫So slider is binding source. 66 00:05:04,700 --> 00:05:07,500 ‫And now this whole thing here at the top makes a lot more sense, right? 67 00:05:07,500 --> 00:05:12,150 ‫So now we use the two way mode and you will see what that means in the second. 68 00:05:14,250 --> 00:05:15,180 ‫So there we are. 69 00:05:15,210 --> 00:05:21,750 ‫If I now enter a value in here and I press tab just so that the value is taken into consideration, 70 00:05:21,750 --> 00:05:25,500 ‫and I can see that our slider changes its value. 71 00:05:25,950 --> 00:05:28,590 ‫So now they are connected both ways. 72 00:05:29,460 --> 00:05:33,690 ‫What if I only wanted to have one way but towards the source? 73 00:05:33,690 --> 00:05:38,430 ‫So only the text should influence the slider, but the slider should not influence the text box. 74 00:05:38,700 --> 00:05:45,650 ‫Well then we can use this one way to source mode, so I'm going to use one way to source. 75 00:05:45,660 --> 00:05:47,100 ‫So let's run it again. 76 00:05:47,940 --> 00:05:54,030 ‫And now if I change the value here, as you can see, nothing changes. 77 00:05:54,030 --> 00:05:58,500 ‫But if I add a value in here, the slider is changing. 78 00:06:00,150 --> 00:06:00,480 ‫All right? 79 00:06:00,480 --> 00:06:01,890 ‫So that's the one way to source. 80 00:06:01,890 --> 00:06:05,310 ‫And now finally, the one time mode. 81 00:06:05,520 --> 00:06:07,470 ‫Let's go into our main window XAML. 82 00:06:07,470 --> 00:06:12,450 ‫We will need to write some code because as I said, it has to be done during initialization or in the 83 00:06:12,450 --> 00:06:13,050 ‫constructor. 84 00:06:13,050 --> 00:06:20,610 ‫And in our case it's in the constructor of our main window and we go ahead and use this for one time 85 00:06:20,610 --> 00:06:21,150 ‫binding. 86 00:06:21,150 --> 00:06:27,150 ‫So I'm going to access my slider and I'm going to set the value to, let's say 30. 87 00:06:27,960 --> 00:06:29,910 ‫Now I want to access the text box. 88 00:06:29,910 --> 00:06:36,000 ‫And as you can see, we can simply access this slider here because it has a name and it is in the same 89 00:06:36,480 --> 00:06:38,970 ‫class so we can straight away access it. 90 00:06:39,090 --> 00:06:44,670 ‫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 91 00:06:44,670 --> 00:06:46,920 ‫my text box. 92 00:06:47,520 --> 00:06:50,460 ‫And now we can go ahead and access this text box. 93 00:06:50,460 --> 00:07:00,720 ‫My text box, dot text should be the my slider dot value dot to string. 94 00:07:02,400 --> 00:07:09,090 ‫So now the value of the slider at start will be 30 and the text of the text box will be the value of 95 00:07:09,090 --> 00:07:11,040 ‫the slider as a string. 96 00:07:12,530 --> 00:07:14,030 ‫Which is going to be 30 as well. 97 00:07:14,030 --> 00:07:22,880 ‫But it's not that we fixed it well, we fixed the value of the slider and the text hereby is also set 98 00:07:22,880 --> 00:07:23,570 ‫once. 99 00:07:23,990 --> 00:07:27,500 ‫So that's the one time mode here. 100 00:07:27,530 --> 00:07:31,460 ‫As you can see, if I change the slider now, our text is not changing. 101 00:07:31,460 --> 00:07:37,010 ‫If I added a value, if I change the value to 25, nothing is changing either. 102 00:07:37,310 --> 00:07:43,010 ‫So let's have one more look at something that might be interesting for you as well. 103 00:07:43,010 --> 00:07:52,400 ‫So now I want it to change two ways, but I also want it to change without me having to press tab. 104 00:07:52,700 --> 00:07:59,180 ‫And that's something that is triggered if we use the following approach. 105 00:07:59,180 --> 00:08:04,670 ‫So I'm going to add something to my data binding here because you can see there are multiple different 106 00:08:04,670 --> 00:08:06,200 ‫properties that we can access. 107 00:08:06,980 --> 00:08:13,520 ‫And the one that I want to use now is the update source trigger. 108 00:08:13,730 --> 00:08:16,120 ‫That one here update source trigger. 109 00:08:16,130 --> 00:08:19,480 ‫And as you can see here, default, explicit lost focus. 110 00:08:19,490 --> 00:08:22,280 ‫The one that is interesting for us is this property changed. 111 00:08:22,280 --> 00:08:26,600 ‫So I want this to be triggered whenever the property is changed. 112 00:08:26,600 --> 00:08:30,190 ‫So that means whenever the slider or whenever the text is changed. 113 00:08:30,200 --> 00:08:32,030 ‫So let's run this again. 114 00:08:33,760 --> 00:08:39,310 ‫Now remember, we're using two way again and I set it at 30 or to 30 at the start. 115 00:08:39,310 --> 00:08:40,930 ‫So it doesn't bother. 116 00:08:40,930 --> 00:08:43,180 ‫We can still use it in two way mode of course. 117 00:08:43,180 --> 00:08:50,320 ‫But now if I, let's say, change it to 25 or even while I'm typing, so I'm typing something like five, 118 00:08:50,320 --> 00:08:55,840 ‫five, even the five was taken into consideration or was changing something. 119 00:08:55,840 --> 00:09:03,670 ‫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 120 00:09:03,670 --> 00:09:05,800 ‫maximum value, which is 100. 121 00:09:05,800 --> 00:09:12,070 ‫So if I well if I play around with it, you can see it's changed directly. 122 00:09:12,070 --> 00:09:20,200 ‫And that is because we have this additional information here which says update source trigger property 123 00:09:20,200 --> 00:09:20,560 ‫change. 124 00:09:20,560 --> 00:09:24,250 ‫So whenever the property of our. 125 00:09:25,160 --> 00:09:31,280 ‫But text box, which is the text property changes, that's when this update source triggers should be 126 00:09:31,280 --> 00:09:32,000 ‫executed. 127 00:09:32,000 --> 00:09:38,600 ‫And then this whole text is changing the text box slider, they are all changing, all right. 128 00:09:38,600 --> 00:09:39,710 ‫Because they're bound, right? 129 00:09:39,710 --> 00:09:41,960 ‫They're bound to each other two ways. 130 00:09:44,310 --> 00:09:46,960 ‫So that's one major example of data binding. 131 00:09:46,980 --> 00:09:49,280 ‫There is a lot more to know about data binding. 132 00:09:49,290 --> 00:09:55,440 ‫We have just bound the value, but you can also bind many other aspects as well. 133 00:09:55,440 --> 00:10:01,770 ‫So for example, here you see path is value, but you see it's a property path, but there are plenty 134 00:10:01,770 --> 00:10:02,090 ‫more. 135 00:10:02,100 --> 00:10:05,220 ‫So let's say I want to bind the background. 136 00:10:05,220 --> 00:10:11,390 ‫So let's say the background of my slider changes and you see 005 and so forth. 137 00:10:11,400 --> 00:10:15,060 ‫That's the background of the slider and the background of the slider is great. 138 00:10:15,060 --> 00:10:24,480 ‫So if I now change the background of the slider to let's say aqua, suddenly the value of my text is 139 00:10:24,480 --> 00:10:30,390 ‫f01, f f so that's the hexadecimal value for the color. 140 00:10:30,390 --> 00:10:30,990 ‫Aqua. 141 00:10:31,170 --> 00:10:34,230 ‫If I change it to white, it should be plenty of FS. 142 00:10:34,290 --> 00:10:36,990 ‫If I change it to black, it should be plenty of zeros. 143 00:10:39,030 --> 00:10:39,660 ‫As you see. 144 00:10:39,660 --> 00:10:39,960 ‫F. 145 00:10:39,980 --> 00:10:40,250 ‫F. 146 00:10:40,260 --> 00:10:42,000 ‫Well, that's the alpha value. 147 00:10:42,000 --> 00:10:46,050 ‫And then you have the hexadecimal value, zero, zero zero and so forth. 148 00:10:46,380 --> 00:10:51,780 ‫So that's what you can do with data mining, not just the value. 149 00:10:51,780 --> 00:10:56,640 ‫You can bind pretty much every property that they share with each other. 150 00:10:57,360 --> 00:10:57,660 ‫All right. 151 00:10:57,660 --> 00:11:02,830 ‫So I'm going to go back to the value here and to save the project. 152 00:11:02,850 --> 00:11:04,710 ‫So I hope you enjoyed this video. 153 00:11:04,710 --> 00:11:10,080 ‫In the next video, we are going to go ahead and do some more interesting stuff with the WPF.