C# WPF UI Tutorials: 07 - Storyboard Animations

[Music] so first off sorry for the delay in the videos I went away for a week and I want to come back as you can probably tell I got laid off so I'm going to cold only just about good enough to be able to speak so that you can hear me clearly so that's the reason for that of long gap between videos in this video we're going to cover some WPF animations we're going to keep it short again just because I've got a cold and I want to be coughing into the mic all the time and then I'll just do multiple videos over the next few days in you know smaller chunks so we're just going to cook some basic animations in this video so we've got the processor word application if we give that a quick run I'm sure you'll remember it have you been following the other videos we've basically got the sign up screen done we've got an email you can enter a password that you can answer and we've got a basic a few buttons and you can be sighs and move around and what have you so now we're ready to do these are the register page or once you're sign and go to the other page so we basically need to transition between two pages and to do that the Mars on now add some nice animation so we probably love this login screen to maybe slide in from the right when it is loaded and then when you click Next or when you collect I have an account it slides out that way and the next screen slides in or something we'll do some kind of animation we'll figure out as we go and then the same thing to get started we'll just make this hover like a smooth animation and study just a snap and WPF as always there's about 50 ways to do everything so we'll show you one way we go to the login page we'll click this button we know it's basically a default button style so we go to the buttons and we go to regular button we've already got some triggers for mouse-over I'm setting the property background so got what we want here we just want it slightly different so instead of a trigger you want an advanced trigger and it's called a routine event instead of a normal event and it's mouse and just instead of is mouse over so basically going to delete this trigger afterwards but we're using this as reference so mouse overs become mouse enter trigger event from event and routine event instead of property and then we will want to begin a storyboard so in WPF or animation should be done through storyboards you shouldn't manually be changing properties to like resize things or moves and use a storyboard because that's Hardware accelerate accelerated and heavily optimized and things like that so a storyboards basically an animation in WPF so we begin the storyboard and now we need to actually create the storyboard then we create the storyboard there there's multiple types of animations you can do you can do number animations color animations three type animation in so you got building an animation decimal animation character animation there's a lot of different types of animations we're changing the color so we can animate a brush a brush - a brush like we've done here so instead of setting the background we're going to have to set the background color so use a color animation we want the color to go - and then we need the color so it can basically copy this just without the brush at the end - on the actual color so we want to transition to blue on hover you've got the duration which is hours : minutes : seconds till dew point three seconds and then you need to do the we need to get this the target name so it's an attached property in this case so it's storyboard target name that be border and then we will want what's left the property so we need to set the background in this time we said when I set the background color so it's storyboard dot carded property background dot for what I think is and then end the storyboard and the color animation and then we can delete this old one so now it won't fade out yeah because you've only got the enter but let's just check that works so just remember the project we should see fade to blue so you can see that was a nice fade and now we've got into the opposite we've got to reverse the the animation everywhere so we can copy this event trigger paste the whole thing change the mouse leave change it to its orange by default and that's it so when it leaves it should go Orange and there you go slice as simple as that now very nice smooth color changing animation just makes it a little bit nicer we haven't done it to this one down here but I can leave you guys to do that it's just change the different button styles so that's one way of being animation you can create the storyboard directly in zama you can create multiple animations that target multiple different properties and elements and you can have them triggered on specific events so there's there's one way of doing something so that's the button runs the next one is a bit more tricky so what we want to do is run you want this page to slide in and then slide out when it's done but that's going to be a universal thing we don't want it just on this page and then when we've got 20 pages in the application have to redo the animations so what we want to start doing is making a base page that all on the pages can follow and in that base page were actually add the ability for all pages to be animated and in an out or up and down or grow or shrink or whatever we like but we're going to make a base class for the page so that all the function we add for this page is going to be available in all pages so start by making a new class on the pages we'll call it base page and all that on new stuff base page for all ages to gain bit of a random comment by that although it's kind of an havoc itself from page and then what next we one will need a page animation in order to create multiple animations and then allow them to select what animation the page wants so it's making you follow the first in the project let's call it animation we'll add to their page animation that's just going to be an enol of different types styles of page animations straw in and disappearing we will do I think we'll do a slide in so we need the animation for the slide in from the right so it comes in from the right and then when you go away you want it to slide out to the left so we'll actually call it that will just call it slide and we'll do fade as well so looks a bit cleaner will slide and fade in from right and we will slide and slide and fade out to left so once I get an in style the others and out page slides in and fade in [Music] so pretty self explanatory variable of our property page animation and again we'll need to we'll need the page load animation so what happened when it comes in will be for that to slide in from right and then one thing we've missed we need the knob and the animation to play when the page is first loaded image to play when the page is unloaded and then for the unload we'll do the opposite by default will slide out to the left but less in a region then we have were want as these animations grow will one time so you can value the times so will it be in a base page and I think the simplest way is just to have a property that can be a protected property now let's make it public there's no real harm and the little mummy likes a slide second so I don't know how long the animation have you select a slide animation it will take and we'll need this information in order to know when the pages say loading we need to know how long that's going to take so that if we wanted to await that and then do something once it's in you know fully animated in we need that access to that amount of time so you'll make that a property and we will default it to say one second to slide in let's say eight point eight seconds okay husband we need up to be afloat so that's what we'll do and then you'll have these if you do say aggro animation you'd then up grow seconds as well and it's up to the user to know and this light load animation slides and they need to make sure if you want to change the time you change the slide seconds not like the grow seconds time any slide animation takes to complete I think that's it for the properties because we're only doing this one animation for now or what the constructor and then in here we will want to know when the page is loaded chop this in another region and this is the page is loaded from any required animation we'll do that in a second where else will we need I think that's it for now look there well if there's actually in order to start an animation so if we have any animation we expect that it's not going to be visible whichever way by the you know initially you need to start the animation so that it moves the element to wherever it needs to be be then we'll make it visible so basically if we have if desktop take those animations isn't equal to knob then we'll make the visibility collapse to start this are basically totally invisible so really but I do that explicitly sometimes the intellisense is not intelligent so as we are kind of making n hi to begin with and you'll see why in a minute so we hide it we've got an animation which by default we're going to do the slide in we then listen out for loads so then our load we want to animate in so we'll just say animate in and unless function animate in an in fact we'll make it a why not just make it public we'll do it fast as well so it can be awaited so we know when it's complete we can't do that so we might as well this is not awaited because this is just an event and we'll make it away table just to get rid of the error basically then the animator will check again if a shop page load isn't equal to non or rather than this case of a is equal to norm just return because we're done there's nothing to do so now we get here we know there's an animation to do we should do then a switch on the load animation and then this is we can start adding all the ones you want to handle so in this case we're going to handle a sliding from the right for now and we will will make okay what we'll do what mixer what we'll do directly in here from out and then we'll make like a storyboard helper that can have animations like sliding and fading in it and we can we use them throughout the whole application map so to start with let's just handle type the animation so similar to the WPF you can do a minimalist we want to create a new storyboard and then in that storyboard we need to slide from the right so to do that we first need a new animation so we'll do slide animation as new it is there's a slide from the right we are going to set the page itself a pages margin on the left hand side to the width of the window so basically this will shift all the way over there and then we need to set the right margin for the negative of that so that doesn't just crush in so we're going to literally shift this page using the margin so to do that we will need a thickness animation so create a new thickness animation and we want to do and duration is this dot slide seconds and it is a duration which needs a timespan this is why we'll make a helper function because otherwise this would be very long-winded timespan is informed so that was a long-winded way of just saying the seconds whereas in Tamil it was a lot shorter but we'll make helper function so well that'll be much easier so got the duration we need to go from some look at before and that is a new thickness and the margin goes left top right bottom so the left wants to be the list stop we know with the top stuffing the right is - let's start window width and the bottom is nothing that's the from if you want to go from all the way out the screen to just a new thickness of nothing - basically backed away started that's the from the - and then you've got something as well called acceleration ratio which is like a speed of how it decelerate them it's like an elastic effect I always find point nine is quite a good slow down over and so you've created the slide animation where you'll basically move from me out to the screen to the inner now we need to tell it where the animation is used because that's just the animation right now in the zamel you'll see we did there's a touch property storyboard target name storyboard target property so there are attached properties so in order to do an attack property and code behind we need to access the storyboard itself the actual static plus and we do set target name and set target property so we'll set dog each property to slide animation and it's a new property path and we want us to be the margin and we don't need to set the target name because the time you name is ourselves this page so we don't even need to set that and then we just need to add the animation to the storyboard you'll notice I've got comments this by the way because this is going to move to a helper function in a minute so storyboard dot children that are the slide animation and that will now slide in if we play that animation so let's start with that so now we just do storyboard begin and because we know we're waiting this long tree to complete we can then do an a wait tough start delay let's stop slide seconds and it's in milliseconds at times of thousands and it's still done rather so with our time span really what's the time span no it's not okay maybe just doesn't realize it's an integer very well so then we await so that effectively if somebody awaits that's how to make then you know when it's finished we know one will animate it in so now when if we overload the space page and overload sorry if we inherit from the space page when the page then loads it's going to set itself to collapsed so it's invisible and will then get out as a points we need to make sure we're not invisible once we stop so we need to start the animation set it or not begin as soon as this begins its going to start from here so it's instantly going to move it's going to set the margin to that distance it's hidden so as soon as it's begun we can now unhide I keep trying to comment I'm going to resist so just do this top visibility equals and then make it visible again and then we let the animation finish so we basically hide to begin with start the animation so that the from is the part of whatever animation were playing is all set up and everything's moved into position then make it visible after we've started and then wait for it to finish so now that should happen we should basically replace the login page open with replace replace the login page with the base page so to do that you've got Duke in two places what is a sam'l and the code behind so that's becomes base page and now this also needs to become base page which is in the local names face makes page and that's it's just a designer tend tough trouble that's fine the ones you've cleared off and rebuilt a few times at all beside so we will match should basically animate in from the right oh no no target was specified okay then we needing a target so the tog was obvious it was ourselves have a look so we're gonna storyboard a slide animation and we have oh sorry the beginning you have to tell it what's it again on if you're not setting the thing so the beginners going to be on this on this page that's all listen because you can create a storyboard men assign it to different things okay and that's a nice little there slide in so in case you missed that I'm just going to on the click tell it to replay the animating function and again just for the demonstration I'm just going to do a normally them so you know chose we're doing this in production use view models for things but just for quickness to show you I can then just do this to animate in if I made it probably quick I thought of it yep okay just I think I shouldn't Alison's been delayed that's perfectly fine yep so if I click that again it should start again and there you go so that's like your animate it but we've done this encode behind them it's okay to do animations and codes behind like we've done here you know manually creating code all the times I've been saying do not do code behind if you remember I basically said don't do it unless it's for animation it arises for UI and only then if you can't accomplish the same thing with you know I example and in this instance because the logic of animating the page in and changing the properties and everything else from the way that we're then going to animate the page out wait for it to finish then animate the page and it starts becoming quite logic intensive zamel is not that good at logic that's why we have view models in the first place so because this is pure UI whatever doing UI stuff in the backend we're animating perfectly fine to put it in the back end so that's stuff we've got the animation started so now let's just actually we'll keep that click on and there's time on the click we will animate out so she's really annoying that the intelligence hasn't kicked in yet let's just try and clean and get this realizing it's okay and be honed there we go never mind anyway we'll work out intelligence for now so we've done the animating let's actually move this now to the helper class was talking about so in animation create a new class we'll call like storyboard helpers and we also need to add the fade in as well as that slide so we'll do that now when we do this helper class so we do a public clustered most graphic animation helped us for storyboards what you'll become apparent in the moment then we'll do a full which static void we want to do the add slide from right and we want to do this storyboard so that we can just use the helper function storyboard dot add slide from rec yeah we'll need the second slow track you it enough we'll want the offset in terms of you know how far for the right do you want to start from will need the deceleration well we don't need it so I'll make this optional yeah we'll get it vandeman will be for that to what we know and as the slide and fade-in animation to the storyboard timely animation will take the distance to the right to start from and the rate from assimilation and then we've already done this code this is already in the function here so I'll just cut all this out we don't need the beginning so that goes there we don't want to we need the storyboard in fact let's make a helper function for this as well so make a function here for in fact now in to help us with the animation to help us unless is going to just be a short function which will be I shall we call it slide and fade in from right and reflected now we'll do our helper class for this because we don't want it all nodes it all inside this flat in this base page because it's going to get quite big with animations so we'll go to page animation tag or then do page animations which is going to just be again a pure helper class but somewhere we can just move out the animations because it's going to get quite large as you want to start adding multiple animations so again it's just a static class and help us to animate pages in specific ways and then the first one ones is stuffy we'll be doing a fast again what's wrong with intelligent visas Bobby started gazing tasks slide and fade in from right from their cage age just going to work here earlier and then we need just the number of seconds well float and finally we'll paste the code we had in here so this one's to the whole thing like the slide in invade so we need the storyboard creative we want them to add we're going to storyboard help we're doing that will add the slide animation slide from right so which really splitting this up into as modular as we can be so we just create the storyboard we don't leave storyboard and we should have a helper add slide from right the number of seconds we've passed in the offset is going to be the pages window width the deceleration ratio will leave as default so we pass that information through so through the storyboard and hopefully or as you can see I'm doing here is separating the code we had and splitting it up into nice small sections and the storyboard helpers can work on just storyboards to add slide effects to any storyboard so we can use that anywhere in the application then the page animations can be used on any page even if it's not a base page them so you can stand and make a regular page for any reason and that just then creates the storyboard cause the storyboard helper to add specific animations and then we will use that in the base page so we're just really keeping it all separated me there making it modular so that we just be usable as possible so as slide from animation paste spm we've got the storyboard so we create the animation this animation the duration we need times buns there and to the left slide second it's just seconds it's not this that window it now it's the offset with past N and a - offer to their deceleration is oops acceleration ratio so now create the margin and we make from right set the target property name are left to the story mode let's just change to the storyboard and that's it that's all we need to do for that little animation so then we add it to that we've got the storyboard we've now added it to the story mode itself and then because we're doing this we actually want to do that begin things so we just want to do storyboard up begin and we want to do it on the page and when we want to make the page there's a box again we'll remove that and see if it's smart enough to find it there we go so start animating make page visible wait for it to finish so we just do awake tasks delay seconds times of thousands and cast it to an integer and that's that so it's exactly the same as what we've already done we've just moved it all around so now we've got a page helper called slide and fade in from right we still on down the page yet but we've moved everything out now so now the base page can become that's done unloaded animate in we turned up we've got nothing otherwise that goes nuts gone nuts on so basically now all that comes down to if we want to slide and fade in from right into their stock slide fade from right and those are going to provide is four seconds which is provided in the property and everything else and passes down and we await that so it looks really nice and clean that in your base page you're not all doing the animations of the base page so start the animation so we then just step into that with f12 you see that goes to the page animations class using the page which is specified creates a storyboard adds the slide from right to the from the storyboard help us and then begins it makes the page visible and wait so everything we had before is now just in different classes so let's check that still works that still works which is good let's now get a fade in so to do the fade in let's go into the page helper we got add slicing right so we probably want to do now add fade in animation and then we'll call this add fade in and alternate for that seconds then we'll go to the storyboard helpers copy and paste this adds a fade-in animation up there on description as the slide from right animation that's the faded animation so the bit animator time rotate to animate we don't have offsets we have the deceleration leg oh we just got seconds let's you know called add fade in now the animation is now going to be a double just a single value double animation double animations we'll just have generation and then they'll have to and from stuff it's just that they'll be when you're fading in you're going from 0 to 1 so that's the opacity from completely invisible to fully visible and then that's going to be the opacity property then we add it so that's it that's those about to do so now we've added slide in we also add a fade and so we play this we must have to slow it down to see so let's actually do that to start with let's go to the base page change this to 5 seconds so you see happening nice and slowly you can see that it slides in and fade them so if we change that back to normal and you can tweak whatever settings you like about this to make it you know how you want it to appear there's a nice little you know a simple animation and then we got a little hop it just starts making it feel a lot nicer so that is the slide in impatient right we might as well go to the storyboard helpers and do the reverses of these so we'll copy and paste the fade in and we'll call it one fade out fade out animation I fade out sober to animate blah blah blah or this time just reverse these so from fully visible to invisible that's that done same with this very similar copy and paste ok mess up on the comments visual studio thank you slide to left animation absent stays the same they're easier to just rename as you know we're going from zero to and less time we want it the opposite one the negative and the positive inverting so then offsets the left margin all the way out to the screen and the right push it all the way over so it slides out and that's our house as simple as other that's now the two new animations that storyboard helpers done on the click or mail want to animate out which I love it was made yet but that's what's going to be called age animation next stepping up the structure commenting this side the page in from the right H to animate animation take copy and paste that slide the page out to the left slide them fade out to left storyboard add slide the left add fade out again everything else is the same that's it for that and then the base page we now want a probably async task and a make out animates the page out keep your comments the same again similar logic copy and paste there's nothing to do return otherwise find it and this time we want to handle these slide out to left which by default we set here flied out to left on the unload and then we just change the helper to slide and face out to left and that's it so now the animates out we should animate this out the button click should call up so we just run mess it should slide it and then when we click the bottom it should slide out or not so let's debug that step in okay load animation so it's a danger of copy and pasting make sure you have to pay a bit more attention I've got a cold so that's my excuse today copy and paste slide down click yeah we know we've hit mark and I'm going to miss the slide out because the breakpoints do it again slide then click slide out that's quite cool and then you'll notice if we make the screen bigger so one thing you've got to bear in mind as well as a point of start of the animation so when we do it how to make out to an animate end so the animate ends a better example and we call the helper to slide in and we add this slide from right at this point in time we're then going to query the query ok yeah when was we're going to be clearly in the page with the window width at this point so when you start the animation if you started a really slow animation which one fact I'll just show you it's easier so make a really really slow animated so let's make it at last under 20 seconds I'm going to run this and then I'm instantly going to maximize the window because what's going to happen is when the window is loaded we then start animating from the right but we automate from the size of the window so if the window is so this size so here this white window we are going to start and effectively our page is just here on the edge it's almost like the solution Explorer and it some drugs and because we offset it by the window width at that point in time so we open the window start animating in the pages here then we double-click a maximize the window you're going to see that it's already you know if the windows bigger your feet animating it so you'll see what I mean so you just got a bad out of mind words the way we're doing this animation so it starts maximized and you can see it's already here it was already at the edge of the window because we told it where to start animating from so that's one things about in mind but typically animations are very short and they're just more of a visual appeal so it doesn't matter about it being absolutely perfect in terms of somebody opened over them instantly expanded the might see that it's already started to move in you know it's just really isn't an issue but just bear that in mind that when we start the animation at this point we are reading the window width and the window can be resized at any point in time so if you do future animations if you're using things like window widths and it's a you know a specific animation or repeating animation you might want to handle the window resize to keep track of you know the true size of the window so that's the animations done that's kind of the points this video I wanted to keep it short like say I've got a cold and I want to talk too much I'll lose me voice again we've got the slide in we've got the slide out we're doing that just on the slide is fine that can happen on load but a slide out we want to change from just being a button click to beam in the actual window the windows style the actual window in window so we want it to happen on all pages and whenever we are changing this frame which is where the pages the current page gets bound so what we're going to have to do in the next video is when the current page changes in the view model will have a value converter for that application page and here where we then just go wrap be telling you page that's going to change the frames content here to the new frame we don't actually want that we want the first animate out the current page then we want to return so this is going to become an asynchronous converter that when it gets called we get the old value from somewhere somehow and then we'll animate out the old page and then when it's finished after a week and will then return the new page which then will fire the unload which will slide in so then this animation will happen naturally the previous page will you know animate out the other one or animate end we could do it another way and actually have this returning instantly but the old page being on a separate frame that so we've got two frames and I've won on a mating out and the other one are mating in and the other self removes we'll figure that out in the next video but we'll get it so that it's more Universal through the application there's no manual changing of you know page animations we shouldn't have to fire them off in the background yes that's on the May 10 will but then the animate out we want to get called from the view model when the content changes so this will become you know fired violent view models so hopefully that give you a good example of animations we'll be using a lot more throughout the application so I'm not really going to do another specific animation video unless it's requested because we're going to go and you know we're going to start adding animations everywhere as we go so you'll get to to use them get a feel for them anyway but hopefully this is giving you a little understanding of a few ways of being able to do it so we've done it in a style in one way and on the storyboard inside of an event trigger and then we've created some in the background code and just manually set them up the same way and you know dummy attach property this way so let me know what you think any comments obviously leave them answer them anything confusing again just comment it off I'll reply thanks [Music]

Channel: AngelSix

Views: 97,131

Keywords: wpf, animations, storyboard, c#, fade, slide, mvvm, view model, login, form, signup, guide, tutorial

Id: b9G7uxhAzt0

Length: 45min 2sec (2702 seconds)

Published: Sat Mar 04 2017