1
00:00:00,480 --> 00:00:01,320
‫Welcome back.

2
00:00:01,350 --> 00:00:07,980
‫In this video we are going to talk about I notify property changed so about this interface which allows

3
00:00:07,980 --> 00:00:13,620
‫us to trigger something if a property was changed and we have seen property changed in the last video

4
00:00:13,620 --> 00:00:18,270
‫when we were using binding and we're going to do it slightly differently this time and you will see

5
00:00:18,270 --> 00:00:21,090
‫how to use this interface yourself.

6
00:00:21,090 --> 00:00:27,450
‫So instead of a grid, I want to use a stack panel because I want to stack things up and I'm going to

7
00:00:27,450 --> 00:00:37,260
‫stack up, first of all, a label which I'm going to set the contents to, number one, and I'm going

8
00:00:37,260 --> 00:00:40,020
‫to close this label like that.

9
00:00:40,770 --> 00:00:44,700
‫And below that I want to have a text box where we can enter a value.

10
00:00:45,030 --> 00:00:48,210
‫So I'm not going to use a text block a text box here.

11
00:00:48,420 --> 00:00:51,270
‫I'm going to close it right away like that.

12
00:00:51,720 --> 00:01:00,420
‫And in the text box, I want to have the width of 100 pixels, a height of let's say 30 pixels.

13
00:01:00,420 --> 00:01:02,640
‫And then I want to set the text.

14
00:01:02,640 --> 00:01:06,480
‫Now the text should be bound, so I'm going to use data binding here.

15
00:01:06,480 --> 00:01:13,950
‫And the path that I want to use is going to be number one and the mode is going to be two way.

16
00:01:14,010 --> 00:01:17,610
‫So we've seen what this mode means and what this path means.

17
00:01:17,610 --> 00:01:22,320
‫So now let's copy this code and duplicate it here.

18
00:01:22,320 --> 00:01:24,630
‫So I'm going to copy and paste it twice.

19
00:01:24,630 --> 00:01:31,020
‫So this is going to be none too same here and this is going to be a result.

20
00:01:31,020 --> 00:01:37,860
‫So this is going to be the result and this is going to be number three.

21
00:01:39,000 --> 00:01:41,280
‫So now you might wonder, what is this number one?

22
00:01:41,280 --> 00:01:46,800
‫Number two and result, because, well, we have number one and number two and so forth.

23
00:01:46,800 --> 00:01:47,940
‫But these are just contents.

24
00:01:47,940 --> 00:01:48,990
‫They are not names.

25
00:01:48,990 --> 00:01:55,830
‫So in order to connect to them or use them, we need to go into our code behind because I want to create

26
00:01:55,830 --> 00:01:56,820
‫those in here.

27
00:01:56,970 --> 00:02:04,950
‫So I'm going to create a new class actually, because we're going to use the main window as our program

28
00:02:04,950 --> 00:02:06,480
‫so similarly to our program.

29
00:02:06,480 --> 00:02:13,260
‫But I want to use I notify changed and in order to use this interface, I need to create a new class

30
00:02:13,260 --> 00:02:14,640
‫that can inherit from it.

31
00:02:14,910 --> 00:02:24,120
‫So I'm going to use a new class here and I'm going to call it some because what I want to do is if we

32
00:02:24,120 --> 00:02:27,990
‫go back to our example file, we have this num one, num two and number three.

33
00:02:27,990 --> 00:02:33,480
‫And what I want is if I add a value here and a value there, then the value here at the bottom should

34
00:02:33,480 --> 00:02:36,150
‫automatically be the sum of the two before.

35
00:02:36,570 --> 00:02:37,140
‫All right.

36
00:02:37,140 --> 00:02:40,380
‫So I'm going to use a new class for that.

37
00:02:40,500 --> 00:02:46,800
‫And this class should inherit from I notify property changed.

38
00:02:46,920 --> 00:02:49,590
‫And in order to do what?

39
00:02:49,590 --> 00:02:52,440
‫To use this I notify property change.

