Animation of Expander Control in Expand/Collapsed Event

During exploring of the WPF I have work for the expander control when expander control is expanded then apply some sort of animation and when the expander control is Collapsed then same animation is executed in same order. I have successfully applied animation in the expanded event of the expander but couldn't perform any sort of animation when the expander is collapsed. Then I have search on google about the collapsed animation on the expander control and I have find such a nice solution about Collapsed animation and you can says the structure of the expander. Now I will share this work with you, for this example I have expander control and I have used the Expression Dark theme from CodePlex. I have only used the expander control template from the expression Dark theme and remove other control template from the expression dark theme. Here is the expander control when it is expanded.

By Reading the article, I have made the following changes in the expander control template which is found in the expression dark theme. As the ContentPresenter is placed inside the border control so, I have removed the Visible attribute of the border and set the height of the border to 0(zero), Below is the xaml of the border control which is used in the expander template.

<Border Background="{DynamicResource ShadeBrush}" BorderBrush="{DynamicResource NormalBorderBrush}" BorderThickness="1,1,1,1"  CornerRadius="3,3,3,3" Margin="1,1,1,1" x:Name="border"/>

Then in the control template trigger remove the blow line of xaml which is used to set the visibility of the border to visible and add the enterAction and the exit action of the trigger which are used to begin two different story boards.

<Trigger Property="IsExpanded" Value="true">
<Setter Property="Visibility" TargetName="border" Value="Visible"/>
</Trigger>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource strbExpand/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource strbCollapse}"/>
</Trigger.ExitActions>

And here are the two story boards which are in the control template resource. the strExpand which is used to increase the height of the border and the strbCollapse which is used to decrease the height of the border.

<ControlTemplate.Resources>
<Storyboard x:Key="strbExpand">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(FrameworkElement.Height)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1200000" Value="100"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="strbCollapse">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(FrameworkElement.Height)">
<SplineDoubleKeyFrame KeyTime="00:00:0" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1200000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!