Condividi tramite

Procedura: Animare un popup

In questo esempio vengono illustrati due modi per animare un controllo Popup.

Esempio

Nell'esempio seguente la proprietà PopupAnimation viene impostata su un valore di Slide, che fa sì che il Popup scivoli dentro quando viene visualizzato.

Per ruotare il Popup, in questo esempio viene assegnato un RotateTransform alla proprietà RenderTransform nella Canvas, ovvero l'elemento figlio dell'Popup.

Affinché la trasformazione funzioni correttamente, l'esempio deve impostare la proprietà AllowsTransparency su true. Inoltre, il Margin sul contenuto Canvas deve specificare spazio sufficiente affinché il Popup possa ruotare.

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

L'esempio seguente mostra come un evento Click, che si verifica cliccando su un Button, inneschi il 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

  • Last updated on