Fold Animation Using WPF

During my search on net I came across jQuery UI - Demos and documentation site, where I have see many effects like blind, clip explode, bounce etc by using jquery. But the most interesting effect on that list to me was the Fold effect. So I try to do that fold animation using WPF, as these days I am working in WPF so that is why I want to do in WPF. The fold animation I have created for the example is same as it was given in the jQuery UI - Demos and documentation, but one additional thing I have done is , when animation finished mean when fold is completed then I have open the window in same manner, you can say fold close animation and fold open animation at the same time. So let us start with example code.

For this example I have the following screen. In the screen you can see that I have same GUI as you can see on the jQuery UI - Demos and documentation web page. I have a button control and One filled area which looks similar to the area shown in jQuery UI - Demos and documentation Page.

Here is the code which is used for the fold animation. In the code you can see that I have two double Animation object one for the height and the second one is for the width of the control. For the height animation I have set the To property to 30 and from property to 200 mean I want to change the height of the control from the 200 to 30 by using the double animation object. Then I set the duration of the double animation object how much time it will take to complete the height of the control. In the next statement I have Set the target name which in this case is my Grid object named "grdFoldAnimationGrid", using the name property of the grdFoldAnimationGrid. And In the next statement I have set the Target Property of the control which is animated by the height double animation object. As I am using the Grid Control for the animation so here I have used the Grid.HeightProperty.

DoubleAnimation dblaHeightAnimation = new DoubleAnimation();
dblaHeightAnimation.To = 30;
dblaHeightAnimation.From = 200;
dblaHeightAnimation.Duration = new Duration(TimeSpan.FromSeconds(.3));
Storyboard.SetTargetName(dblaHeightAnimation, grdFoldAnimationGrid.Name);
Storyboard.SetTargetProperty(dblaHeightAnimation, new PropertyPath(Grid.HeightProperty ));

DoubleAnimation dblaWidthAnimation = new DoubleAnimation();
dblaWidthAnimation.To = 0;
dblaWidthAnimation.From = 220;
dblaWidthAnimation.Duration = new Duration(TimeSpan.FromSeconds(.3));
dblaWidthAnimation.BeginTime = new TimeSpan(0, 0, 0,0,300);
Storyboard.SetTargetName(dblaWidthAnimation,grdFoldAnimationGrid.Name);
Storyboard.SetTargetProperty(dblaWidthAnimation, new PropertyPath(Grid.WidthProperty));

Storyboard strbStoryBoard = new Storyboard();
strbStoryBoard.Completed += new EventHandler(strbStoryBoard_Completed);
strbStoryBoard.Children.Add(dblaWidthAnimation);
strbStoryBoard.Children.Add(dblaHeightAnimation);

strbStoryBoard.Begin(this);

For the second animation object which is to animate the width of the control. I have first set the To and from properties of the width double animation object and then set the Duration property. Which are same for the height double animation object. The key to the width double animation object is the begin time property, which set the time when the width double animation object will start working.I have set the begin time of the width double animation to the time taken by the height double animation to complete. If you look at the code again you can see that the Duration of the height double animation object is set to .3 second and the begin time of the width double animation is set to 300 milliseconds. So when the height animation is completed then the width animation will start.

The code above is used to close or you can say hide the control, now below is the code which is used to open/ show in the same manner, the fold open manner. The code below is same as above but there are as some minor and important changes related to show the control in fold animation. First if you look at the code you can see that to open/show the control for fold animation in this case the width of the control is animated first and for this purpose I have animated the width of the control first but little addition for this is that I have set the begin time property of the width to the 600 second which mean that when the fold animation close is completed then it will wait for 600 milliseconds and then start the open fold animation.

DoubleAnimation dblaWidthAnimation = new DoubleAnimation();
dblaWidthAnimation.To = 0;
dblaWidthAnimation.From = 220;
dblaWidthAnimation.Duration = new Duration(TimeSpan.FromSeconds(.3));
dblaWidthAnimation.BeginTime = new TimeSpan(0, 0, 0,0,600);
Storyboard.SetTargetName(dblaWidthAnimation,grdFoldAnimationGrid.Name);
Storyboard.SetTargetProperty(dblaWidthAnimation, new PropertyPath(Grid.WidthProperty));

DoubleAnimation dblaHeightAnimation = new DoubleAnimation();
dblaHeightAnimation.To = 30;
dblaHeightAnimation.From = 200;
dblaHeightAnimation.Duration = new Duration(TimeSpan.FromSeconds(.3));
dblaHeightAnimation.BeginTime = new TimeSpan(0, 0, 0,0,900);
Storyboard.SetTargetName(dblaHeightAnimation, grdFoldAnimationGrid.Name);
Storyboard.SetTargetProperty(dblaHeightAnimation, new PropertyPath(Grid.HeightProperty ));

Storyboard strbStoryBoard = new Storyboard();
strbStoryBoard.Children.Add(dblaWidthAnimation);
strbStoryBoard.Children.Add(dblaHeightAnimation);

strbStoryBoard.Begin(this);

After the width animation the height animation will be start for which I have set the begin time to the 900 milliseconds, as the begin time of the width animation is 600 plus the duration time of the width animation is 300. One important thing which I have to mention here is that the To and From properties of the both the height and the width animation are just opposite to the what we have set the first code, the To and From properties of width animation object has the value 220 and 0(zero) and the for height animation object is To and From values 200 and 30 respectively.So that the control will be shown.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!