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

Actualización: noviembre 2007

En este ejemplo se muestra cómo hacer girar un elemento mediante una clase RotateTransform y una clase DoubleAnimation.

En el ejemplo siguiente se aplica RotateTransform a la propiedad RenderTransform del elemento. En el ejemplo se utiliza DoubleAnimation para animar la propiedad Angle de RotateTransform. Para hacer que el elemento gire en su posición, 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="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://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 transformaciones, vea Ejemplo 2-D Transforms.

Vea también

Conceptos

Información general sobre animaciones

Información general sobre transformaciones