‫Welcome back.
‫In this video, we are going to talk about dependency properties and they are super important as soon
‫as we get to data binding.
‫And generally it makes sense for you to understand how they work.
‫So let's go ahead and create a button within our grid.
‫And we simply do that by creating the button keyword as we have seen multiple times already.
‫And here I'm just going to assign a height of, let's say, 100 pixels and a width of 200 pixels, and
‫then the content of Click Me.
‫And now I want to use something called background.
‫So there is a property called background and I want to assign that to a sewer for sure.
‫So that's going to be my button.
‫And as you can see now, it has just a saw color.
‫Maybe we should make it red.
‫Okay, red.
‫It's pretty strong.
‫Violet red.
‫That looks good.
‫So a simple color.
‫So the idea behind this is that I want to go ahead and explain to you what dependency properties are,
‫where they are, and how to create your own dependency properties.
‫And it's pretty easy to do it with a button, let's say.
‫And by the way, this button and actually I'm going to close it like that because I want to style that
‫button.
‫So within the button tags, I want to add some more style to that button and the style should be a trigger.
‫So I want to trigger.
‫So if I get into the buttons area, then I want to change the color or something like that.
‫So I'm going to use button dot style.
‫Now the button style needs a style in here so I can create our own style in here and I'm going to set
‫a target for that style.
‫Target type is going to be button.
‫Now that's not enough because what I now want to do is to add a trigger to that style.
‫So I'm going to use style triggers.
‫Like this one.
‫And now I can go ahead and create beautiful little triggers which will be fired once an event occurs.
‫And we have seen events already, but that's a little different event.
‫So it's a trigger which we can use as following.
‫We can create a trigger in here and that trigger will have a property.
‫And that one is, for example, is mouse over.
‫So once the mouse is over that button, then the value should be set to true.
‫And in that trigger I need to have setters then.
‫So what shall happen if that's the case?
‫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
‫font size is a lot smaller.
‫So here we have the button which has a specific wide and a content and a width and all those kind of
‫things.
‫And I made it pilot but pale violet red.
‫And then I added a style to that button.
‫And that style that I added is actually a trigger.
‫So I can there is something called style triggers which will trigger a style change, and that's the
‫trigger is run once the mouse is over that button and that will set things.
‫So what it will do is it will set the font size to the values that we have specified here and now.
‫Here we assign the value.
‫True means it will be triggered once this is mouse over is true.
‫And that's true once we hover over our mouse, or once we are mouse over the button.
‫So if we run that we should see some changes.
‫And this is a rather long approach to just having a hover functionality, but it's a lot more that we
‫want to use here.
‫So you see, I hover over it and the color changes to this bluish color.
‫And then we have this text which appears bigger then.
‫So the value changes to 30.
‫So that's great and all.
‫But why do we need to have this long code?
‫Well, the thing is that we are using properties here.
‫As you can see, this thing is called property and actually the width is a property, the content is
‫a property, background is a property and they depend on dependency properties or they are connected
‫to dependency properties and they are important for data binding.
‫As I said, what we will cover in the next video or one of the next videos, but they are also important
‫to have this trigger event or that the button is aware of what what is going on.
‫So let's go ahead and create a button inside of our main window method.
‫Just going to create a button and now I want to check out the class itself.
‫So go to definition so you can simply press F 12 to get to the definition.
‫And what this will do is it will show me the button class.
‫And as you can see, it's a class that inherits from button based.
‫There is a static read only dependency property which is is default property is cancelled, property
‫is defaulted property.
‫So not too much.
‫But what you also can see is that there is actually a normal property here.
‫So this is a class property that we have here which is called is default is cancelled and is defaulted
‫and those are connected to those dependency properties.
‫So it represents a property that can be set through methods such as styling data, binding animation
‫and inheritance.
‫So the data binding, as I said, is something that we'll cover later on.
‫Styling, that's good.
‫What we have just done, we styled our button and we can use animation and inheritance for that.
‫But now let's have a look deeper into the button base so we know that button is inheriting from button
‫base.
‫Then we can go to the definition of button base and check.
‫All right.
‫It's a content control class.
‫So button base is inheriting from content control, which.
‫Well, the button base has a rooted event, as you can see here, a click event.
‫And we've seen last time, though, the included event is and it has plenty of dependency properties
‫as well, such as is pressed click mode, property command, target and so forth.
‫But we have not touched some of those yet.
‫But what is even more interesting, if we go even deeper into the content control, we can see that
‫there is a property that says has content.
‫So this one is taking care of all the content of the button.
‫For example, the text is a text block within our button.
‫So if we have content within our button, then.
‫It's handled by this class, so by this content control class.
‫And actually, we can go even deeper, go to definition, and here we will find plenty of dependency
‫properties and two root events.
‫And this control class has dependency properties called padding property than border brush.
‫So the color of the border then a vertical content alignment, horizontal content alignment.
‫And now here this one is interesting for us because we used it.
‫It's a background property and that's exactly the one that we have set in our XAML file.
‫As you can see here, we set the background to Pale Violet Red so we can access those dependency properties
‫via our properties here.
‫So these are our properties like font size, font, family background, foreground, all those kind
‫of things that we are using when we work with controls.
‫And a button, for example, is a control or a text block is also a control.
‫So they all inherit from this control class and they all have these dependency properties which then
‫trigger and inform about well changes.
‫So here we see also that there is something important about dependency properties and that's that they
‫are always static and they are read only.
‫So this is very important.
‫Also what you can see is that they always end with the property name.
‫So here whenever we define a dependency property, we say background, which is the same name as the
‫property itself.
‫So here for example, where is it their background, but then also the term property at the end.
‫So very long story and we duck very deep, but that will show you a little more what those dependency
‫properties are and what what we are working with all the time.
‫So we are playing around with properties, but they actually work around with the dependency properties.
‫Why do we need all of this?
‫Well, just to understand what's going on here with this trigger, WPF is using a dependency property
‫here.
‫So for example, this is mouse over and is mouse over provides a chain notification to WPF with the
‫help of dependency properties and that allows us to set the value to true.
‫And then also if you check it out, because that's something that I haven't touched yet.
‫Actually there were build errors, so we need to get rid of this button here.
‫But what I haven't covered yet or touched on yet, which is pretty important, is the following.
‫So you can see we have this trigger and it says property is mouse mouse over value.
‫True.
‫And it will trigger once this is mouse over is true, what will it do?
‫Well, it will set properties such as font size to 30.
‫And let me show you again.
‫See, see.
‫But now if I leave the button, you can see, hey, it's changing back and that's done by this dependency
‫properties.
‫So it's informing about what's going on and it's selling, setting the value of font size back to its
‫original value.
‫So as you can see, it's only true while the mouse is over and that is possible through dependency properties.
‫Now another thing about dependency properties, because I said they should always be static and read
‫only, and that is because all controls should be shared and available.
‫So you don't want a control to only be available once.
‫You also want it to be available for other classes and other views and so on.
‫And it's static because the value should not be changed after initialization.
‫And this chain notification that dependency properties trigger is required for data mining, for animation,
‫for triggers as we've seen here, for styling and so forth.
‫Now if you want to go ahead and create your own dependency property, you can do it the following way.
‫So I'm going to create a new property in this class here.
‫I'm going to call it actually.
‫Let's put it at top.
‫I'm going to call it public int my property.
‫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
‫not going to be enough.
‫I'm going to adjust those in a second.
‫Let's create a dependency property for that my property.
‫So I'm going to create a public static read only
‫dependency property called my dependency property, the dependency property and that one should be initialized
‫straight away with dependency property dot register.
‫So we are registering a new dependency property and we need to assign multiple things.
‫For example, we need to have a string name and I'm just going to call it.
‫My property, then we need the property type.
‫So of which type should this property be?
‫And as we have seen here, the property that is my property is of type int.
‫So I'm going to use type of type of int.
‫Next we need to type property owner.
‫So owner of the type and the owner of this type of my property is my main window class because well
‫it's in the main no class.
‫So we simply say type of is going to be main window and now we need to also hand over the property metadata.
‫So I'm going to create a new property metadata which will be zero.
‫So I'm just going to enter zero here, nothing too fancy there and that's it.
‫So that's how we can create a dependency property.
‫And now my property itself should also be influenced by this dependency property of course.
‫And in order to do that, I need to go ahead and adjust the get and set so getter should be return our
‫get value my dependency property.
‫But now we have this problem that the value of the dependency property is of type dependency property
‫and even though we set that it's of type int, we still need to cast that to being in it.
‫So I'm going to cast it into an integer and now we can go ahead and actually close this getter over,
‫close the statement, better said, and now the setter should be set value.
‫And here I set my dependency property to the value that was given.
‫So that's what we're doing here and that's how you can create your own dependency property.
‫So this is what's important static read only.
‫You need to create it as a dependency property type.
‫You can give it a name, then you need to register it and you need to give it a name, a type, and
‫where the owner is or what the owner is.
‫So the class in which the property is created and then you need to hand over some property metadata
‫so you could add some additional property metadata.
‫As you can see, there are four different overloads and you can hand over an object which is the default
‫value.
‫And I'm just saying, okay, default value zero.
‫So my property is going to default to zero because of my property metadata that I've set up here.
‫All righty.
‫So plenty of stuff here.
‫And depending on what you're going to develop, you might never create your own dependency properties.
‫So no worries if you at one point need to use dependency properties, then just check out how to create
‫your own ones.
‫Otherwise, you can simply use the properties that we had here and for an end user, or let's say for
‫a developer who just builds the UI and it's not going to be that relevant.
‫But I just want to show you how things are built up and what's important here.
‫All right.
‫So see you in the next video.