Comment : animer un Popup

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>

Voir aussi

Référence

RenderTransform

BulletDecorator

RotateTransform

Storyboard

Popup

Concepts

Vue d'ensemble de Popup

Autres ressources

Rubriques "Comment" relatives aux menus contextuels