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

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

发布于 2012/11/16 00:00

ComponentOne Enterprise

动画显示效果是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>
复制代码

最终效果如下：

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

ComponentOne Enterprise | 下载试用

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台，并完美集成于 Visual Studio 的第三方控件集，包含 300 多种 .NET开发控件，提供表格数据管理、数据可视化、报表和文档、日程安排、输入和编辑、导航和布局、系统提升工具等七大功能，被誉为“.NET开发的‘瑞士军刀’”。

ComponentOne 为您提供专业的产品咨询服务，并由技术支持工程师为您1对1解答。>> 发帖提问

ComponentOne Enterprise | 下载试用

ComponentOne Enterprise

葡萄城热门产品