Cómo: Animar un control Popup

  • Artículo

En este ejemplo se muestran dos maneras de animar un control Popup.

Ejemplo

En el ejemplo siguiente se establece la propiedad PopupAnimation en un valor de Slide, lo que hace que el elemento Popup se "deslice" cuando aparezca.

Para rotar Popup, en este ejemplo se asigna un elemento RotateTransform a la propiedad RenderTransform en Canvas, que es el elemento secundario de Popup.

Para que la transformación funcione correctamente, el ejemplo debe establecer la propiedad AllowsTransparency en true. Además, el elemento Margin en el contenido Canvas debe especificar suficiente espacio para que Popup pueda girar.

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

En el ejemplo siguiente se muestra cómo un evento Click, que se produce cuando se hace clic en Button, desencadena el objeto Storyboard que inicia la animación.

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

Vea también