Partager via

Comment : mettre un élément en rotation

  • Article

Cet exemple montre comment faire tourner un élément à l’aide d’un RotateTransform et d’un DoubleAnimation.

L’exemple suivant applique la RotateTransformRenderTransform propriété de l’élément. L’exemple utilise un DoubleAnimation pour animer le AngleRotateTransform. Pour faire tourner l’élément en place, l’exemple définit la RenderTransformOrigin propriété de l’élément sur le point (0.5, 0.5).

Exemple

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

Pour obtenir l’exemple complet, qui inclut d’autres exemples de transformation, consultez l’exemple de transformation 2D.

Voir aussi