Comment : animer un Popup
Mise à jour : novembre 2007
Cet exemple montre deux façons d'animer un contrôle Popup.
Exemple
L'exemple de code suivant affecte à la propriété PopupAnimation la valeur Slide qui provoque le « glissement » du Popup lorsqu'il apparaît.
Afin de faire pivoter le Popup, cet exemple affecte un RotateTransform à la propriété RenderTransform de la Canvas, qui est l'élément enfant du Popup.
Pour que la transformation fonctionne correctement, la propriété AllowsTransparency de l'exemple doit avoir la valeur true. En outre, la Margin du contenu de la Canvas doit prévoir un espace suffisant pour permettre la rotation du 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>
L'exemple suivant montre comment un événement Click qui se produit lors d'un clic sur le Button, déclenche le Storyboard qui démarre l'animation.
<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>
Pour l'exemple complet, consultez Popup animé, exemple.
Voir aussi
Tâches
Déclencheurs d'événements, exemple