다음을 통해 공유

방법: 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>

참고 항목