Windows Phone 7 rotation animation (rotatetransform)

The so-called rotatetransform is an element that rotates with a coordinate point as the center point. When using the rotatetransform, you must pay attention to two points: the center) and angle ).

In this example, we set a rotation based on angle changes and a rotation based on time changes.

    <  Grid  X: Name  = "Contentpanel"  Grid. Row  = "1"  Margin  = "12, 0, 12, 0"  >  
  <  Grid. rowdefinitions >  
  <  Rowdefinition  Height  = "*"     />  
  <  Rowdefinition  Height  = "*"     />  
  < Rowdefinition  Height  = "Auto"     />  
  </  Grid. rowdefinitions  >  

  <  Textblock  Grid. Row  = "0"  
Text  = "Frame-based" 
Fontsize  ="  {Staticresource phonefontsizelarge}  "  
Horizontalalignment  = "Center"  
Verticalalignment  = "Center"  
Rendertransformorigin  = "0.5 0.5"  >  
  <  Textblock. rendertransform >  
  <  Rotatetransform  X: Name  = "Rotate1"     />  
  </  Textblock. rendertransform  >  
  </  Textblock  >  

 <  Textblock  Grid. Row  = "1"  
Text  = "Time-based"  
Fontsize  ="  {Staticresource phonefontsizelarge}  "  
Horizontalalignment  = "Center"  
Verticalalignment  = "Center" 
Rendertransformorigin  = "0.5 0.5"  >  
  <  Textblock. rendertransform  >  
  <  Rotatetransform  X: Name  = "Rotate2"     />  
  </ Textblock. rendertransform  >  
  </  Textblock  >  

  <  Button  Grid. Row  = "2"  
Content  = "Pause for 5 seconds"  
Horizontalalignment  = "Center" 
Click  = "Onbuttonclick"     />  
  </  Grid  > 

 Using  System;
  Using  System. Threading;
  Using  System. windows;
  Using  System. Windows. Media;
 Using  Microsoft. Phone. controls;

  Namespace  Framebasedvstimebased
{
  Public     Partial     Class  Mainpage: phoneapplicationpage
{
Datetime starttime;

  Public  Mainpage ()
{
Initializecomponent ();

Starttime  = Datetime. now;
Compositiontarget. Rendering  + =  Oncompositiontargetrendering;
  //  When this event occurs, there is a visual framework that can be used to render the Silverlight content graph.
  //  Then, you can processProgramModifies the visual object of an application or any other content at a frame.  
  }

  Void  Oncompositiontargetrendering (  Object  Sender, eventargs ARGs)
{
 //  Frame-based  
  Rotate1.angle  =  (Rotate1.angle  +     0.2  )  %     360  ;  //  Set clockwise rotation angle

  // Time-based  
  Timespan elapsedtime  =  Datetime. Now  -  Starttime;
Rotate2.angle  =  (Elapsedtime. totalminutes  *     360  )  %     360 ;
}
  //  Pause for 5 seconds  
    Void  Onbuttonclick (  Object  Sender, routedeventargs ARGs)
{
Thread. Sleep (  5000  );
}
}
}