40
00:02:52,440 --> 00:02:56,310
‫We need to use the system component model.

41
00:02:56,460 --> 00:03:02,880
‫So I'm going to use using system component model.

42
00:03:03,960 --> 00:03:11,460
‫So now you can see our interface is green which is the well generally this light green which is the

43
00:03:11,460 --> 00:03:17,310
‫interface color in Visual Studio and now I can fix those potential errors.

44
00:03:17,310 --> 00:03:20,190
‫So you see I need to implement the interface.

45
00:03:20,190 --> 00:03:21,210
‫So I'm going to do that.

46
00:03:21,210 --> 00:03:27,330
‫And as you see, we have this public event, property changed, event handler property changed.

47
00:03:27,660 --> 00:03:42,180
‫And now in order to use that, we will need to create a private method called void on property changed,

48
00:03:42,480 --> 00:03:44,880
‫which is going to take in a property.

49
00:03:44,880 --> 00:03:47,790
‫And in my case, this property is going to be a string.

50
00:03:48,120 --> 00:04:00,390
‫And I want to check first if property changed, property changed is not empty, so not equal null.

51
00:04:01,770 --> 00:04:05,940
‫Because if that's the case, then I want to go ahead and call the property.

52
00:04:06,360 --> 00:04:08,580
‫Property changed.

53
00:04:10,710 --> 00:04:19,050
‫This dot new property changed event arcs, which I'm going to hand over to properties.

54
00:04:19,170 --> 00:04:22,230
‫So the property changed event arcs, as you can see.

55
00:04:22,410 --> 00:04:24,360
‫Needs a string property name.

56
00:04:24,360 --> 00:04:27,960
‫And the property name that I want to hand over is the property itself.

57
00:04:27,960 --> 00:04:35,550
‫So on property change is going to call this property and I'm going to enter a property in here.

58
00:04:39,390 --> 00:04:39,930
‫All right.

59
00:04:39,930 --> 00:04:43,230
‫So we will simply call this property change event.

60
00:04:43,740 --> 00:04:48,990
‫And now, in order to use all of those, we need to have several properties.

61
00:04:48,990 --> 00:04:52,110
‫And I'm going to start off by creating private fields first.

62
00:04:52,110 --> 00:05:03,180
‫So a private string num one, then a private string num two, and finally a private string called result.

63
00:05:04,890 --> 00:05:08,400
‫And now I create properties for all of those.

64
00:05:08,400 --> 00:05:11,880
‫So I'm going to create a property called NUM one.

65
00:05:12,570 --> 00:05:16,410
‫And this number one property should be slightly different than the standard one.

66
00:05:16,410 --> 00:05:23,400
‫So I'm not going to use this basic get and set, I'm going to use a self defined, so I'm going to define

67
00:05:23,400 --> 00:05:29,490
‫one myself and it should not return num one, but it should return well, not the one with the capital,

68
00:05:29,490 --> 00:05:32,340
‫not the property, but actually this field here.

69
00:05:32,550 --> 00:05:35,700
‫So it's going to be renamed returning num one.

70
00:05:35,700 --> 00:05:38,460
‫So return num one.

71
00:05:38,670 --> 00:05:44,190
‫And if I set something then I want to set the value.

72
00:05:44,190 --> 00:05:50,670
‫By the way, I use string here at the top, so my property should also be strings.

73
00:05:51,090 --> 00:05:52,710
‫So I'm going to return num one.

74
00:05:52,710 --> 00:06:02,790
‫And now if somebody tries to set num one, I want to try to parse that because what if it's not a number

75
00:06:02,790 --> 00:06:03,900
‫that the user has entered?

76
00:06:03,900 --> 00:06:07,020
‫What if he entered, I don't know, letters or something like that?

77
00:06:07,110 --> 00:06:09,720
‫Then I want to catch that and change it.

78
00:06:09,720 --> 00:06:17,640
‫So I'm going to use INT number and I'm going to create a new boo here which I'm going to go result is

