如何:对弹出窗口进行动画处理
此示例演示了对 Popup 控件进行动画处理的两种方法。
例
以下示例将 PopupAnimation 属性设置为 Slide值,这会导致 Popup 在出现时“滑动进入”。
为了旋转 Popup,此示例将 RotateTransform 分配给 Canvas上的 RenderTransform 属性,该属性是 Popup的子元素。
若要使转换正常工作,该示例必须将 AllowsTransparency 属性设置为 true
。 此外,Canvas 上的 Margin 内容必须指定足够的空间才能使 Popup 旋转。
<Popup IsOpen="{Binding ElementName=myCheckBox,Path=IsChecked}"
PlacementTarget="{Binding ElementName=myCheckBox}"
AllowsTransparency="True"
PopupAnimation="Slide"
HorizontalOffset="50"
VerticalOffset="50"
>
<!--The Margin set on the Canvas provides the additional
area around the Popup so that the Popup is visible when
it rotates.-->
<Canvas Width="100" Height="100" Background="DarkBlue"
Margin="150">
<Canvas.RenderTransform>
<RotateTransform x:Name="theTransform" />
</Canvas.RenderTransform>
<TextBlock TextWrapping="Wrap" Foreground="White">
Rotating Popup
</TextBlock>
</Canvas>
</Popup>
以下示例演示单击 Button 时发生的 Click 事件如何触发启动动画的 Storyboard。
<Button HorizontalAlignment="Left" Width="200" Margin="20,10,0,0">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="theTransform"
Storyboard.TargetProperty="(RotateTransform.Angle)"
From="0" To="360" Duration="0:0:5" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
Click to see the Popup animate
</Button>