如何:对 Popup 进行动画处理

更新:2007 年 11 月

本示例演示对 Popup 控件进行动画处理的两种方法。

示例

下面的示例将 PopupAnimation 属性设置为 Slide 值,这会导致 Popup 以“滑入”的方式出现。

为了旋转 Popup,本示例将 RotateTransform 指定给 Popup 的子元素 CanvasRenderTransform 属性。

为了使变换正确工作,本示例必须将 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>

有关完整示例,请参见 动画弹出窗口示例

请参见

任务

事件触发器示例

概念

Popup 概述

参考

RenderTransform

BulletDecorator

RotateTransform

Storyboard

Popup

其他资源

Popup 示例

Popup 帮助主题