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

 动画显示效果是Silverlight/WPF平台中一个非常重要的功能。下面我们就来看一看如何为C1Menu for Silverlight添加动画显示效果。

为了添加动画显示效果,我们需要修改C1Menu的默认模板,并修改Opened的VisualState设置。

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

    <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>

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

    <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>

为C1Menu for Silverlight添加动画显示效果_第1张图片

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

 

你可能感兴趣的:(C1Menu)