Animation is one of the advanced feature provided by SilverLight/WPF. Lets see how we can use it to animate C1Menu for Silverlight.

Many times you must have gone through websites, where the menu opens with a sliding animation. In this blog, we are going to apply similar animation to C1Menu.

To add animation, we need to edit the default template for C1Menu and modify the Opened VisualState. XAML code mentioned below adds a RenderTransform animation to the ' _contentControl' object holding the menu items:-



<VisualState x:Name="Opened">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="OpenedElement" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation From="0" To="1" BeginTime="00:00:00" Duration="00:00:01.000000" Storyboard.TargetName="_contentControl" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
</DoubleAnimation>
</Storyboard>
</VisualState>





Download the attached sample to see detailed implementation.

Download Sample