WPF Tutorial: Storyboard Animation in WPF | User Control | Visual studio blend | Triggers

hello everyone my name is ronuk and you're watching Vector what so in today's video we will create this user control animation using WPF so without any further Ado let's get started and for those who haven't subscribed to my Channel please do subscribe to my channel it means a lot so let's create a project in Visual Studio blend and select WPF app with Net Framework give this project a name and let's click on the create button let's wait for the project to load once it is loaded Let's uh hide the sample content and um first things first let's go and add our user control so let's add a user control give this user control a name let me rename it as Pop control and click on ADD once it is added let's go and change the height and width of the user control so I need the width to be 300 and the height let uh let's leave the height as is so now let's move on to designing our user control so let me start first by adding a button uh let's uh place it at the center bottom center and um let's first remove the background uh and also change CH the content I'll just go and remove the content and right click edit a template edit a copy and click and okay first thing is what I was going to do is I will go and change the corner radius so I'll change the corner radius to 55 same as the width and height of the button so that I get a rounded button once that is done I'll go back to the window and change the image uh background image of this button I have downloaded some images from icon on 8.com I will leave a link in the description you can check them out um so these are the images that I've downloaded let me go and select the uh add button so this is our add button and let me remove the border and let's next Let's uh I think let's keep this border for now uh let's see uh let's make the changes later so I'll just copy and paste this button so that uh I have a add button and next one is the cancel button so you'll understand what I what I am trying to do here so when I click on the add button uh an animation will trigger and I will have some more buttons or options and when I click on the close everything will collapse so I have the ADD and cancel button so let me make the add button hidden and cancel button inv visible because let's start first by uh the uh uh Story Board to that we will Design so I just want to uh design what happens when you click on the add button because if you um start with the cancel then everything will be collapsed and you'll not be able to design it uh better so I am starting with this uh I have added a button same procedure I'll go edit a template and edit the copy and remove this content presenter here this time and inside this border uh before uh making changes inside the Border I will change the corner radius to say 10 um I need a more rounded rectangle so 20 it would do so border I have set to 20 Corner radius and I inserted border I am adding a stack panel and inside this stack panel I will add a button so let me resize the button to 30 points and uh let me change the horizontal alignment and uh let's select this button and edit a template edit a copy and this time I will remove the content presenter again and uh select the border and change the border to same as the width and height so that I have rounded button let me go back let me select the button again and this time I will go to the margin and set a margin of 10 uh let me CH reduce it 10 is too much uh I think two is good I will also change the width and height of this button and uh play around with the uh margins so that I have uh the exact or the right position inside the button so I think two is fine now let's select this inner button and change the background of this button so the first button is the files button so let's add this and remove the and next to that let's add a text block so since the stack panel orientation is vertical uh it is stacking below so I will change the orientation and change the height of this text block and also add a margin and change the text so this is files um yeah so this is our button let's remove REM this border brush and also let's go back to the uh window or the user control and select this button rename it to files and also change its size to say 80 points I think 80 points would be good okay so we have our first button so let's copy and do this uh several times uh so till we reach our the buttons that we have uh so next one would be file uh folders sorry same procedure uh make sure you edit a copy and not edit current because if you edit a current uh then all the same template will be applied to the previous Button as well so ensure you select edit a copy every time so now um unless you need uh the same template to be applied for all the buttons uh now I have made another copy of the button and this would be the uh pictures or uh photos so let's edit a copy inside this button let's change the icon that I have and uh the text block that is done let's repeat it one more more time before that I think um I should go back to the button instead of changing the size here okay so I have gone back to the user control and now I am changing the size of this button now one more copy rename it to be uh copy rename it to say this would be camera so right click copy okay and inside this we have a button change the image change the text inside the text block go back to the user control and resize this to 150 points so this is the end uh this is the uh end of the first storyboard animation when you click on the add button so when you click on the add button this is what I need to show so we all have everything uh now now I will go and uh before that I'll just remove this um border that I had for the uh add button so now I will work on the um cancel button animation so this is not animating for now I am just uh showing you the different states the animation will be done using story boards so we have not done that yet so I have copied the color of the uh uh image and change our background to the same color as the image color so that uh when I resize or uh change the size of this buttons I do not want that background to be white so changing the background and the width of the buttons first and now uh once all that is done I will uh move these uh buttons um inside the add button or behind the add button so this is the uh animation that I want to achieve uh when I create these story boards and animate this whole user control so right now I'm just doing moving them manually inside so this would be our start screen so now I will add a story board so let's add a story board click on okay and on the first key frame of uh button file let's add an empty key frame and on the point 2 key frame let's move this uh button out and uh on for the second fold button I will start uh the key frame empty key frame where the first button ended and on the point 4 I will um change the margin of the buttons so I will repeat this for all the buttons that I have and you will see uh from the steps that I am performing uh please um concentrate in this part where I am changing the margins uh of the buttons so next um I will um on the point fourth key frame I will change the background color of this uh button and also change the width to uh 80 so all these uh values I have uh saved when I was designing the uh uh states of these um um animations so now for the second button on the third key frame of the second button I will uh increase the size and change the background color to white same procedure for the photos button on the third key frame I will change the size and the color of the background and also for the last one so uh that is done and the last so you can see this animation looks beautiful so last is uh to show the um add button uh sorry hide the add button on the last key frame and make the cancel button visible on the last key frame so when you run so this is the first story board that we have completed so now let's add our Second Story Board which is the uh um Story Board that will be triggered when we click on the cancel button so let's start from where we left off or where we ended in the first story board so that would be the uh first um that would be the starting point for all the uh elements in our Second Story Board so our but our button files was actually um out of the um um add button and its background was white and its height was sorry width was 80 points the second button was also um expanded its height was um sorry width was 100 and background was white so you understand what I am trying to do here I am just trying to achieve the last uh frames or copying the last frames of the first story board and um creating this second story board with those values so on the first key frame of uh our Second Story Board I am just achieving what was uh the values that were in the storyboard one so let me quickly do these changes for the first uh key frame of all our elements in the Second Story Board yeah so this is what it ended with now uh I will slowly um change the um attributes in the uh second key frame of all the uh elements so I will change the width and background which I had uh the value I have copied previously so I'm just uh typing it here so the color was blue and I will do the same for the all the elements and uh on the second key frame of all the elements I will change the width and the background so the width is 40 and the back backround is whatever I have copied and pasted 40 and the value same thing for the camera button okay so now uh on the third key frame of every element I will move these buttons back uh to where it started from that is behind the add or the cancel button so so I will simply move them by changing the margin so every third key frame uh is to move them back to where they started from so that is done so let's run and see it in action so looks beautiful and smooth so now um we have our story board one and two ready so uh now uh we have to trigger this uh when we click on our add and cancel buttons respectively so so let's uh stop the story boards and uh go to our uh let's rebuild this so just to rule out any errors and now let's go to our example and under the resource uh user control tag or above our grid add a user control. triggers tag and inside our triggers we will add an event trigger and routed events equal to button base do click this is our uh event that will be triggered and the source would be uh the first button that is button add and button add will trigger or begin the story board Story Board one so the storyboard value would be uh static resource and that would be storyboard one so let's close this so when you click on button add our storyboard one will be triggered so let's copy and paste and let's copy the second button that is the button cancel and on button cancel click storyboard 2 will be triggered so uh the triggers are ready now so let's rebuild this and go back to our um main window uh yeah so let's go back to our main window and inside our grid we will add our newly created user control so um I'll just change the background of our main window to a shade of gray and make sure you have this local uh name space uh uh there and you using that local name space I am using our user control and I'm setting the same width and height as the user control had uh while we are designing and let's close this so that is uh that simple to add our user control uh to our main window I will also change the height of our uh window and let's run this application and see it in action so when un click off this it pops out and and and it collapse but um there is something wrong here uh it does not change back to the add button so uh let see what has gone wrong so we'll go back to our user control uh let's go to the designer go to our story board 2 okay so I have missed adding a key frame to hide and show the uh add and cancel buttons so let me um hide the cancel button and on the click of uh on the Second Story Board Let's uh hide the cancel button and make our add button visible um let me do that I think uh yes no uh there is something wrong I have to it did not capture the key frame so let me remap those select them uh make it visible and then make it hidden again I think now it has captured the action hidden and visible so add button is visible and uh cancel is hidden so I think uh that should work now and let's run this one last time and see it in action so this is a beautiful looking user control with animations so hope you all liked uh watching this video if you do please give this video a thumbs up and if you're interested in the code please uh go to the description and download this code from my GitHub repository till then bye-bye

Channel: VectoArt

Views: 1,040

Keywords: visual studio blend, wpf, visual studio blend tutorial, ui design tutorial for beginners, ui design tutorial, wpf tutorial c#, wpf tutorial, Storyboard in WPF, Triggers in WPF, Storyboard Animation, Animations in WPF, xaml ui design tutorial, wpf interview questions and answers, c# wpf application tutorial, how to create ui design in wpf, wpf application examples in c#, how to make wpf application with visual studio, what is wpf application in c#

Id: CzKPoeusWps

Length: 18min 30sec (1110 seconds)

Published: Sat Nov 04 2023