sdk/samples/WPFSamples/SamplesGallery/csharp/samps/animaterotate_samp.xaml

   1 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   2       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   3       Title="Animate Rotation"
   4       x:Class="AnimateRotate.Page1"
   5       Loaded="checkLang">
   6
   7
   8 <TabControl MinHeight="500" MaxHeight="700" MinWidth="400">
   9         <TabItem Style="{StaticResource TabStyle}" Header="Animate Rotation Sample" IsSelected="true">
  10           <StackPanel>
  11             <TextBlock Style="{StaticResource HeaderStyle}">Animate Rotation Sample</TextBlock>
  12
  13             <TextBlock Style="{StaticResource mainContentStyle}">This example demonstrates rotation animations.</TextBlock>
  14
  15           </StackPanel>
  16         </TabItem>
  17
  18         <TabItem Name="xaml" Style="{StaticResource TabStyle}" Header="XAML">
  19 <ScrollViewer>
  20           <TextBlock Name="xamlCheck" Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve"><![CDATA[
  21  <StackPanel>
  22      <Canvas Width="400" Height="550">
  23
  24        <Rectangle Canvas.Top="100" Canvas.Left="100" Fill="Blue" Width="50" Height="50" Stroke="black"
  25           StrokeThickness="5" Opacity="0.25" />
  26        <Rectangle Canvas.Top="250" Canvas.Left="100" Fill="Blue" Width="50" Height="50" Stroke="black"
  27           StrokeThickness="5" Opacity="0.25" />
  28        <Rectangle Canvas.Top="400" Canvas.Left="100" Fill="Blue" Width="50" Height="50" Stroke="black"
  29           StrokeThickness="5" Opacity="0.25" />
  30
  31        <Rectangle Name="myRotatedFromCenterRectangle"
  32           Canvas.Top="100" Canvas.Left="100" Fill="blue"
  33           Width="50" Height="50" Stroke="black"
  34           StrokeThickness="5">
  35           <Rectangle.RenderTransform>
  36             <RotateTransform Angle="0" Center="25,25" />
  37           </Rectangle.RenderTransform>
  38        </Rectangle>
  39        <Rectangle Name="myRotatedFromLeftEdgeRectangle"
  40           Canvas.Top="250" Canvas.Left="100" Fill="blue"
  41           Width="50" Height="50" Stroke="black"
  42           StrokeThickness="5">
  43           <Rectangle.RenderTransform>
  44             <RotateTransform Angle="0" Center="0,0" />
  45           </Rectangle.RenderTransform>
  46        </Rectangle>
  47
  48        <Rectangle Name="myRotatedFromAnimatedCenterRectangle"
  49           Canvas.Top="400" Canvas.Left="100" Fill="blue"
  50           Width="50" Height="50" Stroke="black"
  51           StrokeThickness="5">
  52        <Rectangle.RenderTransform>
  53            <RotateTransform Angle="0" Center="0,0" />
  54          </Rectangle.RenderTransform>
  55        </Rectangle>
  56      </Canvas>
  57
  58      <StackPanel Orientation="Horizontal">
  59         <StackPanel.Triggers>
  60            <EventTrigger SourceName="startButton" RoutedEvent="Button.Click">
  61               <BeginStoryboard Name="myBeginStoryboard">
  62                  <Storyboard Name="myStoryboard">
  63                     <DoubleAnimation Storyboard.TargetName="myRotatedFromCenterRectangle"
  64                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
  65                        From="0" To="360" RepeatBehavior="Forever" Duration="0:0:4"/>
  66                     <DoubleAnimation Storyboard.TargetName="myRotatedFromLeftEdgeRectangle"
  67                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
  68                        From="0" To="360" RepeatBehavior="Forever" Duration="0:0:4"/>
  69                     <DoubleAnimation Storyboard.TargetName="myRotatedFromAnimatedCenterRectangle"
  70                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
  71                        From="0" To="360" RepeatBehavior="4x" Duration="0:0:4" />
  72                     <DoubleAnimation Storyboard.TargetName="myRotatedFromAnimatedCenterRectangle"
  73                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.CenterX)"
  74                        From="0" To="50" Duration="0:0:16" />
  75                     <DoubleAnimation Storyboard.TargetName="myRotatedFromAnimatedCenterRectangle"
  76                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.CenterY)"
  77                        From="0" To="50" Duration="0:0:16" />
  78                  </Storyboard>
  79               </BeginStoryboard>
  80           </EventTrigger>
  81
  82           <EventTrigger SourceName="pauseButton" RoutedEvent="Button.Click" >
  83              <PauseStoryboard BeginStoryboardName="myBeginStoryboard">
  84              </PauseStoryboard>
  85           </EventTrigger>
  86
  87           <EventTrigger RoutedEvent="Button.Click" SourceName="restartButton">
  88              <ResumeStoryboard BeginStoryboardName="myBeginStoryboard">
  89              </ResumeStoryboard>
  90           </EventTrigger>
  91
  92           <EventTrigger RoutedEvent="Button.Click" SourceName="stopButton">
  93              <StopStoryboard BeginStoryboardName="myBeginStoryboard">
  94              </StopStoryboard>
  95           </EventTrigger>
  96
  97         </StackPanel.Triggers>
  98         <Button Name="startButton">Start
  99         </Button>
 100         <Button Name="restartButton">Restart
 101         </Button>
 102         <Button Name="pauseButton">Pause
 103         </Button>
 104         <Button Name="stopButton">Stop
 105         </Button>
 106       </StackPanel>
 107    </StackPanel>
 108 ]]>
 109
 110
 111           </TextBlock>
 112 </ScrollViewer>
 113         </TabItem>
 114         <TabItem Name="xamlcsharp" Style="{StaticResource TabStyle}" Header="XAML + C#">
 115           <TabControl TabStripPlacement="Right">
 116             <TabItem Name="xcsharpCheck" Style="{StaticResource TabStyle2}" Header="XAML"></TabItem>
 117
 118             <TabItem Style="{StaticResource TabStyle2}" Header="C#"></TabItem>
 119           </TabControl>
 120         </TabItem>
 121
 122         <TabItem Name="xamlvb" Style="{StaticResource TabStyle}" Header="XAML + Visual Basic.NET">
 123           <TabControl TabStripPlacement="Right">
 124             <TabItem Name="xvbCheck" Style="{StaticResource TabStyle2}" Header="XAML"></TabItem>
 125             <TabItem Style="{StaticResource TabStyle2}" Header="VB.NET"></TabItem>
 126           </TabControl>
 127         </TabItem>
 128         <TabItem Name="csharp" Style="{StaticResource TabStyle}" Header="C#"></TabItem>
 129
 130         <TabItem Name="vb" Style="{StaticResource TabStyle}" Header="Visual Basic.NET"></TabItem>
 131
 132         <TabItem Name="managedcpp" Style="{StaticResource TabStyle}" Header="Managed C++"></TabItem>
 133
 134         <TabItem Style="{StaticResource TabStyle}" Header="Preview Sample">
 135 <!-- AnimatedRotationExample.xaml
 136      This example shows how to animate the angle of RotateTransform objects. -->
 137 <Canvas> <!--Storyboards moved to root-->
 138    <StackPanel>
 139    <Canvas Width="400" Height="550">
 140
 141      <!-- Mark the original, non-animated positions of the three rectangles -->
 142      <Rectangle Canvas.Top="100" Canvas.Left="100" Fill="Blue" Width="50" Height="50" Stroke="black"
 143         StrokeThickness="5" Opacity="0.25" />
 144      <Rectangle Canvas.Top="250" Canvas.Left="100" Fill="Blue" Width="50" Height="50" Stroke="black"
 145         StrokeThickness="5" Opacity="0.25" />
 146      <Rectangle Canvas.Top="400" Canvas.Left="100" Fill="Blue" Width="50" Height="50" Stroke="black"
 147         StrokeThickness="5" Opacity="0.25" />
 148
 149     <!-- Create the rectangles to animate. -->
 150     <Rectangle Name="myRotatedFromCenterRectangle"
 151       Canvas.Top="100" Canvas.Left="100" Fill="blue"
 152       Width="50" Height="50" Stroke="black"
 153       StrokeThickness="5">
 154       <Rectangle.RenderTransform>
 155
 156          <!-- Set the center of this RotateTransform to the
 157               center of the rectangle so that the
 158               rectangle appears to rotate about its center
 159               when the animation is applied. -->
 160          <RotateTransform Angle="0" CenterX="25" CenterY="25" />
 161       </Rectangle.RenderTransform>
 162     </Rectangle>
 163
 164     <Rectangle Name="myRotatedFromLeftEdgeRectangle"
 165           Canvas.Top="250" Canvas.Left="100" Fill="blue"
 166           Width="50" Height="50" Stroke="black"
 167           StrokeThickness="5">
 168           <Rectangle.RenderTransform>
 169
 170               <!-- Set the center of this RotateTransform to the
 171              top-left corner  of the rectangle so that the
 172                    rectangle appears to rotate about top-left corner
 173                    when the animation is applied. -->
 174              <RotateTransform Angle="0" CenterX="0" CenterY="0" />
 175           </Rectangle.RenderTransform>
 176     </Rectangle>
 177
 178     <Rectangle Name="myRotatedFromAnimatedCenterRectangle"
 179               Canvas.Top="400" Canvas.Left="100" Fill="blue"
 180               Width="50" Height="50" Stroke="black"
 181               StrokeThickness="5">
 182               <Rectangle.RenderTransform>
 183                  <RotateTransform Angle="0" CenterX="0" CenterY="0" />
 184               </Rectangle.RenderTransform>
 185     </Rectangle>
 186
 187    </Canvas>
 188
 189       <StackPanel Orientation="Horizontal">
 190
 191          <!-- Create some buttons to control the animations. -->
 192          <Button Name="startButton">Restart</Button>
 193          <Button Name="stopButton">Stop</Button>
 194
 195          <StackPanel.Triggers>
 196           <EventTrigger RoutedEvent="Button.Click" SourceName="startButton">
 197             <BeginStoryboard Name="myBeginStoryboard">
 198             <Storyboard>
 199       <!-- This timeline is used to control the animations in this example. -->
 200
 201          <!-- Animate the angle of the rectangle's RotateTransform from
 202               0 to 360 over 4 seconds. -->
 203             <DoubleAnimation Storyboard.TargetName="myRotatedFromCenterRectangle"
 204             Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
 205               From="0" To="360" RepeatBehavior="Forever" Duration="0:0:4" />
 206
 207          <!-- Animate the angle of the rectangle's RotateTransform from
 208               0 to 360 over 4 seconds. -->
 209             <DoubleAnimation
 210               Storyboard.TargetName="myRotatedFromLeftEdgeRectangle"
 211             Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
 212             From="0" To="360" RepeatBehavior="Forever" Duration="0:0:4" />
 213
 214
 215          <!-- Animate the center and angle of the rectangle's RotateTransform. -->
 216          <DoubleAnimation Storyboard.TargetName="myRotatedFromAnimatedCenterRectangle"
 217          Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
 218           From="0" To="360" RepeatBehavior="4x" Duration="0:0:4" />
 219          <DoubleAnimation Storyboard.TargetName="myRotatedFromAnimatedCenterRectangle"
 220          Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.CenterX)"
 221          From="0" To="50" Duration="0:0:16" />
 222          <DoubleAnimation Storyboard.TargetName="myRotatedFromAnimatedCenterRectangle"
 223          Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.CenterY)"
 224          From="0" To="50" Duration="0:0:16" />
 225
 226           </Storyboard>
 227           </BeginStoryboard>
 228           </EventTrigger>
 229           <EventTrigger RoutedEvent="Button.Click" SourceName="stopButton">
 230             <StopStoryboard BeginStoryboardName="myBeginStoryboard" />
 231           </EventTrigger>
 232         </StackPanel.Triggers>
 233       </StackPanel>
 234    </StackPanel>
 235 </Canvas>
 236         </TabItem>
 237       </TabControl>
 238
 239 </Page>