방법: Popup에 애니메이션 효과 주기
이 예제에서는 Popup 컨트롤에 애니메이션 효과를 주는 두 가지 방법을 보여 줍니다.
예제
다음 예제에서는 PopupAnimation 속성을 Slide 값으로 설정하여 Popup이 나타날 때 "슬라이드 인" 효과를 적용합니다.
Popup을 회전하기 위해 이 예제에서는 Popup의 자식 요소인 Canvas의 RenderTransform 속성에 RotateTransform을 할당합니다.
제대로 변환이 수행되려면 이 예제에서 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>