‫Welcome back.
‫In this video, I would like to talk about property data and event triggers because they are pretty
‫important when you want to adjust things on the go.
‫So in this case, I will adjust the text here.
‫So when I go over it, I hover over it and the text changes its color and its appearance in general.
‫Then this.
‫Hello, buddy.
‫As you can see, it's sizes, it's way up.
‫So it's like an animation here.
‫And then we have this checkbox here is someone there and this text says no, and I'm just going to click
‫on it and it says, Oh, of course there is somebody there, so it's me.
‫Yeah, I can click on it.
‫So these are things that we're going to cover in this video and will allow you to, well, make your
‫user interface in general pretty well pretty neat because it can adjust on the fly and it can give an
‫enhanced user experience or create an enhanced user experience.
‫So let's go ahead and create a new project here.
‫And I'm going to call a WPA 14 C, which is property data and event triggers.
‫What I had there was a combination of grids and stack panels.
‫So I'm going to start off with a stack panel.
‫Stack panel like that.
‫And within the Stack panel, I have a grid.
‫And in there I have a text block which says something like Text Hello, beloved world or beloved world.
‫And then I have a font size.
‫So I'm going to set that to, let's say 32.
‫I want this to be centered.
‫So I'm going to say center and also vertically it should be centered.
‫So I'm going to say that in the next line, vertical alignment is going to be centered as well and I'm
‫going to close it like that.
‫So there we are.
‫This is our text Beloved World, and I'm going to size it up a little bit, the XAML file.
‫So in here in the text block, I can go ahead and change, for example, the style.
‫I can do multiple, multiple things and I need to have a style in order to use the style trigger.
‫So I'm going to add a text block dot style that will allow me to create a style.
‫For example, I need to add a target type here, which is going to be our text block.
‫And within this style I can go ahead and add a setter and style triggers.
‫So first of all, I need a setter which is going to be property foreground.
‫So I want to set the foreground, I want to change the foreground and I want to change it to green.
‫So it's going to set the value to green.
‫And afterwards, I want to have triggers that can actually do that because for now it's just green.
‫But I want this to be triggered and I do that with style dot triggers.
‫Now within the style triggers tag, I can create my different triggers and I'm just going to have one
‫trigger which is going to be mouse over.
‫So the property for that trigger is mouse over.
‫So whenever we hover over this text, I want this trigger to be executed and I'm going to want to set
‫the value to true.
‫With a capital T like that.
‫So within that trigger tag, I can create my setters and that will be what should be changed in general.
‫So let's say now I have this green text and I want this to be red when I hover over it.
‫So the setter will be set the property to foreground or set the property foreground to the value of
‫red.
‫So whenever I hover over it now or my mouse is over, this trigger will be executed and all of its setters
‫will be triggered as well or executed as well.
‫And the next setter that I want to add is going to be setter property.
‫And here it's text declarations that I want to set to the value of underline.
‫All right, so let's close this setter and let's check out if our trigger works.
‫So this is just a text, right?
‫And let's check out the code a little in depth now or a little more in depth.
‫So we have this grid.
‫Which is in a Stack panel.
‫And there we just have this text block.
‫And that's just the text that we see here, this hello beloved world.
‫It has a font size and it's centered.
‫So that's the general properties of the text block.
‫But now I adjust the style of the text block so I can add some style components here.
‫And I use this style tag and I say the target type of this style should be the text block itself because
‫it could be components within the text block, but that would be go too far now.
‫But in general, we have the setter here, which sets the style.
‫So this is something that is done straight away, right?
‫We don't have to trigger that.
‫But then we can add style triggers which contain a trigger which then sets things and we need to specify
‫what the property to trigger this trigger should be.
‫So is most over.
‫When that is true, I want the setters to be executed and that will simply say, okay, I want to change
‫the property foreground to the value of red and I want to set the property text declarations to the
‫value of underline.
‫So you could add multiple different setters here if you like, and that will be triggered whenever this
‫one here is executed and that will be executed if is mouse over is true.
‫So let's just run the code and see how this works in action so that we have it.
‫Hello Beloved World.
‫And I hover over it.
‫And as you can see, the text decoration is on the line.
‫So the text is underlined and the foreground value is red.
‫So this color is from goes from green to red.
‫All right.
‫So this is how you can simply go ahead and use style triggers or triggers in general.
‫And something else that you could see that when the value is back to false, it goes back to its original
‫value.
‫So underline and read is not true anymore.
‫So they simply go back to its original value, which was green for the foreground and underline was
‫wrong or false.
‫So the text declaration was not underlined.
‫Now let's go ahead and create another text block which will be in a unique grid.
‫So I want to have multiple grids on top of each other.
‫I could have used a different wrapper, but I'm just going to use Grid here and in there.
‫I have a text block again and this time it should say something like, Hello, buddy, hello, buddy.
‫And now in there I will set the font size to 24 font size, it's going to be 24.
‫Then I want this to be aligned centrally as well for both the horizontal as well as the vertical alignment.
‫And then this text block should be styled.
‫So I will style multiple things here.
‫First of all, I want to add text block style tag here and there.
‫I will add a style.
‫And it's going to be the target type of text block again.
‫And here I can create event triggers.
‫So you have seen the style trigger here, which was simply a trigger.
‫But now I want to run an event trigger which will be a little different.
‫So let's create a style dot triggers first, start the triggers tag and in here I want to have an event
‫trigger and that will be executed when the rooted event is true and the rules of the event will be mouse
‫enter.
‫So that will be triggered whenever we enter this text block with our mouse.
‫So it's pretty much the same thing that we've seen here.
‫This property was is mouse over?
‫But not we're not using a trigger.
‫We're using an event trigger.
‫And you will see the difference in a second.
‫Now, in that event Trigger, I can go ahead and create an event trigger action or actually multiple
‫actions.
‫So I have this other tag and in here I can now create all the different actions that I want to run when
‫this event trigger is triggered.
‫So whenever we are entering with our mouse, so let's create an event trigger action and that will be
‫done like that.
‫Begin storyboard.
‫So we need this tag, begin storyboard.
‫Then we create a storyboard and within the storyboard we can now do animations.
‫So double animation is going to be a co animation which runs over a specific duration.
‫And then here we have zero as the hours, 0 minutes, 0 seconds and 500 milliseconds.
‫So over the period of 500 milliseconds, I want this to be executed.
‫So this animation to run and then I want to change the font size.
‫But now in order to change the font size, I need to use the storyboard dot target property.
‫So it's very similar to setter property that we have seen here where we change the text decorations
‫and set it to underline.
‫Now we need to use this approach here, storyboard, target, property instead.
‫And in here I can say which property I want to change.
‫So I want to change the font size too.
‫And now I can specify the value.
‫So there's a two property here and I set the value to 72.
‫So that's the double animation that we run here.
‫So it's similar to what we've seen here.
‫Only the values are or the names are different.
‫So this was a property, but now it's a storyboard target property.
‫Then we have the value which was underlined, but now it's the two key word or the two property that
‫we need to change.
‫So this is pretty much how we can create this little animation that will be run.
‫So now let's start that code and see what's happening.
‫That we are.
‫Hello, buddy.
‫And there we are.
‫As you can see now it's big and it doesn't go back.
‫Oh, come on, go back to the normal size and.
‫Well, it doesn't it doesn't care about what I want because I haven't implemented it.
‫So now is a little challenge for you.
‫Please add another.
‫He went here, which will do just that.
‫So add an event trigger.
‫Just a little has a little hint.
‫You don't need to do all of that again.
‫You just need to create or reproduce this code.
‫So please go ahead and add the functionality.
‫So when the mouse leaves this text block that the text goes back to its original size, which was 24,
‫and that should be done over a duration of, let's say, 300 milliseconds.
‫So please go ahead and try that.
‫All right.
‫I hope you did.
‫So I'm just going to copy that event trigger.
‫I'm going to paste it just below.
‫And instead of mouse enter, I'm going to enter something like mouse leaf.
‫And the duration should be 300 milliseconds and the font size should be set to the value of 24.
‫And that's it.
‫So this is the event trigger that I need in order to go back whenever the mouse leaves the text block.
‫So let's test that again.
‫There we are.
‫Hello, buddy.
‫And now let me leave it.
‫And it goes back and it goes back quicker than it starts.
‫Right?
‫So the one was the in text or the mouse enter was 500 milliseconds and the mouse leaf was 300 milliseconds.
‫So you can make some pretty cool events here and as you see, it even reacts on the fly.
‫So it goes back straight away and that's pretty cool.
‫Okay, so these are event triggers.
‫So you have seen style triggers which are of type trigger and then you have seen style triggers which
‫are of type event trigger.
‫Now there is one more thing that I would like to add a checkbox with a little text below it, which
‫will be adjusted.
‫So this one will use binding, data binding.
‫We've seen data binding before, and instead of being in a grid, it should be in a stack panel.
‫Because I want to stack two things up.
‫I want to stack the checkbox on top of the text block.
‫So within the Stack panel, I create a checkbox and it should have the name of KB.
‫Hello, KB stands for CheckBox.
‫Then the content of the checkbox should be something like Is someone there?
‫Question mark.
‫Now the stack panel actually let me align that so horizontally align it and vertically align it as well.
‫So vertical alignment center as well.
‫All right.
‫So now this checkbox should trigger something and it should change our textbook.
‫So we will need a text block and I'm going to horizontally align that as well.
‫So let me center the text block.
‫Then I will set the font size of my text block to 36, so it should be sufficiently big now within the
‫text block.
‫I want to go ahead and change its style.
‫So that's something that we have seen at the top already.
‫So we use this text block style and style target type and we specify the target type.
‫So I'm going to do the same thing here, text block dot style then and here I create a style tag and
‫the style target type.
‫So the target that I have is my text block.
‫So I want to change the text block.
‫And how do I do that?
‫Well, with my setters.
‫So I'm going to set straight away.
‫And this time the trigger will will be data, a data driven trigger, and it's not going to be an event
‫driven trigger, as we have seen here.
‫So event trigger and so forth.
‫But now it's a data driven trigger.
‫So the property of my setter is going to be property that's going to be the text.
‫And I want to change the the value of the text to something like no.
‫And now I will have another setter on bottom of it at the bottom.
‫So this one will change the property called foreground.
‫So it should just change the color to the value of red.
‫Now that will be executed straight away, right?
‫So we have the style and we didn't have any triggers yet.
‫So this will be set.
‫We could have done the same thing.
‫We could have set the text here at the text block level.
‫We could have used the value of red in the text block level.
‫All right.
‫But I just want to show you that this is an alternative approach and this will help you to do the following
‫thing.
‫So in this case, I will need a style dot trigger.
‫So I need to have the style triggers tag.
‫And now and here I create a data trigger.
‫So as you see, we have used normal triggers which is based on a property.
‫Then we have event driven triggers, which is a rooted event that is executed.
‫So it's pretty much the same thing.
‫But in this case, you know, it's a mouse over and a mouse enter.
‫But in this case it's a property that is triggering it.
‫And in this case, it's an actual event and now it's going to be data.
‫So you see three different types of triggers.
‫So this data trigger is going to set things as well.
‫But now in order to run the trigger, I need to use binding in this case.
‫So I'm going to bind the element name called CB.
‫Hello, which is our check box and the CB hello.
‫Should have the path of is checked so I'm going to check it is checked value and.
‫I'm going to set that value to true.
‫Now, what happens if I.
‫Check that checkbox.
‫Well, some setters should be executed, so the setter with the property of text should be executed
‫and its value should be set to something like.
‫Of course.
‫Now, the next sector that I would like to add is going to have the property of foreground.
‫So it's going to change the foreground property to the value of green, and that's it.
‫So this is our data trigger.
‫Let's go ahead and run that.
‫So there we are.
‫We have our two triggers that are based on mouse overs or the root event here.
‫And then if I check that checkbox, let's do it.
‫Boom.
‫And it says, of course.
‫So you see, our checkbox triggers this now and that's not the event.
‫So this is not the check event.
‫It is based on the data behind it.
‫So we are binding to the is checked value of our KB.
‫Hello.
‫So of our checkbox here.
‫So as I said, it's important, right?
‫So you could have done that same thing with an event that is triggered whenever we check it because
‫you know that checking or is checked can start an event.
‫So check changed or something like that, right?
‫So but this time we're doing it based on data.
‫So whenever I press it, this will be executed.
‫All right.
‫So these are the three different types of triggers and different types of well executing some pretty
‫cool changes in your UI.
‫Great.
‫I hope you could understand all of that.
‫I advice to try out some additional data triggers.
‫Check out something with a text.
‫So if somebody enters a specific text, then something should be changed or those kind of things.
‫So you can do a lot of things with XAML without having to touch a code behind, and that's pretty cool.
‫All right, great.
‫So see you in the next video.