1
00:00:00,390 --> 00:00:01,500
‫Welcome back.

2
00:00:01,530 --> 00:00:06,540
‫In this video, I would like to talk about property data and event triggers because they are pretty

3
00:00:06,540 --> 00:00:09,810
‫important when you want to adjust things on the go.

4
00:00:09,810 --> 00:00:12,720
‫So in this case, I will adjust the text here.

5
00:00:12,720 --> 00:00:18,780
‫So when I go over it, I hover over it and the text changes its color and its appearance in general.

6
00:00:18,810 --> 00:00:19,470
‫Then this.

7
00:00:19,470 --> 00:00:20,430
‫Hello, buddy.

8
00:00:20,520 --> 00:00:22,620
‫As you can see, it's sizes, it's way up.

9
00:00:22,620 --> 00:00:24,330
‫So it's like an animation here.

10
00:00:24,450 --> 00:00:30,240
‫And then we have this checkbox here is someone there and this text says no, and I'm just going to click

11
00:00:30,240 --> 00:00:34,020
‫on it and it says, Oh, of course there is somebody there, so it's me.

12
00:00:34,020 --> 00:00:35,370
‫Yeah, I can click on it.

13
00:00:35,640 --> 00:00:41,220
‫So these are things that we're going to cover in this video and will allow you to, well, make your

14
00:00:41,220 --> 00:00:49,110
‫user interface in general pretty well pretty neat because it can adjust on the fly and it can give an

15
00:00:49,110 --> 00:00:53,460
‫enhanced user experience or create an enhanced user experience.

16
00:00:53,460 --> 00:00:55,860
‫So let's go ahead and create a new project here.

17
00:00:55,860 --> 00:01:05,490
‫And I'm going to call a WPA 14 C, which is property data and event triggers.

18
00:01:07,290 --> 00:01:11,790
‫What I had there was a combination of grids and stack panels.

19
00:01:11,790 --> 00:01:14,880
‫So I'm going to start off with a stack panel.

20
00:01:15,030 --> 00:01:17,760
‫Stack panel like that.

21
00:01:18,360 --> 00:01:21,690
‫And within the Stack panel, I have a grid.

22
00:01:23,010 --> 00:01:35,940
‫And in there I have a text block which says something like Text Hello, beloved world or beloved world.

23
00:01:35,940 --> 00:01:38,000
‫And then I have a font size.

24
00:01:38,000 --> 00:01:40,890
‫So I'm going to set that to, let's say 32.

25
00:01:40,950 --> 00:01:43,140
‫I want this to be centered.

26
00:01:43,140 --> 00:01:48,360
‫So I'm going to say center and also vertically it should be centered.

27
00:01:48,630 --> 00:01:56,850
‫So I'm going to say that in the next line, vertical alignment is going to be centered as well and I'm

28
00:01:56,850 --> 00:01:58,560
‫going to close it like that.

29
00:01:58,560 --> 00:01:59,550
‫So there we are.

30
00:01:59,670 --> 00:02:06,150
‫This is our text Beloved World, and I'm going to size it up a little bit, the XAML file.

31
00:02:06,150 --> 00:02:11,580
‫So in here in the text block, I can go ahead and change, for example, the style.

32
00:02:11,580 --> 00:02:18,510
‫I can do multiple, multiple things and I need to have a style in order to use the style trigger.

33
00:02:18,540 --> 00:02:27,540
‫So I'm going to add a text block dot style that will allow me to create a style.

34
00:02:27,990 --> 00:02:33,840
‫For example, I need to add a target type here, which is going to be our text block.

35
00:02:35,010 --> 00:02:42,030
‫And within this style I can go ahead and add a setter and style triggers.

36
00:02:42,030 --> 00:02:47,580
‫So first of all, I need a setter which is going to be property foreground.

37
00:02:47,580 --> 00:02:53,940
‫So I want to set the foreground, I want to change the foreground and I want to change it to green.

38
00:02:54,300 --> 00:02:57,870
‫So it's going to set the value to green.