79
00:06:17,640 --> 00:06:26,100
‫going to be int, try parse and I'm going to try to parse the value and I'm going to get get out the

80
00:06:26,100 --> 00:06:26,610
‫number.

81
00:06:26,610 --> 00:06:28,500
‫So we have seen try parse before.

82
00:06:28,500 --> 00:06:35,850
‫What it simply does is it tries to parse the value that is given into an integer and if it worked then

83
00:06:35,850 --> 00:06:37,140
‫it's going to be true.

84
00:06:37,260 --> 00:06:39,150
‫And if it didn't work, then it's going to be false.

85
00:06:39,150 --> 00:06:42,510
‫And by the way, if it works, then we'll get the number as out as well.

86
00:06:42,510 --> 00:06:49,950
‫So if I can or if I get a positive value now I'm just going to say num one is going to be the value.

87
00:06:51,840 --> 00:06:59,310
‫And also what I want to change or the trigger is the property changed and I'm going to trigger the NUM

88
00:06:59,310 --> 00:06:59,940
‫one.

89
00:07:00,450 --> 00:07:00,780
‫All right.

90
00:07:00,780 --> 00:07:04,740
‫So I'm going to change this num one property if the value is changed.

91
00:07:05,730 --> 00:07:11,400
‫Now what we also can do is just copy that for our second number.

92
00:07:11,400 --> 00:07:15,000
‫So num two and I'm going to change that to num two.

93
00:07:15,030 --> 00:07:20,460
‫It's also going to be a number and here it's going to be num two and there as well.

94
00:07:20,460 --> 00:07:24,390
‫And now finally we need a property for our result.

95
00:07:24,390 --> 00:07:35,370
‫So I'm going to create that public string result and this one is also going to have a get and a set.

96
00:07:37,950 --> 00:07:50,010
‫So here a get is going to have an result is going to be intact pass number one.

97
00:07:52,650 --> 00:07:55,350
‫Plus ain't.

98
00:07:58,240 --> 00:08:00,880
‫The Parrs mum two.

99
00:08:00,880 --> 00:08:02,410
‫And why can I do that now?

100
00:08:02,830 --> 00:08:09,900
‫Well, because I'm returning them to and whenever I'm setting them one and I'm two.

101
00:08:09,910 --> 00:08:17,680
‫So the ones here, they are integers already because they are only set, they only have a value if they

102
00:08:17,680 --> 00:08:19,000
‫are a number.

103
00:08:19,960 --> 00:08:21,460
‫So otherwise they will never be set.

104
00:08:21,460 --> 00:08:22,450
‫They will be empty.

105
00:08:22,570 --> 00:08:28,270
‫And then what we need to go ahead and do is to return something in here.

106
00:08:28,270 --> 00:08:32,320
‫So I'm going to return rest to string.

107
00:08:32,500 --> 00:08:39,220
‫So the result and now if somebody tries to set the result, I'm simply going to do the following.

108
00:08:39,220 --> 00:08:45,130
‫So set int result is going to be int pars.

109
00:08:46,000 --> 00:08:53,080
‫Actually the same thing that we did here, only that we don't return it, but we set it.

110
00:08:53,080 --> 00:08:57,550
‫So result is going to be rest to string.

111
00:08:58,720 --> 00:09:11,920
‫And now in here we call the UN property changed for our result and the same thing goes for our num two

112
00:09:11,920 --> 00:09:12,790
‫and num one.

113
00:09:13,180 --> 00:09:14,260
‫So what that does.

114
00:09:14,260 --> 00:09:15,550
‫So this UN property changed.

115
00:09:15,550 --> 00:09:20,530
‫As you can recall, it changes the value of the property.

116
00:09:21,400 --> 00:09:27,250
‫So property changed event arcs and it's going to take in the property and it's going to call this property

117
00:09:27,250 --> 00:09:31,690
‫changed event and then all of those properties.

