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>
如需完整範例,請參閱動畫快顯功能表範例。