Animated SkewTransform Example

image_pdfimage_print


   
  
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Graphics.Transforms.AnimatedSkewTransformExample"
  WindowTitle="Animated SkewTransform Example">
  <StackPanel Orientation="Horizontal"> 
    <StackPanel Margin="10">
        <Canvas Width="250" Height="250">
          <Rectangle
            Height="50" Width="50" Fill="Red" Stroke="Blue" StrokeThickness="2" Canvas.Left="100" Canvas.Top="100">
            <Rectangle.RenderTransform>
              <SkewTransform x:Name="MyAnimatedSkewTransform" CenterX="25" CenterY="25" AngleX="0" AngleY="0" />
            </Rectangle.RenderTransform>
          </Rectangle>
          <Rectangle Height="50" Width="50" Stroke="#99000000"
            StrokeDashArray="4,1" StrokeThickness="2"
            Canvas.Left="100" Canvas.Top="100" />            
        </Canvas>
      <StackPanel Orientation="Horizontal">
        <Button Name="startButton" Margin="0,0,2,0">Start</Button>
        <Button Name="stopButton">Stop</Button>
        <StackPanel.Triggers>
          <EventTrigger SourceName="startButton" RoutedEvent="Button.Click">
            <BeginStoryboard Name="myBeginStoryboard">
              <Storyboard>
                <DoubleAnimation 
                  Storyboard.TargetName="MyAnimatedSkewTransform" 
                  Storyboard.TargetProperty="AngleX" 
                  From="0" To="180" Duration="0:0:4" />
                <DoubleAnimation 
                  Storyboard.TargetName="MyAnimatedSkewTransform" 
                  Storyboard.TargetProperty="AngleY" 
                  From="0" To="180" Duration="0:0:4" />             
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
          <EventTrigger SourceName="stopButton" RoutedEvent="Button.Click">
            <StopStoryboard BeginStoryboardName="myBeginStoryboard" />
          </EventTrigger>          
        </StackPanel.Triggers>        
      </StackPanel>  
    </StackPanel>
  </StackPanel>
</Page>