118
00:09:31,690 --> 00:09:38,650
‫So the number one property, the number two property and the result one will be notified and our result

119
00:09:38,650 --> 00:09:39,580
‫should be changed.

120
00:09:39,580 --> 00:09:45,190
‫So what I want to have is every time somebody enters a number that this number three is going to be

121
00:09:45,190 --> 00:09:46,300
‫changed as well.

122
00:09:46,870 --> 00:09:56,470
‫And before we can check that or test that, we need to go into our .0.6 file and actually create an

123
00:09:56,470 --> 00:09:58,870
‫object of our some class.

124
00:09:58,870 --> 00:10:03,640
‫So we have created some class and I'm going to go ahead and create a new object.

125
00:10:04,300 --> 00:10:11,110
‫I'm going to create it up here, which is not just going to be an object, it's also going to be a property.

126
00:10:11,110 --> 00:10:17,110
‫So some object is going to get and set.

127
00:10:17,950 --> 00:10:21,400
‫And now in order to access that, we need to make our some public as well.

128
00:10:21,400 --> 00:10:27,400
‫So let's make this class public and now we can go ahead and use this some object.

129
00:10:27,400 --> 00:10:33,040
‫Now I can set this some object, some object here at the start.

130
00:10:33,130 --> 00:10:43,150
‫And I'm going to say it's a new sum with the value of not one being one, and number two, just having

131
00:10:43,150 --> 00:10:44,770
‫a value of, let's say three.

132
00:10:45,130 --> 00:10:50,650
‫And as you see, we have to use strings here because otherwise it won't work because those properties,

133
00:10:50,650 --> 00:10:51,790
‫they are strings, right?

134
00:10:51,880 --> 00:11:01,960
‫So now what I need to call is or what I need to set is set the data context to our sum object because

135
00:11:01,960 --> 00:11:03,610
‫otherwise nothing will happen.

136
00:11:03,610 --> 00:11:05,080
‫So now let's run this.

137
00:11:05,740 --> 00:11:11,740
‫And then you see, we never set number three, which is the result, and maybe it's even better if we

138
00:11:11,740 --> 00:11:13,030
‫actually call it result.

139
00:11:13,030 --> 00:11:19,390
‫So let's go here and change the label to result or maybe even some.

140
00:11:20,080 --> 00:11:21,730
‫So this is going to be the sum.

141
00:11:23,110 --> 00:11:27,970
‫Maybe it's even something like that of non one and non two.

142
00:11:29,170 --> 00:11:30,820
‫So now let's run it again.

143
00:11:33,110 --> 00:11:34,250
‫And there you are.

144
00:11:34,280 --> 00:11:36,030
‫One plus three is four.

145
00:11:36,050 --> 00:11:38,450
‫So now let's change it to, let's say, 25.

146
00:11:39,740 --> 00:11:41,720
‫And as you see, it changed.

147
00:11:41,750 --> 00:11:44,540
‫So now let's change the value of 3 to 31.

148
00:11:45,080 --> 00:11:46,470
‫You see 56.

149
00:11:46,490 --> 00:11:48,440
‫Now, if I change that value here.

150
00:11:49,430 --> 00:11:57,020
‫You see, it's going back to its normal value because what we did here in The Setter.

151
00:11:58,560 --> 00:12:06,900
‫If someone tries to set the result, we simply set the result to, again, the value of end parties,

152
00:12:06,900 --> 00:12:08,490
‫number one, and number two.

153
00:12:09,000 --> 00:12:15,420
‫So it's always going to go back to the actual result if we ever try to set the result of our string

154
00:12:15,420 --> 00:12:16,230
‫result.

155
00:12:18,270 --> 00:12:23,940
‫So now you can play around with this and you can calculate whatever you want and you will have real

156
00:12:23,940 --> 00:12:28,940
‫time answers or real time well sums of your values.

157
00:12:28,950 --> 00:12:35,250
‫You could go ahead and add another one, or you could now go ahead and change that to be a multiplier.

