Jquery Accordion Using WPF Animation

While seeing many of the jquery animations I have tried every animation of the jquery in WPF, as I am currently working in WPF, this help me a lot learning the WPF by implementing the jquery animation in WPF.In this post I have implemented the Accordion animation of the jquery in WPF. Here is the main screen of the example code which is similar to the original link you can check it as well. I have made is very simple as you can see I didn't place any detail of the sections.

Let me explain the example code. From the main screen if you look at the xaml of the main form you can see that I have added a stack panel and then I have added a grid control which has three rows. each row consist of the border and a stack panel.When the border is clicked the corresponding stack panel in the same row is set the maximum height. And the Grid is kept in the stack panel control. This what I have on the xaml side of the application. Now come to the code behind file which is cs file in this case as I am using the C# language for this application. First I have Stack panel object which is used to save the previous stack panel, as when the animation begin the previous stack panel which have maximum height is decrease to the minimum height which is 0(zero). Then I have local variable which is used to save the maximum height of the stack panel. Here is the code which is used to animate the current stack panel, if you click the any of the section label or blue strip then then the animation start ,increasing the height of the current stack panel and decreasing the height of the previous stack panel.

private void AnimateCurrentStackPanel(StackPanel pspnlCurrentPanel)
{
DoubleAnimation dblaCurrentStack = new DoubleAnimation();
dblaCurrentStack.From = 0;
dblaCurrentStack.To = dblStackPanelHeight;
dblaCurrentStack.Duration = new Duration(TimeSpan.FromMilliseconds(200));

Storyboard strbCurrentStoryBoard = new Storyboard();
strbCurrentStoryBoard.Children.Add(dblaCurrentStack);
Storyboard.SetTarget(dblaCurrentStack, pspnlCurrentPanel);
Storyboard.SetTargetProperty(dblaCurrentStack, new PropertyPath(StackPanel.HeightProperty));

if (spnlPreviousStackPanel != null)
    AnimatePreviouseStackPanel();

 strbCurrentStoryBoard.Begin();
 spnlPreviousStackPanel = pspnlCurrentPanel;
}

You can see in the AnimateCurrentStackPanel function that this function will increase the height of the current panel which is passed to this function and before the story board begin I have place the if condition to check the previous stack panel object if it is not null, then call the AnimationPresiousStackPanel function which is used to decrease the height of the previosue stack panel. When the application run for the first time , as I have set the maximum height of the first section so in the constructor of the form I have assign the spnlFirstSection to the previous stack panel object. And here is the definition of the AnimatePreviouiseStackPanel. Which is used to decrease the height of the previouse stack panel.

private void AnimatePreviouseStackPanel()
{
   DoubleAnimation dblaPreviouseStack = new DoubleAnimation();
   dblaPreviouseStack.From = dblStackPanelHeight;
   dblaPreviouseStack.To = 0;
   dblaPreviouseStack.Duration = new Duration(TimeSpan.FromMilliseconds(200));

   Storyboard strbPreviousStoryBoard = new Storyboard();
   strbPreviousStoryBoard.Children.Add(dblaPreviouseStack);

   Storyboard.SetTarget(dblaPreviouseStack, spnlPreviousStackPanel);
   Storyboard.SetTargetProperty(dblaPreviouseStack, new PropertyPath(StackPanel.HeightProperty));

   strbPreviousStoryBoard.Begin();
}

I hope that you got some understanding of the accordion animation of the jquery will be used in the WPF application.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!