Cómo: Animar un control Popup
Actualización: noviembre 2007
En este ejemplo se muestran dos maneras de animar un control Popup.
Ejemplo
En el ejemplo siguiente se establece la propiedad PopupAnimation en un valor de Slide, lo que hace que el control Popup se "deslice" al aparecer.
Para girar Popup, en este ejemplo se asigna una transformación RotateTransform a la propiedad RenderTransform de Canvas, que es el elemento secundario de Popup.
Para que la transformación funcione correctamente, en el ejemplo se debe establecer la propiedad AllowsTransparency en true. Además, la propiedad Margin del contenido de Canvas debe especificar espacio suficiente para que 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>
En el ejemplo siguiente se muestra el modo en que un evento Click, que se provoca al hacer clic en Button, activa el objeto Storyboard que inicia la animación.
<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>
Para obtener el ejemplo completo, vea Ejemplo Animated Popup.
Vea también
Tareas
Conceptos
Información general sobre el control Popup