158
00:12:36,140 --> 00:12:39,800
‫But now I know that was quite some setup that we had to do.

159
00:12:40,640 --> 00:12:44,000
‫And so I want to go through it once again real quick with you.

160
00:12:44,030 --> 00:12:49,340
‫So in the XHTML file, we had those three labels and those three text boxes, which are just the UI

161
00:12:49,340 --> 00:12:50,150
‫elements, right?

162
00:12:50,150 --> 00:12:53,860
‫And the text of each of those is connected.

163
00:12:53,870 --> 00:12:59,510
‫So this one has the path to num one, this one has the path to them two, and this one has the path

164
00:12:59,510 --> 00:13:00,260
‫to result.

165
00:13:00,260 --> 00:13:03,560
‫And those are those ones here.

166
00:13:03,560 --> 00:13:05,000
‫So the num one.

167
00:13:05,420 --> 00:13:08,210
‫The num two and the num three properties.

168
00:13:08,450 --> 00:13:15,620
‫We created an extra class which is inheriting from I notify property change, which is an interface

169
00:13:15,620 --> 00:13:22,880
‫which has this property changed event handler which is an event and we'll just call property change.

170
00:13:22,910 --> 00:13:29,240
‫Now we created a method called on property change, which is called each time that one of our properties

171
00:13:29,240 --> 00:13:33,590
‫is changed, and that is done once a property is set.

172
00:13:33,590 --> 00:13:39,860
‫So we have this property num one and if somebody is trying to set that value of NUM one, we are simply

173
00:13:39,860 --> 00:13:42,080
‫going to call this on property changed.

174
00:13:42,440 --> 00:13:53,420
‫And in here we set the property so we say, okay, give me a property and we change that property to

175
00:13:53,420 --> 00:13:54,920
‫the value that was given.

176
00:13:55,640 --> 00:14:02,210
‫So it's pretty much we set it, but at the same time, we don't only set the one that we are currently

177
00:14:02,210 --> 00:14:04,730
‫setting in terms of in the setter.

178
00:14:04,730 --> 00:14:12,680
‫So we don't only set num one here, but we also set the result and we don't set the and here you see

179
00:14:12,680 --> 00:14:20,300
‫this line here it sets this field so it changes this private string field and this on property changed

180
00:14:20,300 --> 00:14:23,030
‫actually changes the property itself.

181
00:14:23,030 --> 00:14:28,520
‫So it's going to change the value of the property itself, but at the same time it's going to change

182
00:14:28,520 --> 00:14:30,350
‫the value of the property result.

183
00:14:30,350 --> 00:14:37,250
‫So it's going to update our result each time that we change the value of num one and the same goes for

184
00:14:37,250 --> 00:14:43,970
‫num two and the same goes for our result where I said each time that the result is changed, we want

185
00:14:43,970 --> 00:14:48,500
‫to go ahead and call this on property change method as well.

186
00:14:49,920 --> 00:14:50,640
‫Right.

187
00:14:50,640 --> 00:14:58,470
‫So now you see how you can use AI, notify property changed how you can use this interface and you can

188
00:14:58,470 --> 00:15:00,300
‫use it in multiple different ways.

189
00:15:00,300 --> 00:15:04,740
‫And it's really interesting to use it whenever any property is changed.

190
00:15:04,740 --> 00:15:10,020
‫So let's say the colour is changed and you want to trigger an event that's going to do some fancy animations

191
00:15:10,020 --> 00:15:16,230
‫or somebody presses a button which will change and a property somewhere in your program and you want

192
00:15:16,230 --> 00:15:17,910
‫something great to happen afterwards.

193
00:15:17,910 --> 00:15:20,070
‫You can set that all up with this.

194
00:15:20,070 --> 00:15:22,410
‫I notified property change interface.

195
00:15:22,410 --> 00:15:28,890
‫What you, of course need to do is to create a inheritance correlation here between the class that you're

196
00:15:28,890 --> 00:15:31,680
‫using and notify property changed.