39
00:02:58,050 --> 00:03:05,100
‫And afterwards, I want to have triggers that can actually do that because for now it's just green.

40
00:03:05,100 --> 00:03:10,980
‫But I want this to be triggered and I do that with style dot triggers.

41
00:03:12,000 --> 00:03:18,750
‫Now within the style triggers tag, I can create my different triggers and I'm just going to have one

42
00:03:18,750 --> 00:03:22,590
‫trigger which is going to be mouse over.

43
00:03:22,590 --> 00:03:26,820
‫So the property for that trigger is mouse over.

44
00:03:26,820 --> 00:03:33,960
‫So whenever we hover over this text, I want this trigger to be executed and I'm going to want to set

45
00:03:33,960 --> 00:03:37,170
‫the value to true.

46
00:03:39,630 --> 00:03:42,080
‫With a capital T like that.

47
00:03:42,090 --> 00:03:49,980
‫So within that trigger tag, I can create my setters and that will be what should be changed in general.

48
00:03:49,980 --> 00:03:55,080
‫So let's say now I have this green text and I want this to be red when I hover over it.

49
00:03:55,080 --> 00:04:05,190
‫So the setter will be set the property to foreground or set the property foreground to the value of

50
00:04:05,670 --> 00:04:06,330
‫red.

51
00:04:07,710 --> 00:04:14,190
‫So whenever I hover over it now or my mouse is over, this trigger will be executed and all of its setters

52
00:04:14,190 --> 00:04:18,450
‫will be triggered as well or executed as well.

53
00:04:18,480 --> 00:04:24,480
‫And the next setter that I want to add is going to be setter property.

54
00:04:24,660 --> 00:04:32,880
‫And here it's text declarations that I want to set to the value of underline.

55
00:04:34,710 --> 00:04:40,320
‫All right, so let's close this setter and let's check out if our trigger works.

56
00:04:40,320 --> 00:04:42,480
‫So this is just a text, right?

57
00:04:42,480 --> 00:04:48,360
‫And let's check out the code a little in depth now or a little more in depth.

58
00:04:48,360 --> 00:04:49,920
‫So we have this grid.

59
00:04:50,880 --> 00:04:52,110
‫Which is in a Stack panel.

60
00:04:52,110 --> 00:04:53,910
‫And there we just have this text block.

61
00:04:53,910 --> 00:04:57,060
‫And that's just the text that we see here, this hello beloved world.

62
00:04:57,060 --> 00:04:59,400
‫It has a font size and it's centered.

63
00:04:59,460 --> 00:05:02,550
‫So that's the general properties of the text block.

64
00:05:02,550 --> 00:05:08,190
‫But now I adjust the style of the text block so I can add some style components here.

65
00:05:08,190 --> 00:05:15,990
‫And I use this style tag and I say the target type of this style should be the text block itself because

66
00:05:15,990 --> 00:05:19,830
‫it could be components within the text block, but that would be go too far now.

67
00:05:19,830 --> 00:05:23,580
‫But in general, we have the setter here, which sets the style.

68
00:05:23,580 --> 00:05:25,920
‫So this is something that is done straight away, right?

69
00:05:25,920 --> 00:05:27,390
‫We don't have to trigger that.

70
00:05:27,390 --> 00:05:35,520
‫But then we can add style triggers which contain a trigger which then sets things and we need to specify

71
00:05:35,520 --> 00:05:38,880
‫what the property to trigger this trigger should be.

72
00:05:38,880 --> 00:05:40,380
‫So is most over.

73
00:05:40,380 --> 00:05:46,680
‫When that is true, I want the setters to be executed and that will simply say, okay, I want to change

74
00:05:46,680 --> 00:05:53,640
‫the property foreground to the value of red and I want to set the property text declarations to the

75
00:05:53,640 --> 00:05:54,930
‫value of underline.

76
00:05:54,930 --> 00:06:01,650
‫So you could add multiple different setters here if you like, and that will be triggered whenever this

