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!

Color Animation Using Expression Blend

In this post I will show you how you can create color animation using the expression blend. This is also my first time that I have created animation using the expression blend, before this I used to create the animation using the code behind file which is the C#. For your information this is also my first time color animation. So I want to share this with you , how to create the color animation using expression blend.
Let us start with our example I have a simple window Which consist of a border control and I want to change the background color and the border color of the border color to change. Here is the main window of my color animation.

Next I have to add the story board for my color animation. For this you can press F6 to switch between the Animation Workspace and the Design Workspace. Now when you press F6 you will see the Animation workspace and below is the animation workspace. You can add new story board, close and event delete the story board. In the below image you can see all the possible option for the story board creation to delete as well.

Next is I have move the playhead to a location in the timeline where you want a property change to occur. I have move the play head to the .500 where I want the back ground and the border of the border color to be changed. By placing the play head to the .500 I have set the back ground color to the gradient color and the border color to the white. And here the is the look of the border control at time .5000, you can see that I have set the background and the border of the border color.

I have set the repeat behavior of the story board to forever and auto reverse to false. When you press the play button of the story board it will run the you will see the color change form the original set color to the new gradient color. I have also created a busy control for myself and I have share with you, so that if you need it you can use it in your project. The main window contain two button one is for the simple animation and second one is for the busy bar which is useful when you perform work in the background and show this animation to show user that application is performing work in the background. Here is the output of my busy bar window.

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!