How to Create Engaging Animations in WPF using Storyboards and Code-Behind

in this video we'll explore the animation capabilities of WPF as a framework WPF offers a number of features for Designing visually appealing and interactive user interfaces one of its most noted features is its support for animation in WPF animations are achieved by applying animations to the specific properties of UI elements WPF has over 40 predefined animation classes that can be used to animate a variety of property types this may include the double type Point color thickness Vector Etc now it's worth noting that WPF also allows developers to create custom animations that Target property types that are not covered by the predefined animation classes now there are several ways of applying animations in WPF using Code behind or storyboards so with that being said let's go to visual studio and get to the coding alright so here in Visual Studio I already have a WPF project setup so I'll start by collapsing these Solutions Explorer panel now here in the main window.summer file I have a stack panel defined with its orientation set to horizontal and I have five buttons placed inside the stack panel now you may notice that the buttons appear slightly different from wpf's default buttons and the reason for that is because I have a style defined here so in this xamo file that's all that I have defined so it's simply a stack panel with five buttons and a style to style the buttons now there are two main ways that we can apply animations in WPF so we can do it in the xaml or in the code behind so in xamo for us to animate we need to use storyboards now in the call behind we can simply use the animation classes now to use a storyboard you would have to use an action and this action is called the begin storyboard action this action can only be done using triggers so that would be the three types of triggers that are available in WPF that's a property trigger an event trigger and a data trigger in this video I would like to use the property trigger and for me to use the property trigger I can only use it within a style or a control template or a data template now suppose I want to apply an animation on an individual button without applying it inside the style I can simply use the buttons triggers and then specify the trigger there however this would only allow me to use the event trigger now in this case I'll be using the property triggers and that will be done in the style so here in my style I'm going to collapse this setter and I'm going to add in a new style trigger so say Style triggers and within this trigger collection I'm going to add a single trigger now triggers allow us to perform actions when specific conditions are met Source a trigger now here we have data trigger event trigger a property trigger so we are selecting the property trigger and I would like to Target a property and this is the ease Mouse over property so when this property is set to true then we can perform an action now triggers allow us to perform two types of actions and right here within this trigger I can Define the two actions and these are the interactions and the exit actions so I can simply say trigger then specify the action so I'll say the enter action so the interactions so we can specify the actions that we want the trigger to perform I'll add in the exit actions as well when the condition here is met we can perform the actions that we Define here when the condition here is no longer met we can perform the exit actions so here for us to apply an animation we need to use the begin storyboard action now in this video I'll be animating the height and the width of these buttons so I'm going to add in a begin storyboard action then within this begin storyboard I'm going to define a storyboard now storyboards allow us to group animations together as well as manage them so here because the height and the width property of the button of the type double so the best animation I can use is the double animation so I'm going to add in a double animation now I would like to specify the target property that I'll be animating because this button has a number of properties so to do that I'll use an attached property and that is the storyboard Target property so I'm going to specify that I would like to animate the width now I would like to animate this width to a specific value now let's scroll down here to our button right now the width is set to 100 I would like to animate it to 130. so I'll set it to 130 now I'm going to define the duration of the animation so I'm going to use the time format so I'll say 0 hours 0 minutes then I would like to animate it in 0.3 seconds now the animation class here which is the double animation allows us to also set other types of properties like from what value I would like to animate now in this case I want to specify a fixed value I would simply like to animate from whatever value is the width so I'll leave that property out another property that we can set is the auto reverse so this simply means once the animation is done it would start reversing we are going to Omit this as well so that's it for the width property so I'll copy this animation then I'll paste it now this time I'm going to animate the height property and our height is set to 120 so I would like to animate it to 150 that would mean I'll be adding 30 pixels all right so we have the interactions defined so simply increase the size of this button whenever the mouse enters but when the mouse leaves I would like to animate back to the original size so that means I'll be placing some actions in the exit actions here so I'll copy this begin storyboard action then I'll paste it in the exit actions now here I'd like to animate back to 100 and 120. so that should be it now here we understand that this style is being applied to the button so that simply means when we run this application we should expect this animation to work so I'm going to go ahead and test the application all right so the application is up and running so just maximize the application and I'll try to hover over the buttons and we can see once I leave the button it animates back to the original value and we set that in the exit actions so I can simply hover over the buttons and we see that action now the animation is a bit linear we can actually change the acceleration of the animation so go ahead and close this and that can be done by simply defining a property on the double animation and this is the acceleration ratio so this is a value from 0 to 1 so we can set it to 0.3 and we would notice a difference in the animation however WPF also allows us to have more control of the animation and that can be done by simply specifying an easing function so I can simply say I would like to add in an easing function to this double animation so I'll say double and I'll specify the easing function so I can simply add a new function now there are a number of using functions that we can use so we have the bug is Bounce cubic Circle elastic we can try to use the elastic ease all right so what I'm going to do is I'm going to specify this on the other animation as well so just simply copy now the reason we have to open the tag is because the is function is its own object so we can't simply specify within this property here so I'll just test that okay so let's go ahead and run the application all right so I'm going to expand and try to hover now notice that it has a bounce to it and that's because we set the easing function to an elastic is all right we also have Circle is so we can change that to Circle and let's try the application all right it's up and running let me expand so it's kind of similar to the default though it's kind of smooth it's a bit smooth we can also try out the bounce ease all right so the application is up and running so I'll give it a try and it's similar to the elastic Keys all right so I'll go ahead and close this okay so just get rid of this all right now suppose I wanted to animate the background color now because the background color is a brush I'd have to use a different type of animation so in this case I can simply use the color animation so I'll say color animation and this time I'll say storyboard Target property and I'll set it to the background I would like to animate the background to a shade of Orange so simply say coil okay for the duration I'd like to set it to 0.3 seconds now here we have a slight problem the problem is that the background property of the button is of the type brush but the animation we're using is a color animation now these two properties are incompatible however we can still animate the background the reason is because the brush has got a color property defined on it so to access that property I can simply cast here so I'm going to say solid color brush and that's because the background is of a type solid color brush so it's a solid now I'm going to access the color property of the solid color brush so I'll simply say dot color and that should do it alright so I'm going to do the same for the exit action but for the exit action I would like to animate it back to White all right so let's go ahead and try the application all right so the application is up and running so let's give it a try and we see nothing happens let's just close it all right so probably we have something wrong okay so it's here we misspelled background so simply add an R then try the application again all right and you see we now have the animation so it's animating to Orange and then animating back to White all right so I'll go ahead and close this now at this point I'd like to perform animations in the code behind so what I'll simply do is I'll get rid of everything that we have done so far so right here I'll get rid of this trigger section so that means animation is normal I can try the application and just verify all right so there we go so we don't have any animations anymore so close this now for us to perform animations in the code behind we need to reference these buttons so we can do that by naming each individual button but that would be kind of cumbersome so what I'm going to do is I'll simply write some logic that's going to help us identify that a button has been hovered over all right so I'm going to do that by specifying the mouse hover event the mouse enter event rather then I'll create a new event handler I'll do the same for the mouse leave event so I'll specify a new Handler for that as well all right so let's go to the chord behind so here we have two event handlers defined how do we get the reference to the button we can simply do that by using this sender object we know that the button initiated the event handler so the sender will be simply our button so I'm going to create a variable and I'll simply say button and this button will be equal to the sender now we simply just can't use the object we need to cast it as a button so simply say as button all right now that we have our button we can now perform some animations so I'm going to create an animation so simply say VAR then I'll say width with animation is equal to and u double animation so I'd like to specify the properties of the double animation so set the two property to 130 then I also set the duration I'll set it to a time span Source a time span so there's a method that I can use on the time span and that's the two seconds method rather from seconds method so I can simply specify the seconds so I'll say 0.3 seconds all right so this double animation will be animating to 130 and the duration will be set to 0.3 seconds so I'll copy this animation and paste however this time I'll set it to the height animation so say height and I'll be animating to 150 and I'll keep the same duration now in the code behind to animate you have to reference the element you would like to animate so in this case it's our button so I'll simply take the button and use a method on the button and that's the begin animation method this method allows me to specify two arguments so the first argument is the property that I would like to animate and the property is the width property this property is defined on the button class so as a button then I'll simply specify the width property now here you notice that it has the word property here so it's a width property so this is because this is defined as a dependency property now for the second argument I'll simply specify the animation I want to use and in this case I'll use the width animation and I'll close it off so simply copy this line of code and begin an animation for the height as well so this time I'll set it to the height property and the height animation okay so that should do it so this simply means when the mouse enters over the button we get the button and we perform the animation so I'll copy this line of code the whole block actually and I'll paste it in the other event handler this time I'll animate to the original values so that's 100 and 120 okay so let's go back to the code behind to the xamar rather now here this event handler is only set on this button so I'd like to set these event handlers on all the buttons alright so that's it so once the mouse hovers this event handler is going to be executed and when that happens we simply get the sender and we animate the height and width all right so let's go ahead and try the application all right so the application is up and running so let's try it over and there we go we see the animation now if you want to create more complex animations you can just simply explore and try to experiment so that's it for today's video remember to give this video a thumbs up and subscribe to this channel you find this content useful thank you for watching and I'll see you in the next one

Channel: Tactic Devs

Views: 15,823

Keywords: wpf ui design, wpf animation, c# tutorial for beginners, programming, how to animate in WPF

Id: qK90unxfrXw

Length: 22min 2sec (1322 seconds)

Published: Sun Jan 29 2023