Freigeben über


Gewusst wie: Animieren eines Popups

Aktualisiert: November 2007

In diesem Beispiel werden zwei Möglichkeiten veranschaulicht, ein Popup-Steuerelement zu animieren.

Beispiel

Im folgenden Beispiel wird die PopupAnimation-Eigenschaft auf einen Wert von Slide festgelegt, sodass das Popup in die Ansicht "gleitet".

Um das Popup zu drehen, wird in diesem Beispiel RotateTransform der RenderTransform-Eigenschaft auf dem Canvas-Element zugewiesen, das ein untergeordnetes Element von Popup ist.

Damit die Transformation ordnungsgemäß funktioniert, muss die AllowsTransparency-Eigenschaft im Beispiel auf true festgelegt werden. Außerdem muss der Margin auf dem Canvas-Inhalt genug Platz für das Popup angeben, damit es gedreht werden 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>

Im folgenden Beispiel wird gezeigt, wie ein Click-Ereignis, dass beim Klicken auf ein Button-Element eintritt, 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>

Das vollständige Beispiel finden Sie unter Beispiel für ein animiertes Popup.

Siehe auch

Aufgaben

Beispiel für Ereignistrigger

Konzepte

Übersicht über Popups

Referenz

RenderTransform

BulletDecorator

RotateTransform

Storyboard

Popup

Weitere Ressourcen

Popupbeispiele

Gewusst-wie-Themen zu Popups