Jquery Sliding Animation using WPF

In my Post Sliding Effect in Jquery i have explain how you can use the jquery to achieve sliding effect in your web applications. After posting Sliding Effect in Jquery , i decided to achieve same kind of functionality of sliding effect in WPF and now in this post i will try to achieve same objective of sliding effects in WPF. Hope you will gain some knowledge from this post as well.
Let us start with our example code. For this example i have similar controls which are used in Sliding Effect in Jquery post, which are the Slide Down, Slide Up and the Toggle button which are used for sliding down, and sliding up and for both slide up and slide down functionality the toggle button is used. But for the control which is used for the sliding is the border control and i have set the background color of the border to black, so that you can see the sliding effect if any of the button is click. I will not paste the xaml for this example as i have attached the sample code and you can download it, the link to download the sample code is given at the end of the post. Here is the code which is used to sliding down effect.

if (brdBorder.Height == 0)
{
DoubleAnimation dblaSlideDown = new  DoubleAnimation();
dblaSlideDown.To = 130;
dblaSlideDown.From = 0;
dblaSlideDown.Duration = new  Duration(TimeSpan.FromSeconds(.5));
Storyboard.SetTargetName(dblaSlideDown,brdBorder.Name);
Storyboard.SetTargetProperty(dblaSlideDown, new  PropertyPath(Border.HeightProperty));

Storyboard strbSlideDown = new  Storyboard();
strbSlideDown.Children.Add(dblaSlideDown);
strbSlideDown.Begin(this);
}

The above code is executed when the Slide Down button is clicked. The first statement in above code is the declaration and initialization of the DoubleAnimation object. Which is used to animate the value of a double property between two target values using linear interpolation over a specified duration. Next i have set the properties of the Double Animation object and here are the list of the important properties of the double animation object which you can use for animations. The following table summarizes how the From, To, and By properties may be used together or separately to determine an animation's target values.(Source)

• From
  The animation progresses from the value specified by the From property to the base value of the property being animated or to a previous animation's output value, depending on how the previous animation is configured.
• From and To
  The animation progresses from the value specified by the From property to the value specified by the To property.

• From and By
  The animation progresses from the value specified by the From property to the value specified by the sum of the From and By properties.
• To
  
  The animation progresses from the animated property's base value or a previous animation's output value to the value specified by the To property.
• By
  
  The animation progresses from the base value of the property being animated or a previous animation's output value to the sum of that value and the value specified by the By property.

From the above list it is clear that you can use two type of combination when using To, From and By properties, either you can use the From an To combination or you can use the From and By combination. If you specify all these three properties then the By property is ignored and the value of the To property is used. After setting the To property the value of 130 and the From property the value 0(zero). Next i have set the property duration, the time at which the animation will be completed or you can say the time for the animation. Next i have set the SetTargetName of the storyBoard object and pass the double animation and the control name to which the animation is applied, and then in next statement i have set the SetTargetProperty of the storyBoard and pass the value of the double animation object and pass the property of to which the animation is applied. Next i have declared and initialize the storyboard object and then assign the double animation abject to the story board object and at the end i have call the begin method of the story board to start the animation.

As you have notice that i have place if condition at the start of the function, the reason of place the if condition there, is to execute the animation only when control has the height 0(zero) other wise no need to animation which is done in jquery, if the control is already shown then the slideDown function will not animate the control.

Here is the sample code used to slide up the control and you can see the code is same as the code for the slide down, except the if condition is place to check the max height of control and if the height is max which i have set for control is 130.

if (brdBorder.Height == 130)
{
DoubleAnimation dblaSlideUp = new  DoubleAnimation();
dblaSlideUp.To = 0;
dblaSlideUp.From = 130;
dblaSlideUp.Duration = new  Duration(TimeSpan.FromSeconds(.5));
Storyboard.SetTargetName(dblaSlideUp,brdBorder.Name);
Storyboard.SetTargetProperty(dblaSlideUp, new  PropertyPath(Border.HeightProperty));

Storyboard strbSlideUp = new  Storyboard();
strbSlideUp.Children.Add(dblaSlideUp);
strbSlideUp.Begin(this);
}

And next thing which is different from the slide down animation is the the to and from property values , which are set to the 0(zero ) the To property value and the 130 the from property value , from where the animation will be started. Rest of the code is same as for the slide down.

For Toggle effect i have call the slide up and slide down function depending on the state of the of the control, which is either hide or show and the call appropriate slide down or slide up function. You can download the source code from here

All and any comments / bugs / suggestions are welcomed!