1
00:00:00,540 --> 00:00:01,330
‫Welcome back.

2
00:00:01,350 --> 00:00:06,810
‫In this video, we are going to talk about dependency properties and they are super important as soon

3
00:00:06,810 --> 00:00:08,520
‫as we get to data binding.

4
00:00:08,520 --> 00:00:11,880
‫And generally it makes sense for you to understand how they work.

5
00:00:11,880 --> 00:00:16,080
‫So let's go ahead and create a button within our grid.

6
00:00:16,530 --> 00:00:22,770
‫And we simply do that by creating the button keyword as we have seen multiple times already.

7
00:00:22,770 --> 00:00:31,740
‫And here I'm just going to assign a height of, let's say, 100 pixels and a width of 200 pixels, and

8
00:00:31,740 --> 00:00:36,450
‫then the content of Click Me.

9
00:00:38,370 --> 00:00:42,000
‫And now I want to use something called background.

10
00:00:42,000 --> 00:00:48,240
‫So there is a property called background and I want to assign that to a sewer for sure.

11
00:00:49,440 --> 00:00:51,150
‫So that's going to be my button.

12
00:00:52,410 --> 00:00:55,440
‫And as you can see now, it has just a saw color.

13
00:00:55,440 --> 00:00:57,350
‫Maybe we should make it red.

14
00:00:57,950 --> 00:00:58,440
‫Okay, red.

15
00:00:58,440 --> 00:01:01,140
‫It's pretty strong.

16
00:01:01,380 --> 00:01:02,040
‫Violet red.

17
00:01:02,040 --> 00:01:02,940
‫That looks good.

18
00:01:03,090 --> 00:01:04,920
‫So a simple color.

19
00:01:04,920 --> 00:01:12,390
‫So the idea behind this is that I want to go ahead and explain to you what dependency properties are,

20
00:01:12,390 --> 00:01:16,230
‫where they are, and how to create your own dependency properties.

21
00:01:16,230 --> 00:01:18,990
‫And it's pretty easy to do it with a button, let's say.

22
00:01:18,990 --> 00:01:25,410
‫And by the way, this button and actually I'm going to close it like that because I want to style that

23
00:01:25,410 --> 00:01:25,710
‫button.

24
00:01:25,710 --> 00:01:32,460
‫So within the button tags, I want to add some more style to that button and the style should be a trigger.

25
00:01:32,670 --> 00:01:34,080
‫So I want to trigger.

26
00:01:34,080 --> 00:01:40,020
‫So if I get into the buttons area, then I want to change the color or something like that.

27
00:01:40,020 --> 00:01:42,900
‫So I'm going to use button dot style.

28
00:01:44,310 --> 00:01:52,950
‫Now the button style needs a style in here so I can create our own style in here and I'm going to set

29
00:01:52,950 --> 00:01:54,240
‫a target for that style.

30
00:01:54,270 --> 00:01:57,330
‫Target type is going to be button.

31
00:01:58,860 --> 00:02:05,040
‫Now that's not enough because what I now want to do is to add a trigger to that style.

32
00:02:05,040 --> 00:02:07,680
‫So I'm going to use style triggers.

33
00:02:09,820 --> 00:02:10,600
‫Like this one.

34
00:02:11,680 --> 00:02:18,340
‫And now I can go ahead and create beautiful little triggers which will be fired once an event occurs.

35
00:02:18,340 --> 00:02:21,420
‫And we have seen events already, but that's a little different event.

36
00:02:21,430 --> 00:02:25,150
‫So it's a trigger which we can use as following.

37
00:02:25,240 --> 00:02:31,210
‫We can create a trigger in here and that trigger will have a property.

38
00:02:31,750 --> 00:02:36,130
‫And that one is, for example, is mouse over.

39
00:02:38,770 --> 00:02:45,730
‫So once the mouse is over that button, then the value should be set to true.

40
00:02:46,900 --> 00:02:51,550
‫And in that trigger I need to have setters then.

41
00:02:51,550 --> 00:02:54,010
‫So what shall happen if that's the case?

42
00:02:54,010 --> 00:03:08,410
‫So what I'm going to do is I'm going to set the property font size to the value of 30 because now the

