Como: Animar um Popup
Este exemplo mostra duas maneiras para animar um controle Popup.
Exemplo
O exemplo a seguir define a propriedade PopupAnimation com o valor de Slide, que faz com que o Popup "deslize para dentro" quando ele aparecer.
Para girar o Popup, este exemplo atribui uma RotateTransform para a propriedade RenderTransform no Canvas, que é o elemento-filho do Popup.
Para que a transformação funcione corretamente, o exemplo deve definir a propriedade AllowsTransparency como true. Além disso, a Margin no conteúdo do Canvas deve especificar espaço suficiente para que o Popup gire.
<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>
O exemplo a seguir mostra como um evento Click, que ocorre quando um Button é clicado, dispara o Storyboard que inicia a animação.
<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>
For the complete sample, see Exemplo de Popup animado.
Consulte também
Tarefas
Exemplo de disparadores de eventos