Condividi tramite


Procedura: animare un controllo Popup

In questo esempio vengono mostrati due metodi per animare un controllo Popup.

Esempio

Nell'esempio seguente, la proprietà PopupAnimation viene impostata su un valore Slide, che determina lo scorrimento del controllo Popup nel momento in cui viene visualizzato.

Per ruotare il controllo Popup, nell'esempio viene assegnato un oggetto RotateTransform alla proprietà RenderTransform relativa all'oggetto Canvas, ovvero l'elemento figlio di Popup.

Affinché la trasformazione sia eseguita correttamente, la proprietà AllowsTransparency dell'esempio deve essere impostata su true. Inoltre, l'oggetto Margin applicato a Canvas deve specificare uno spazio sufficiente per la rotazione di 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>

Nell'esempio seguente viene mostrato come un evento Click, che si verifica quando si fa clic su un oggetto Button, attivi l'oggetto Storyboard che avvia l'animazione.

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

Vedere anche

Riferimenti

RenderTransform

BulletDecorator

RotateTransform

Storyboard

Popup

Concetti

Cenni preliminari sul controllo Popup

Altre risorse

Procedure relative ai popup