43
00:03:08,410 --> 00:03:09,850
‫font size is a lot smaller.

44
00:03:10,030 --> 00:03:15,400
‫So here we have the button which has a specific wide and a content and a width and all those kind of

45
00:03:15,400 --> 00:03:15,670
‫things.

46
00:03:15,670 --> 00:03:18,730
‫And I made it pilot but pale violet red.

47
00:03:18,970 --> 00:03:21,610
‫And then I added a style to that button.

48
00:03:21,610 --> 00:03:24,820
‫And that style that I added is actually a trigger.

49
00:03:24,820 --> 00:03:30,670
‫So I can there is something called style triggers which will trigger a style change, and that's the

50
00:03:30,670 --> 00:03:39,340
‫trigger is run once the mouse is over that button and that will set things.

51
00:03:39,340 --> 00:03:45,010
‫So what it will do is it will set the font size to the values that we have specified here and now.

52
00:03:45,010 --> 00:03:46,780
‫Here we assign the value.

53
00:03:46,780 --> 00:03:52,690
‫True means it will be triggered once this is mouse over is true.

54
00:03:52,690 --> 00:03:59,350
‫And that's true once we hover over our mouse, or once we are mouse over the button.

55
00:03:59,350 --> 00:04:03,610
‫So if we run that we should see some changes.

56
00:04:04,450 --> 00:04:12,100
‫And this is a rather long approach to just having a hover functionality, but it's a lot more that we

57
00:04:12,100 --> 00:04:13,660
‫want to use here.

58
00:04:13,660 --> 00:04:19,780
‫So you see, I hover over it and the color changes to this bluish color.

59
00:04:19,780 --> 00:04:23,830
‫And then we have this text which appears bigger then.

60
00:04:23,830 --> 00:04:26,260
‫So the value changes to 30.

61
00:04:26,560 --> 00:04:28,210
‫So that's great and all.

62
00:04:28,210 --> 00:04:30,670
‫But why do we need to have this long code?

63
00:04:30,670 --> 00:04:35,350
‫Well, the thing is that we are using properties here.

64
00:04:35,350 --> 00:04:40,270
‫As you can see, this thing is called property and actually the width is a property, the content is

65
00:04:40,270 --> 00:04:46,960
‫a property, background is a property and they depend on dependency properties or they are connected

66
00:04:46,960 --> 00:04:51,970
‫to dependency properties and they are important for data binding.

67
00:04:51,970 --> 00:04:57,490
‫As I said, what we will cover in the next video or one of the next videos, but they are also important

68
00:04:57,490 --> 00:05:04,150
‫to have this trigger event or that the button is aware of what what is going on.

69
00:05:04,150 --> 00:05:09,820
‫So let's go ahead and create a button inside of our main window method.

70
00:05:10,150 --> 00:05:16,540
‫Just going to create a button and now I want to check out the class itself.

71
00:05:16,540 --> 00:05:21,130
‫So go to definition so you can simply press F 12 to get to the definition.

72
00:05:21,880 --> 00:05:25,030
‫And what this will do is it will show me the button class.

73
00:05:25,030 --> 00:05:29,020
‫And as you can see, it's a class that inherits from button based.

74
00:05:29,020 --> 00:05:35,410
‫There is a static read only dependency property which is is default property is cancelled, property

75
00:05:35,410 --> 00:05:36,670
‫is defaulted property.

76
00:05:36,670 --> 00:05:37,960
‫So not too much.

77
00:05:37,960 --> 00:05:42,370
‫But what you also can see is that there is actually a normal property here.

78
00:05:42,370 --> 00:05:48,010
‫So this is a class property that we have here which is called is default is cancelled and is defaulted

79
00:05:48,010 --> 00:05:52,780
‫and those are connected to those dependency properties.

80
00:05:52,780 --> 00:05:58,540
‫So it represents a property that can be set through methods such as styling data, binding animation

81
00:05:58,540 --> 00:06:00,130
‫and inheritance.

82
00:06:00,130 --> 00:06:03,970
‫So the data binding, as I said, is something that we'll cover later on.

