Compartir a través de

Cómo: Hacer que un elemento gire en su posición

  • Artículo

En este ejemplo se muestra cómo hacer que un elemento gire mediante RotateTransform y DoubleAnimation.

En el ejemplo siguiente se aplica RotateTransform a la propiedad RenderTransform del elemento. En el ejemplo se usa DoubleAnimation para animar el Angle de RotateTransform. Para que el elemento gire sobre sí mismo, en el ejemplo se establece la propiedad RenderTransformOrigin del elemento en el punto (0.5, 0.5).

Ejemplo

<!-- RotateAboutCenterExample.xaml
     This example shows how to make an element spin
     about its center. -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Animation.RotateAboutCenterExample" 
  WindowTitle="Rotate About Center Example">    
  <StackPanel Margin="50">
    
    <Button
      RenderTransformOrigin="0.5,0.5"
      HorizontalAlignment="Left">
        Hello,World
      <Button.RenderTransform>
        <RotateTransform x:Name="MyAnimatedTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedTransform"
                Storyboard.TargetProperty="(RotateTransform.Angle)"
                From="0.0" To="360" Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button> 
  </StackPanel> 
</Page>

Para obtener el ejemplo completo, que incluye más ejemplos de transformación, vea Ejemplo de transformaciones 2D.

Vea también