How to: Make an Element Spin in Place
.NET Framework 4
This example shows how to make an element spin by using a RotateTransform and a DoubleAnimation.
The following example applies the RotateTransform to the RenderTransform property of the element. The example uses a DoubleAnimation to animate the Angle of the RotateTransform. To make the element spin in place, the example sets the RenderTransformOrigin property of the element to the point (0.5, 0.5).
<!-- 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>
For the complete sample, which includes more transformation examples, see 2-D Transforms Sample.