83
00:06:03,970 --> 00:06:04,990
‫Styling, that's good.

84
00:06:04,990 --> 00:06:09,880
‫What we have just done, we styled our button and we can use animation and inheritance for that.

85
00:06:09,880 --> 00:06:16,300
‫But now let's have a look deeper into the button base so we know that button is inheriting from button

86
00:06:16,300 --> 00:06:16,900
‫base.

87
00:06:17,140 --> 00:06:19,990
‫Then we can go to the definition of button base and check.

88
00:06:19,990 --> 00:06:20,380
‫All right.

89
00:06:20,380 --> 00:06:22,630
‫It's a content control class.

90
00:06:22,630 --> 00:06:27,190
‫So button base is inheriting from content control, which.

91
00:06:27,490 --> 00:06:31,360
‫Well, the button base has a rooted event, as you can see here, a click event.

92
00:06:31,360 --> 00:06:37,510
‫And we've seen last time, though, the included event is and it has plenty of dependency properties

93
00:06:37,510 --> 00:06:44,650
‫as well, such as is pressed click mode, property command, target and so forth.

94
00:06:44,650 --> 00:06:47,410
‫But we have not touched some of those yet.

95
00:06:47,410 --> 00:06:53,770
‫But what is even more interesting, if we go even deeper into the content control, we can see that

96
00:06:53,770 --> 00:06:57,280
‫there is a property that says has content.

97
00:06:57,280 --> 00:07:00,340
‫So this one is taking care of all the content of the button.

98
00:07:00,340 --> 00:07:05,020
‫For example, the text is a text block within our button.

99
00:07:05,290 --> 00:07:08,470
‫So if we have content within our button, then.

100
00:07:09,040 --> 00:07:12,220
‫It's handled by this class, so by this content control class.

101
00:07:12,400 --> 00:07:18,670
‫And actually, we can go even deeper, go to definition, and here we will find plenty of dependency

102
00:07:18,670 --> 00:07:20,890
‫properties and two root events.

103
00:07:20,890 --> 00:07:28,330
‫And this control class has dependency properties called padding property than border brush.

104
00:07:28,330 --> 00:07:34,090
‫So the color of the border then a vertical content alignment, horizontal content alignment.

105
00:07:34,090 --> 00:07:37,090
‫And now here this one is interesting for us because we used it.

106
00:07:37,330 --> 00:07:42,970
‫It's a background property and that's exactly the one that we have set in our XAML file.

107
00:07:42,970 --> 00:07:51,520
‫As you can see here, we set the background to Pale Violet Red so we can access those dependency properties

108
00:07:51,520 --> 00:07:53,650
‫via our properties here.

109
00:07:53,650 --> 00:07:59,740
‫So these are our properties like font size, font, family background, foreground, all those kind

110
00:07:59,740 --> 00:08:03,370
‫of things that we are using when we work with controls.

111
00:08:03,820 --> 00:08:08,140
‫And a button, for example, is a control or a text block is also a control.

112
00:08:08,140 --> 00:08:15,760
‫So they all inherit from this control class and they all have these dependency properties which then

113
00:08:15,760 --> 00:08:19,840
‫trigger and inform about well changes.

114
00:08:20,200 --> 00:08:26,440
‫So here we see also that there is something important about dependency properties and that's that they

115
00:08:26,440 --> 00:08:28,480
‫are always static and they are read only.

116
00:08:28,840 --> 00:08:30,640
‫So this is very important.

117
00:08:30,640 --> 00:08:35,050
‫Also what you can see is that they always end with the property name.

118
00:08:35,050 --> 00:08:41,140
‫So here whenever we define a dependency property, we say background, which is the same name as the

119
00:08:41,140 --> 00:08:42,250
‫property itself.

120
00:08:42,250 --> 00:08:48,820
‫So here for example, where is it their background, but then also the term property at the end.

121
00:08:51,220 --> 00:08:59,500
‫So very long story and we duck very deep, but that will show you a little more what those dependency

122
00:08:59,500 --> 00:09:02,710
‫properties are and what what we are working with all the time.

123
00:09:02,710 --> 00:09:07,810
‫So we are playing around with properties, but they actually work around with the dependency properties.

