Freigeben über

Vorgehensweise: Animieren eines Popups

  • Artikel

Dieses Beispiel zeigt zwei Möglichkeiten, ein Popup-Steuerelement zu animieren.

Beispiel

Im folgenden Beispiel wird die PopupAnimation-Eigenschaft auf einen Wert von Slidefestgelegt, der bewirkt, dass die Popup beim Erscheinen "slide-in" wird.

Um die Popupzu drehen, weist dieses Beispiel der Eigenschaft RenderTransform des Elements Canvas, welches ein untergeordnetes Element von Popupist, eine RotateTransform zu.

Damit die Transformation ordnungsgemäß funktioniert, muss das Beispiel die eigenschaft AllowsTransparency auf truefestlegen. Darüber hinaus muss im Canvas-Inhalt genügend Platz für Margin angegeben werden, damit sich die 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 ein Button geklickt wird, die Storyboard auslöst, welche die Animation in Gang setzt.

<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