77
00:06:01,650 --> 00:06:05,820
‫one here is executed and that will be executed if is mouse over is true.

78
00:06:06,060 --> 00:06:12,200
‫So let's just run the code and see how this works in action so that we have it.

79
00:06:12,210 --> 00:06:13,410
‫Hello Beloved World.

80
00:06:13,410 --> 00:06:15,060
‫And I hover over it.

81
00:06:15,060 --> 00:06:19,500
‫And as you can see, the text decoration is on the line.

82
00:06:19,500 --> 00:06:23,730
‫So the text is underlined and the foreground value is red.

83
00:06:23,730 --> 00:06:26,700
‫So this color is from goes from green to red.

84
00:06:27,480 --> 00:06:28,020
‫All right.

85
00:06:28,020 --> 00:06:33,750
‫So this is how you can simply go ahead and use style triggers or triggers in general.

86
00:06:35,740 --> 00:06:42,280
‫And something else that you could see that when the value is back to false, it goes back to its original

87
00:06:42,280 --> 00:06:42,660
‫value.

88
00:06:42,670 --> 00:06:44,830
‫So underline and read is not true anymore.

89
00:06:44,830 --> 00:06:50,770
‫So they simply go back to its original value, which was green for the foreground and underline was

90
00:06:50,770 --> 00:06:51,940
‫wrong or false.

91
00:06:51,940 --> 00:06:54,730
‫So the text declaration was not underlined.

92
00:06:56,500 --> 00:07:03,850
‫Now let's go ahead and create another text block which will be in a unique grid.

93
00:07:03,880 --> 00:07:07,870
‫So I want to have multiple grids on top of each other.

94
00:07:08,380 --> 00:07:13,480
‫I could have used a different wrapper, but I'm just going to use Grid here and in there.

95
00:07:13,480 --> 00:07:21,340
‫I have a text block again and this time it should say something like, Hello, buddy, hello, buddy.

96
00:07:22,060 --> 00:07:31,780
‫And now in there I will set the font size to 24 font size, it's going to be 24.

97
00:07:32,140 --> 00:07:40,300
‫Then I want this to be aligned centrally as well for both the horizontal as well as the vertical alignment.

98
00:07:42,340 --> 00:07:49,120
‫And then this text block should be styled.

99
00:07:49,120 --> 00:07:52,150
‫So I will style multiple things here.

100
00:07:52,180 --> 00:08:03,190
‫First of all, I want to add text block style tag here and there.

101
00:08:03,190 --> 00:08:04,930
‫I will add a style.

102
00:08:06,390 --> 00:08:10,650
‫And it's going to be the target type of text block again.

103
00:08:11,100 --> 00:08:13,830
‫And here I can create event triggers.

104
00:08:13,830 --> 00:08:20,340
‫So you have seen the style trigger here, which was simply a trigger.

105
00:08:20,340 --> 00:08:25,200
‫But now I want to run an event trigger which will be a little different.

106
00:08:25,200 --> 00:08:35,220
‫So let's create a style dot triggers first, start the triggers tag and in here I want to have an event

107
00:08:35,220 --> 00:08:43,530
‫trigger and that will be executed when the rooted event is true and the rules of the event will be mouse

108
00:08:43,530 --> 00:08:44,190
‫enter.

109
00:08:44,190 --> 00:08:49,440
‫So that will be triggered whenever we enter this text block with our mouse.

110
00:08:49,440 --> 00:08:51,810
‫So it's pretty much the same thing that we've seen here.

111
00:08:51,810 --> 00:08:53,610
‫This property was is mouse over?

112
00:08:53,610 --> 00:08:55,650
‫But not we're not using a trigger.

113
00:08:55,650 --> 00:08:57,150
‫We're using an event trigger.

114
00:08:57,750 --> 00:09:00,840
‫And you will see the difference in a second.

115
00:09:01,170 --> 00:09:10,500
‫Now, in that event Trigger, I can go ahead and create an event trigger action or actually multiple

