共用方式為


HOW TO:建立快顯功能表的動畫

更新:2007 年 11 月

本範例會顯示兩個方式來建立 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>

下列範例顯示 Click 事件 (在按一下 Button 時發生) 如何觸發 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>

如需完整範例,請參閱動畫快顯功能表範例

請參閱

工作

事件觸發程序範例

概念

快顯功能表概觀

參考

RenderTransform

BulletDecorator

RotateTransform

Storyboard

Popup

其他資源

Popup 範例

Popup HOW TO 主題