124
00:09:07,930 --> 00:09:09,460
‫Why do we need all of this?

125
00:09:09,460 --> 00:09:14,920
‫Well, just to understand what's going on here with this trigger, WPF is using a dependency property

126
00:09:14,920 --> 00:09:15,250
‫here.

127
00:09:15,250 --> 00:09:23,020
‫So for example, this is mouse over and is mouse over provides a chain notification to WPF with the

128
00:09:23,020 --> 00:09:28,930
‫help of dependency properties and that allows us to set the value to true.

129
00:09:28,930 --> 00:09:33,550
‫And then also if you check it out, because that's something that I haven't touched yet.

130
00:09:33,550 --> 00:09:36,880
‫Actually there were build errors, so we need to get rid of this button here.

131
00:09:37,360 --> 00:09:44,020
‫But what I haven't covered yet or touched on yet, which is pretty important, is the following.

132
00:09:44,020 --> 00:09:48,220
‫So you can see we have this trigger and it says property is mouse mouse over value.

133
00:09:48,220 --> 00:09:48,730
‫True.

134
00:09:48,730 --> 00:09:52,570
‫And it will trigger once this is mouse over is true, what will it do?

135
00:09:52,570 --> 00:09:55,750
‫Well, it will set properties such as font size to 30.

136
00:09:55,750 --> 00:09:57,280
‫And let me show you again.

137
00:09:57,790 --> 00:09:58,430
‫See, see.

138
00:09:58,450 --> 00:10:04,090
‫But now if I leave the button, you can see, hey, it's changing back and that's done by this dependency

139
00:10:04,090 --> 00:10:04,540
‫properties.

140
00:10:04,540 --> 00:10:10,120
‫So it's informing about what's going on and it's selling, setting the value of font size back to its

141
00:10:10,120 --> 00:10:11,140
‫original value.

142
00:10:11,140 --> 00:10:19,120
‫So as you can see, it's only true while the mouse is over and that is possible through dependency properties.

143
00:10:20,560 --> 00:10:26,380
‫Now another thing about dependency properties, because I said they should always be static and read

144
00:10:26,380 --> 00:10:30,910
‫only, and that is because all controls should be shared and available.

145
00:10:30,910 --> 00:10:34,540
‫So you don't want a control to only be available once.

146
00:10:34,540 --> 00:10:39,220
‫You also want it to be available for other classes and other views and so on.

147
00:10:40,840 --> 00:10:44,920
‫And it's static because the value should not be changed after initialization.

148
00:10:45,790 --> 00:10:52,810
‫And this chain notification that dependency properties trigger is required for data mining, for animation,

149
00:10:52,810 --> 00:10:56,530
‫for triggers as we've seen here, for styling and so forth.

150
00:10:57,910 --> 00:11:03,070
‫Now if you want to go ahead and create your own dependency property, you can do it the following way.

151
00:11:03,070 --> 00:11:06,490
‫So I'm going to create a new property in this class here.

152
00:11:07,000 --> 00:11:08,560
‫I'm going to call it actually.

153
00:11:08,560 --> 00:11:10,000
‫Let's put it at top.

154
00:11:11,350 --> 00:11:16,060
‫I'm going to call it public int my property.

155
00:11:17,590 --> 00:11:28,180
‫And as I said, this is a c LR property and in here I will need to have a get and a set, but that's

156
00:11:28,180 --> 00:11:28,870
‫not going to be enough.

157
00:11:28,870 --> 00:11:30,580
‫I'm going to adjust those in a second.

158
00:11:30,700 --> 00:11:34,330
‫Let's create a dependency property for that my property.

159
00:11:34,330 --> 00:11:38,260
‫So I'm going to create a public static read only

160
00:11:40,390 --> 00:11:54,070
‫dependency property called my dependency property, the dependency property and that one should be initialized

161
00:11:54,070 --> 00:11:58,990
‫straight away with dependency property dot register.

162
00:11:58,990 --> 00:12:04,900
‫So we are registering a new dependency property and we need to assign multiple things.

163
00:12:04,900 --> 00:12:08,830
‫For example, we need to have a string name and I'm just going to call it.

