为C1Menu for Silverlight添加动画显示效果

动画显示效果是Silverlight/WPF平台中一个非常重要的功能。下面我们就来看一看如何为C1Menu for Silverlight添加动画显示效果。
为了添加动画显示效果，我们需要修改C1Menu的默认模板，并修改Opened的VisualState设置。

• 添加第一层菜单项动画效果FirstLevelMenuStyle
  

1.     <VisualState x:Name="Opened">                                       
   
2.         <Storyboard>
   
3.             <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.00100000" Storyboard.TargetName="OpenedElement" Storyboard.TargetProperty="(UIElement.Visibility)">
   
4.                 <DiscreteObjectKeyFrame KeyTime="00:00:00">
   
5.                     <DiscreteObjectKeyFrame.Value>
   
6.                         <Visibility>Visible</Visibility>
   
7.                     </DiscreteObjectKeyFrame.Value>
   
8.                 </DiscreteObjectKeyFrame>
   
9.             </ObjectAnimationUsingKeyFrames>
   
10.             <!—可以修改Duration的值来加快/减慢动画显示速度-->
    
11.             <DoubleAnimation From="0" To="1" BeginTime="00:00:00" Duration="00:00:00.30000" Storyboard.TargetName="AnimationContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
    
12.             </DoubleAnimation>
    
13.         </Storyboard>
    
14.     </VisualState>
    

复制代码

• 非第一层菜单项的动画效果
  

1.     <VisualState x:Name="Opened">
   
2.         <Storyboard>
   
3.             <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="OpenedElement" Storyboard.TargetProperty="(UIElement.Visibility)">
   
4.                 <DiscreteObjectKeyFrame KeyTime="00:00:00">
   
5.                     <DiscreteObjectKeyFrame.Value>
   
6.                         <Visibility>Visible</Visibility>
   
7.                     </DiscreteObjectKeyFrame.Value>
   
8.                 </DiscreteObjectKeyFrame>
   
9.             </ObjectAnimationUsingKeyFrames>                                            
   
10.         <!—可以修改Duration的值来加快/减慢动画显示速度-->
    
11.             <DoubleAnimation From="0" To="1" BeginTime="00:00:00" Duration="00:00:00.300000" Storyboard.TargetName="_contentControl" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
    
12.             </DoubleAnimation>
    
13.         </Storyboard>
    
14.     </VisualState>
    

复制代码

最终效果如下：


源码下载：VS2010 + Silverlight5.0 + ComponentOne Studio for Silverlight 2012V2