动画显示效果是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