116
00:09:10,500 --> 00:09:11,250
‫actions.

117
00:09:11,250 --> 00:09:17,910
‫So I have this other tag and in here I can now create all the different actions that I want to run when

118
00:09:17,910 --> 00:09:20,820
‫this event trigger is triggered.

119
00:09:20,820 --> 00:09:30,930
‫So whenever we are entering with our mouse, so let's create an event trigger action and that will be

120
00:09:32,040 --> 00:09:32,820
‫done like that.

121
00:09:32,820 --> 00:09:34,560
‫Begin storyboard.

122
00:09:34,560 --> 00:09:37,140
‫So we need this tag, begin storyboard.

123
00:09:37,140 --> 00:09:42,690
‫Then we create a storyboard and within the storyboard we can now do animations.

124
00:09:42,690 --> 00:09:51,810
‫So double animation is going to be a co animation which runs over a specific duration.

125
00:09:51,810 --> 00:10:01,560
‫And then here we have zero as the hours, 0 minutes, 0 seconds and 500 milliseconds.

126
00:10:01,560 --> 00:10:05,460
‫So over the period of 500 milliseconds, I want this to be executed.

127
00:10:05,460 --> 00:10:11,640
‫So this animation to run and then I want to change the font size.

128
00:10:11,850 --> 00:10:20,070
‫But now in order to change the font size, I need to use the storyboard dot target property.

129
00:10:20,280 --> 00:10:26,460
‫So it's very similar to setter property that we have seen here where we change the text decorations

130
00:10:26,460 --> 00:10:27,810
‫and set it to underline.

131
00:10:27,960 --> 00:10:32,220
‫Now we need to use this approach here, storyboard, target, property instead.

132
00:10:32,460 --> 00:10:35,280
‫And in here I can say which property I want to change.

133
00:10:35,280 --> 00:10:38,970
‫So I want to change the font size too.

134
00:10:38,970 --> 00:10:41,160
‫And now I can specify the value.

135
00:10:41,160 --> 00:10:45,900
‫So there's a two property here and I set the value to 72.

136
00:10:47,280 --> 00:10:49,680
‫So that's the double animation that we run here.

137
00:10:49,830 --> 00:10:51,450
‫So it's similar to what we've seen here.

138
00:10:51,450 --> 00:10:53,670
‫Only the values are or the names are different.

139
00:10:53,670 --> 00:10:57,150
‫So this was a property, but now it's a storyboard target property.

140
00:10:57,150 --> 00:11:03,540
‫Then we have the value which was underlined, but now it's the two key word or the two property that

141
00:11:03,540 --> 00:11:04,530
‫we need to change.

142
00:11:04,530 --> 00:11:11,160
‫So this is pretty much how we can create this little animation that will be run.

143
00:11:11,160 --> 00:11:14,400
‫So now let's start that code and see what's happening.

144
00:11:14,820 --> 00:11:15,390
‫That we are.

145
00:11:15,390 --> 00:11:16,110
‫Hello, buddy.

146
00:11:16,110 --> 00:11:17,310
‫And there we are.

147
00:11:17,340 --> 00:11:19,650
‫As you can see now it's big and it doesn't go back.

148
00:11:19,650 --> 00:11:22,890
‫Oh, come on, go back to the normal size and.

149
00:11:22,890 --> 00:11:26,910
‫Well, it doesn't it doesn't care about what I want because I haven't implemented it.

150
00:11:26,910 --> 00:11:29,160
‫So now is a little challenge for you.

151
00:11:29,310 --> 00:11:31,860
‫Please add another.

152
00:11:32,620 --> 00:11:35,460
‫He went here, which will do just that.

153
00:11:35,460 --> 00:11:37,230
‫So add an event trigger.

154
00:11:38,210 --> 00:11:39,830
‫Just a little has a little hint.

155
00:11:39,860 --> 00:11:41,960
‫You don't need to do all of that again.

156
00:11:41,960 --> 00:11:45,050
‫You just need to create or reproduce this code.

