Freigeben über

Vorgehensweise: Animieren eines Popups

Dieses Beispiel zeigt zwei Möglichkeiten zum Animieren eines Popup Steuerelements.

Beispiel

Das folgende Beispiel setzt die PopupAnimation Eigenschaft auf einen Wert von Slide, welcher bewirkt, dass die Popup eingeschoben wird, wenn sie erscheint.

Um das Popup zu drehen, weist dieses Beispiel einen RotateTransform der Eigenschaft des RenderTransform-Attributs im Canvas zu, welches das untergeordnete Element des Popup ist.

Damit die Transformation ordnungsgemäß funktioniert, muss das Beispiel die AllowsTransparency-Eigenschaft auf true setzen. Darüber hinaus muss das Margin auf dem Canvas so viel Platz angeben, dass sich das Popup drehen kann.

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

Das folgende Beispiel zeigt, wie ein Click-Ereignis, das auftritt, wenn auf ein Button geklickt wird, das Storyboard auslöst, das die Animation startet.

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

Siehe auch