Implementation of three-dimensional rotation animation for Windows Phone 7

Storyboard. targetproperty indicates to get or set the name of the property to be animated. By setting the storyboard. targetproperty attribute, you can easily implement the three-dimensional rotation of the X axis, Y axis, and Z axis.

Storyboard. targetproperty = "rotationx" indicates rotating along the X axis

Storyboard. targetproperty = "rotationy" indicates rotating along the Y axis

Storyboard. targetproperty = "rotationz" indicates rotating along the Z axis

The following is an example of a three-dimensional rotation:

 <  Phone: phoneapplicationpage
  X: Class  = "Perspectiverotation. mainpage"  
Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
Xmlns: x = "Http://schemas.microsoft.com/winfx/2006/xaml"  
Xmlns: Phone  = "CLR-namespace: Microsoft. Phone. controls; Assembly = Microsoft. Phone"  
Xmlns: Shell  = "CLR-namespace: Microsoft. Phone. Shell; Assembly = Microsoft. Phone"  
Xmlns: d  = "Http://schemas.microsoft.com/expression/blend/2008"  
Xmlns: MC  = "Http://schemas.openxmlformats.org/markup-compatibility/2006"  
MC: ignorable  = "D" D: designwidth  = "480"  D: designheight  = "768"  
Fontfamily  ="  {Staticresource phonefontfamilynormal}  "  
Fontsize  ="  {Staticresource phonefontsizenormal}  "  
Foreground  ="  {Staticresource phoneforegroundbrush} "  
Supportedorientations  = "Portraitorlandscape"  Orientation  = "Portrait"  
Shell: systemtray. isvisible  = "True"  >  

  <  Phone: phoneapplicationpage. Resources  >  
  <  Storyboard X: Name  = "Rotatex"  >  <! --  Plane rotating along the X axis  -->  
  <  Doubleanimation  Storyboard. targetname  = "Planeprojection"  
Storyboard. targetproperty  = "Rotationx"  
From  = "0" To  = "360"  Duration  = "0: 5"     />  
  </  Storyboard  >  
  <  Storyboard  X: Name  = "Rotatey"  >  <! -- Plane rotating along Y axis  -->  
  <  Doubleanimation  Storyboard. targetname  = "Planeprojection"  
Storyboard. targetproperty  = "Rotationy"  
From  = "0"  To  = "360"  Duration  = "0: 5"    />  
  </  Storyboard  >  
  <  Storyboard  X: Name  = "Rotatez"  >  <! --  Plane rotating along the Z axis  -->  
  < Doubleanimation  Storyboard. targetname  = "Planeprojection"  
Storyboard. targetproperty  = "Rotationz"  
From  = "0"  To  = "360"  Duration  = "0: 5"     />  
  </ Storyboard  >  
  </  Phone: phoneapplicationpage. Resources  >  

  <! --  Layoutroot is the root grid where all page content is placed  -->  
  <  Grid  X: Name  = "Layoutroot" Background  = "Transparent"  >  
  <  Grid. rowdefinitions  >  
  <  Rowdefinition  Height  = "Auto"  />  
  <  Rowdefinition  Height = "*"  />  
  </  Grid. rowdefinitions  >  

  <! --  Titlepanel contains the name of the application and page title  -->  
  <  Stackpanel  X: Name  = "Titlepanel"  Grid. Row = "0"  Margin  ="  >  
  <  Textblock  X: Name  = "Applicationtitle"  Text  = "Three-dimensional rotation"  Style  ="  {Staticresource phonetextnormalstyle}  "  /> 
  </  Stackpanel  >  

  <! --  Contentpanel-place additional content here  -->  
  <  Grid  X: Name  = "Contentpanel"  Grid. Row  = "1"  Margin = "12, 0, 12, 0"  >  
  <  Grid. rowdefinitions  >  
  <  Rowdefinition  Height  = "*"     />  
  <  Rowdefinition  Height = "Auto"     />  
  </  Grid. rowdefinitions  >  

  <  Grid. columndefinitions  >  
  <  Columndefinition  Width  = "*"    />  
  <  Columndefinition  Width  = "*"     />  
  <  Columndefinition  Width  = "*"     />  
  </ Grid. columndefinitions  >  

  <  Textblock  Name  = "Txtblk"  
Grid. Row  = "0"  Grid. Column  = "0"  Grid. columnspan  = "3"  
Text  = "Oh, my God" 
Fontsize  = "70"  
Foreground  ="  {Staticresource phoneaccentbrush}  "  
Horizontalalignment  = "Center"  
Verticalalignment  = "Center"  >  
  <  Textblock. Projection >  
  <  Planeprojection  X: Name  = "Planeprojection"     />  
  </  Textblock. Projection  >  
  </  Textblock  >  

 <  Button  Grid. Row  = "1"  Grid. Column  = "0"  
Content  = "Rotate-X axis"  
Click  = "Rotatexclick"     />  

  <  Button  Grid. Row = "1"  Grid. Column  = "1"  
Content  = "Rotate-Y axis"  
Click  = "Rotateyclick"     />  

  <  Button  Grid. Row  = "1"  Grid. Column  = "2" 
Content  = "Rotate-Z axis"  
Click  = "Rotatezclick"     />  
  </  Grid  >  
  </  Grid  >  

  </ Phone: phoneapplicationpage  > 

 Using  System;
  Using  System. windows;
  Using  Microsoft. Phone. controls;

  Namespace  Perspectiverotation
{
  Public     Partial     Class Mainpage: phoneapplicationpage
{
  Public  Mainpage ()
{
Initializecomponent ();
}
  //  Rotate along the X axis  
    Void  Rotatexclick (  Object  Sender, routedeventargs ARGs)
{
Rotatex. Begin ();
}
  //  Rotate along Y axis  
   Void  Rotateyclick (  Object  Sender, routedeventargs ARGs)
{
Rotatey. Begin ();
}
  //  Rotate along Z axis  
    Void  Rotatezclick (  Object  Sender, routedeventargs ARGs)
{
Rotatez. Begin ();
}
}
}