157
00:11:45,050 --> 00:11:48,770
‫So please go ahead and add the functionality.

158
00:11:48,770 --> 00:11:57,530
‫So when the mouse leaves this text block that the text goes back to its original size, which was 24,

159
00:11:57,860 --> 00:12:01,610
‫and that should be done over a duration of, let's say, 300 milliseconds.

160
00:12:01,610 --> 00:12:03,110
‫So please go ahead and try that.

161
00:12:05,420 --> 00:12:05,810
‫All right.

162
00:12:05,810 --> 00:12:06,660
‫I hope you did.

163
00:12:06,680 --> 00:12:08,910
‫So I'm just going to copy that event trigger.

164
00:12:08,930 --> 00:12:11,360
‫I'm going to paste it just below.

165
00:12:11,360 --> 00:12:15,140
‫And instead of mouse enter, I'm going to enter something like mouse leaf.

166
00:12:15,830 --> 00:12:23,840
‫And the duration should be 300 milliseconds and the font size should be set to the value of 24.

167
00:12:24,110 --> 00:12:25,010
‫And that's it.

168
00:12:25,250 --> 00:12:32,810
‫So this is the event trigger that I need in order to go back whenever the mouse leaves the text block.

169
00:12:33,110 --> 00:12:34,700
‫So let's test that again.

170
00:12:36,760 --> 00:12:37,440
‫There we are.

171
00:12:37,450 --> 00:12:38,230
‫Hello, buddy.

172
00:12:38,230 --> 00:12:40,000
‫And now let me leave it.

173
00:12:40,000 --> 00:12:42,640
‫And it goes back and it goes back quicker than it starts.

174
00:12:42,640 --> 00:12:43,030
‫Right?

175
00:12:43,030 --> 00:12:51,700
‫So the one was the in text or the mouse enter was 500 milliseconds and the mouse leaf was 300 milliseconds.

176
00:12:51,700 --> 00:12:58,330
‫So you can make some pretty cool events here and as you see, it even reacts on the fly.

177
00:12:58,330 --> 00:13:01,960
‫So it goes back straight away and that's pretty cool.

178
00:13:02,860 --> 00:13:05,710
‫Okay, so these are event triggers.

179
00:13:05,710 --> 00:13:11,200
‫So you have seen style triggers which are of type trigger and then you have seen style triggers which

180
00:13:11,200 --> 00:13:12,760
‫are of type event trigger.

181
00:13:13,990 --> 00:13:18,910
‫Now there is one more thing that I would like to add a checkbox with a little text below it, which

182
00:13:18,910 --> 00:13:19,930
‫will be adjusted.

183
00:13:19,930 --> 00:13:23,890
‫So this one will use binding, data binding.

184
00:13:23,890 --> 00:13:29,800
‫We've seen data binding before, and instead of being in a grid, it should be in a stack panel.

185
00:13:29,830 --> 00:13:32,680
‫Because I want to stack two things up.

186
00:13:32,830 --> 00:13:36,790
‫I want to stack the checkbox on top of the text block.

187
00:13:36,790 --> 00:13:46,480
‫So within the Stack panel, I create a checkbox and it should have the name of KB.

188
00:13:46,480 --> 00:13:49,540
‫Hello, KB stands for CheckBox.

189
00:13:49,780 --> 00:13:55,780
‫Then the content of the checkbox should be something like Is someone there?

190
00:13:55,790 --> 00:13:56,740
‫Question mark.

191
00:13:57,670 --> 00:14:04,600
‫Now the stack panel actually let me align that so horizontally align it and vertically align it as well.

192
00:14:04,600 --> 00:14:07,420
‫So vertical alignment center as well.

193
00:14:07,810 --> 00:14:08,380
‫All right.

194
00:14:08,380 --> 00:14:15,160
‫So now this checkbox should trigger something and it should change our textbook.

195
00:14:15,160 --> 00:14:20,950
‫So we will need a text block and I'm going to horizontally align that as well.

