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

  • 添加第一层菜单项动画效果FirstLevelMenuStyle
  1.     
    <VisualState x:Name="Opened">                                        
            <Storyboard>
                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.00100000" Storyboard.TargetName="OpenedElement" Storyboard.TargetProperty="(UIElement.Visibility)">
                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <!—可以修改Duration的值来加快/减慢动画显示速度-->
                <DoubleAnimation From="0" To="1" BeginTime="00:00:00" Duration="00:00:00.30000" Storyboard.TargetName="AnimationContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                </DoubleAnimation>
            </Storyboard>
        </VisualState>
    复制代码
     
  • 非第一层菜单项的动画效果
  1.  
    <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>                                            
            <!—可以修改Duration的值来加快/减慢动画显示速度-->
                <DoubleAnimation From="0" To="1" BeginTime="00:00:00" Duration="00:00:00.300000" Storyboard.TargetName="_contentControl" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
                </DoubleAnimation>
            </Storyboard>
        </VisualState>
    复制代码
    最终效果如下:


    源码下载:VS2010 + Silverlight5.0 + ComponentOne Studio for Silverlight 2012V2
MenuAnimation.zip (31.62 K, 下载次数:55)