Delen via

Procedure: Animatie toevoegen aan een pop-up

  • Artikel

In dit voorbeeld ziet u twee manieren om een Popup controle te animeren.

Voorbeeld

In het volgende voorbeeld wordt de eigenschap PopupAnimation ingesteld op een waarde van Slide, waardoor de Popup bij weergave naar binnen schuift.

Om Popupte draaien, wijst dit voorbeeld een RotateTransform toe aan de RenderTransform-eigenschap van Canvas, dat een kindelement van Popupis.

De transformatie werkt alleen correct als het voorbeeld de eigenschap AllowsTransparency instelt op true. Bovendien moet de Margin op de inhoud van de Canvas voldoende ruimte opgeven om de Popup te draaien.

<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>

In het volgende voorbeeld ziet u hoe een Click gebeurtenis, die optreedt wanneer op een Button wordt geklikt, de Storyboard activeert waarmee de animatie wordt gestart.

<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>

Zie ook