196
00:14:20,950 --> 00:14:23,140
‫So let me center the text block.

197
00:14:23,350 --> 00:14:32,680
‫Then I will set the font size of my text block to 36, so it should be sufficiently big now within the

198
00:14:32,680 --> 00:14:33,340
‫text block.

199
00:14:33,340 --> 00:14:35,800
‫I want to go ahead and change its style.

200
00:14:35,800 --> 00:14:38,500
‫So that's something that we have seen at the top already.

201
00:14:38,500 --> 00:14:45,160
‫So we use this text block style and style target type and we specify the target type.

202
00:14:45,250 --> 00:14:56,470
‫So I'm going to do the same thing here, text block dot style then and here I create a style tag and

203
00:14:56,470 --> 00:14:58,330
‫the style target type.

204
00:14:59,410 --> 00:15:02,110
‫So the target that I have is my text block.

205
00:15:02,110 --> 00:15:04,000
‫So I want to change the text block.

206
00:15:04,930 --> 00:15:05,950
‫And how do I do that?

207
00:15:05,950 --> 00:15:07,360
‫Well, with my setters.

208
00:15:07,360 --> 00:15:09,040
‫So I'm going to set straight away.

209
00:15:10,720 --> 00:15:17,800
‫And this time the trigger will will be data, a data driven trigger, and it's not going to be an event

210
00:15:17,800 --> 00:15:19,180
‫driven trigger, as we have seen here.

211
00:15:19,180 --> 00:15:21,520
‫So event trigger and so forth.

212
00:15:21,520 --> 00:15:23,890
‫But now it's a data driven trigger.

213
00:15:23,890 --> 00:15:33,790
‫So the property of my setter is going to be property that's going to be the text.

214
00:15:33,790 --> 00:15:39,640
‫And I want to change the the value of the text to something like no.

215
00:15:40,180 --> 00:15:44,350
‫And now I will have another setter on bottom of it at the bottom.

216
00:15:44,350 --> 00:15:48,010
‫So this one will change the property called foreground.

217
00:15:48,010 --> 00:15:54,190
‫So it should just change the color to the value of red.

218
00:15:56,020 --> 00:15:58,540
‫Now that will be executed straight away, right?

219
00:15:58,540 --> 00:16:01,570
‫So we have the style and we didn't have any triggers yet.

220
00:16:01,570 --> 00:16:02,860
‫So this will be set.

221
00:16:02,920 --> 00:16:04,240
‫We could have done the same thing.

222
00:16:04,240 --> 00:16:08,500
‫We could have set the text here at the text block level.

223
00:16:08,590 --> 00:16:12,400
‫We could have used the value of red in the text block level.

224
00:16:12,400 --> 00:16:12,730
‫All right.

225
00:16:12,730 --> 00:16:19,180
‫But I just want to show you that this is an alternative approach and this will help you to do the following

226
00:16:19,180 --> 00:16:19,720
‫thing.

227
00:16:19,720 --> 00:16:24,550
‫So in this case, I will need a style dot trigger.

228
00:16:25,120 --> 00:16:27,640
‫So I need to have the style triggers tag.

229
00:16:28,510 --> 00:16:32,620
‫And now and here I create a data trigger.

230
00:16:33,550 --> 00:16:40,030
‫So as you see, we have used normal triggers which is based on a property.

231
00:16:40,030 --> 00:16:46,090
‫Then we have event driven triggers, which is a rooted event that is executed.

232
00:16:46,090 --> 00:16:47,890
‫So it's pretty much the same thing.

233
00:16:47,890 --> 00:16:52,240
‫But in this case, you know, it's a mouse over and a mouse enter.

234
00:16:52,240 --> 00:16:55,360
‫But in this case it's a property that is triggering it.

235
00:16:55,360 --> 00:16:59,260
‫And in this case, it's an actual event and now it's going to be data.

236
00:16:59,260 --> 00:17:02,140
‫So you see three different types of triggers.

237
00:17:02,320 --> 00:17:07,360
‫So this data trigger is going to set things as well.