164
00:12:09,100 --> 00:12:14,830
‫My property, then we need the property type.

165
00:12:14,830 --> 00:12:17,170
‫So of which type should this property be?

166
00:12:17,170 --> 00:12:24,070
‫And as we have seen here, the property that is my property is of type int.

167
00:12:24,100 --> 00:12:28,990
‫So I'm going to use type of type of int.

168
00:12:30,490 --> 00:12:35,530
‫Next we need to type property owner.

169
00:12:36,190 --> 00:12:43,150
‫So owner of the type and the owner of this type of my property is my main window class because well

170
00:12:43,150 --> 00:12:44,830
‫it's in the main no class.

171
00:12:44,830 --> 00:12:55,810
‫So we simply say type of is going to be main window and now we need to also hand over the property metadata.

172
00:12:55,810 --> 00:13:01,420
‫So I'm going to create a new property metadata which will be zero.

173
00:13:01,420 --> 00:13:06,970
‫So I'm just going to enter zero here, nothing too fancy there and that's it.

174
00:13:06,970 --> 00:13:09,820
‫So that's how we can create a dependency property.

175
00:13:09,820 --> 00:13:14,530
‫And now my property itself should also be influenced by this dependency property of course.

176
00:13:14,530 --> 00:13:23,170
‫And in order to do that, I need to go ahead and adjust the get and set so getter should be return our

177
00:13:23,200 --> 00:13:27,460
‫get value my dependency property.

178
00:13:27,760 --> 00:13:33,190
‫But now we have this problem that the value of the dependency property is of type dependency property

179
00:13:33,190 --> 00:13:38,710
‫and even though we set that it's of type int, we still need to cast that to being in it.

180
00:13:38,710 --> 00:13:48,590
‫So I'm going to cast it into an integer and now we can go ahead and actually close this getter over,

181
00:13:48,610 --> 00:13:53,770
‫close the statement, better said, and now the setter should be set value.

182
00:13:54,160 --> 00:13:59,260
‫And here I set my dependency property to the value that was given.

183
00:13:59,560 --> 00:14:05,050
‫So that's what we're doing here and that's how you can create your own dependency property.

184
00:14:05,620 --> 00:14:08,560
‫So this is what's important static read only.

185
00:14:08,560 --> 00:14:11,860
‫You need to create it as a dependency property type.

186
00:14:12,130 --> 00:14:19,270
‫You can give it a name, then you need to register it and you need to give it a name, a type, and

187
00:14:19,270 --> 00:14:21,460
‫where the owner is or what the owner is.

188
00:14:21,460 --> 00:14:27,310
‫So the class in which the property is created and then you need to hand over some property metadata

189
00:14:27,310 --> 00:14:30,580
‫so you could add some additional property metadata.

190
00:14:32,470 --> 00:14:37,090
‫As you can see, there are four different overloads and you can hand over an object which is the default

191
00:14:37,090 --> 00:14:37,810
‫value.

192
00:14:37,810 --> 00:14:40,150
‫And I'm just saying, okay, default value zero.

193
00:14:40,150 --> 00:14:46,720
‫So my property is going to default to zero because of my property metadata that I've set up here.

194
00:14:47,530 --> 00:14:48,390
‫All righty.

195
00:14:48,400 --> 00:14:52,420
‫So plenty of stuff here.

196
00:14:52,420 --> 00:14:58,060
‫And depending on what you're going to develop, you might never create your own dependency properties.

197
00:14:58,060 --> 00:15:04,480
‫So no worries if you at one point need to use dependency properties, then just check out how to create

198
00:15:04,480 --> 00:15:05,340
‫your own ones.

199
00:15:05,350 --> 00:15:12,160
‫Otherwise, you can simply use the properties that we had here and for an end user, or let's say for

200
00:15:12,160 --> 00:15:16,870
‫a developer who just builds the UI and it's not going to be that relevant.

201
00:15:16,870 --> 00:15:22,720
‫But I just want to show you how things are built up and what's important here.

202
00:15:23,110 --> 00:15:23,590
‫All right.

203
00:15:23,590 --> 00:15:25,870
‫So see you in the next video.