238
00:17:07,360 --> 00:17:12,610
‫But now in order to run the trigger, I need to use binding in this case.

239
00:17:12,610 --> 00:17:18,910
‫So I'm going to bind the element name called CB.

240
00:17:18,940 --> 00:17:25,060
‫Hello, which is our check box and the CB hello.

241
00:17:26,710 --> 00:17:35,860
‫Should have the path of is checked so I'm going to check it is checked value and.

242
00:17:35,920 --> 00:17:39,580
‫I'm going to set that value to true.

243
00:17:41,110 --> 00:17:42,850
‫Now, what happens if I.

244
00:17:43,510 --> 00:17:45,640
‫Check that checkbox.

245
00:17:45,910 --> 00:17:53,710
‫Well, some setters should be executed, so the setter with the property of text should be executed

246
00:17:53,710 --> 00:17:56,170
‫and its value should be set to something like.

247
00:17:56,170 --> 00:17:57,040
‫Of course.

248
00:18:00,070 --> 00:18:07,270
‫Now, the next sector that I would like to add is going to have the property of foreground.

249
00:18:07,270 --> 00:18:14,380
‫So it's going to change the foreground property to the value of green, and that's it.

250
00:18:14,380 --> 00:18:16,060
‫So this is our data trigger.

251
00:18:16,060 --> 00:18:17,560
‫Let's go ahead and run that.

252
00:18:18,850 --> 00:18:20,050
‫So there we are.

253
00:18:20,170 --> 00:18:27,700
‫We have our two triggers that are based on mouse overs or the root event here.

254
00:18:27,700 --> 00:18:31,720
‫And then if I check that checkbox, let's do it.

255
00:18:31,750 --> 00:18:32,320
‫Boom.

256
00:18:32,320 --> 00:18:34,030
‫And it says, of course.

257
00:18:34,030 --> 00:18:38,890
‫So you see, our checkbox triggers this now and that's not the event.

258
00:18:38,890 --> 00:18:41,620
‫So this is not the check event.

259
00:18:41,740 --> 00:18:43,870
‫It is based on the data behind it.

260
00:18:43,870 --> 00:18:49,690
‫So we are binding to the is checked value of our KB.

261
00:18:49,720 --> 00:18:50,350
‫Hello.

262
00:18:50,350 --> 00:18:52,390
‫So of our checkbox here.

263
00:18:52,780 --> 00:18:54,940
‫So as I said, it's important, right?

264
00:18:54,940 --> 00:19:01,150
‫So you could have done that same thing with an event that is triggered whenever we check it because

265
00:19:01,150 --> 00:19:04,960
‫you know that checking or is checked can start an event.

266
00:19:04,960 --> 00:19:08,260
‫So check changed or something like that, right?

267
00:19:08,260 --> 00:19:10,690
‫So but this time we're doing it based on data.

268
00:19:10,690 --> 00:19:14,410
‫So whenever I press it, this will be executed.

269
00:19:15,040 --> 00:19:15,550
‫All right.

270
00:19:15,550 --> 00:19:22,600
‫So these are the three different types of triggers and different types of well executing some pretty

271
00:19:22,600 --> 00:19:25,660
‫cool changes in your UI.

272
00:19:26,230 --> 00:19:26,830
‫Great.

273
00:19:27,040 --> 00:19:28,990
‫I hope you could understand all of that.

274
00:19:28,990 --> 00:19:32,920
‫I advice to try out some additional data triggers.

275
00:19:32,920 --> 00:19:35,050
‫Check out something with a text.

276
00:19:35,050 --> 00:19:40,660
‫So if somebody enters a specific text, then something should be changed or those kind of things.

277
00:19:40,660 --> 00:19:46,330
‫So you can do a lot of things with XAML without having to touch a code behind, and that's pretty cool.

278
00:19:46,810 --> 00:19:48,010
‫All right, great.

279
00:19:48,010 --> 00:19:49,450
‫So see you in the next video.