Path with ScaleTransformation


   
    

<Window x:Class="Animation.KeySplineAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="KeySplineAnimation" Height="250" Width="600">
    <Canvas Margin="10">

        <Path Stroke="Blue" StrokeThickness="1" StrokeDashArray="2 1" Canvas.Top="25">
            <Path.Data>
                <PathGeometry>
                    <PathFigure>
                        <BezierSegment Point1="25,0" Point2="50,70" Point3="100,100" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.RenderTransform>
                <ScaleTransform ScaleX="2.5"></ScaleTransform>
            </Path.RenderTransform>
        </Path>
        <Path Stroke="Blue" StrokeThickness="1" StrokeDashArray="2 1" Canvas.Left="250" Canvas.Top="25">
            <Path.Data>
                <PathGeometry>
                    <PathFigure>
                        <BezierSegment Point1="25,80" Point2="20,40" Point3="100,100" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.RenderTransform>
                <ScaleTransform ScaleX="2.5"></ScaleTransform>
            </Path.RenderTransform>
        </Path>
    </Canvas>
</Window>

   
    
    
    
     


Two repeat buttons that increase and decrease a numerical value.


   
  


<DockPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="RepeatButtons.Pane1">
  <StackPanel>
      <RepeatButton Width="100" DockPanel.Dock="Top" 
                    Delay="500" Interval="100" 
                    Click="Increase">
        Increase
      </RepeatButton>
      <TextBlock Name="valueText" 
                 Width="100" DockPanel.Dock="Top" 
                 TextAlignment="Center" FontSize="16">
        0
      </TextBlock>

      <RepeatButton Width="100" DockPanel.Dock="Top" 
                    Delay="500" Interval="100" 
                    Click="Decrease">
        Decrease
      </RepeatButton>
    </StackPanel>
</DockPanel>
//File:Window.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Data;

namespace RepeatButtons
{
    public partial class Pane1 : DockPanel
    {
        void Increase(object sender, RoutedEventArgs e)
        {
            Int32 Num = Convert.ToInt32(valueText.Text);

            valueText.Text = ((Num + 1).ToString());
        }

        void Decrease(object sender, RoutedEventArgs e)
        {
            Int32 Num = Convert.ToInt32(valueText.Text);

            valueText.Text = ((Num - 1).ToString());
        }
    }
}

   
    
     


Translate then Rotate


   
  

<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
            <Canvas Height="200" Width="200">
                <Polyline
                  Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10"
                  Canvas.Left="75" Canvas.Top="50">
                    <Polyline.RenderTransform>
                
                    
                        <TransformGroup>
                            <TransformGroup.Children>
                                <TransformCollection>
                                    <TranslateTransform X="50" Y="0" />
                                    <RotateTransform CenterX="25" CenterY="50" Angle="45" />
                                </TransformCollection>
                            </TransformGroup.Children>
                        </TransformGroup>

                    </Polyline.RenderTransform>
                </Polyline>
                <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10"
                  Opacity="0.25" Canvas.Left="75" Canvas.Top="50" />

            </Canvas>

</Window>

   
    
     


Animated ScaleTransform


   
  

<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <StackPanel Orientation="Horizontal"> 
        <Canvas Width="200" Height="200">
            <Polyline Name="myAnimatedPolyline"
              Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10"
                 Canvas.Left="75" Canvas.Top="50">
                <Polyline.RenderTransform>

                    <TransformGroup>
                        <TransformGroup.Children>
                            <TransformCollection>
                                <RotateTransform 
                                  x:Name="AnimatedRotateTransform"
                                  CenterX="25" CenterY="50" Angle="0" />
                                <ScaleTransform 
                                  x:Name="AnimatedScaleTransform"
                                  CenterX="25" CenterY="50" ScaleX="1" ScaleY="1" />
                            </TransformCollection>
                        </TransformGroup.Children>
                    </TransformGroup>
                    
                </Polyline.RenderTransform>
            </Polyline>
        </Canvas>
        <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="AnimatedRotateTransform"
                  Storyboard.TargetProperty="Angle" 
                  From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
                <DoubleAnimation 
                  Storyboard.TargetName="AnimatedScaleTransform"
                  Storyboard.TargetProperty="ScaleX"
                  From="0" To="3" Duration="0:0:5" RepeatBehavior="Forever"
                  AutoReverse="True" />
                <DoubleAnimation  
                  Storyboard.TargetName="AnimatedScaleTransform"
                  Storyboard.TargetProperty="ScaleY"
                  From="0" To="3" Duration="0:0:5" RepeatBehavior="Forever" 
                  AutoReverse="True"/>          
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
          <EventTrigger SourceName="stopButton" RoutedEvent="Button.Click">
            <StopStoryboard BeginStoryboardName="myBeginStoryboard" />
          </EventTrigger>          
        </StackPanel.Triggers>        
      </StackPanel>
  
</Window>

   
    
     


Animated SkewTransform Example


   
  
<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>

   
    
     


The X and Y properties of this TranslateTransform are each animated from -50 to 50


   
  

<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <StackPanel Orientation="Horizontal"> 

        <Canvas Width="250" Height="250">
          <Rectangle 
            Height="50" Width="50" Fill="Red" Stroke="Blue" StrokeThickness="2"
            Canvas.Left="100" Canvas.Top="100">
            <Rectangle.RenderTransform>
              <TranslateTransform x:Name="AnimatedTranslateTransform" X="0" Y="0" />
            </Rectangle.RenderTransform>
          </Rectangle>
        </Canvas>
        <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="AnimatedTranslateTransform" 
        Storyboard.TargetProperty="X" 
          From="-50" To="50" Duration="0:0:2" />
        <DoubleAnimation Storyboard.TargetName="AnimatedTranslateTransform" 
        Storyboard.TargetProperty="Y" 
        From="-50" To="50" Duration="0:0:2" />         
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
          <EventTrigger SourceName="stopButton" RoutedEvent="Button.Click">
            <StopStoryboard BeginStoryboardName="myBeginStoryboard" />
          </EventTrigger>          
        </StackPanel.Triggers>        
      </StackPanel>
</Window>

   
    
     


Rotate then Translate


   
  

<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">

        <Canvas Height="200" Width="200">
          <Polyline
            Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10"
            Canvas.Left="75" Canvas.Top="50">
            <Polyline.RenderTransform>
                <TransformGroup>
                    <TransformGroup.Children>
                        <TransformCollection>
                            <RotateTransform CenterX="25" CenterY="50" Angle="45" />
                            <TranslateTransform X="50" Y="0" />
                        </TransformCollection>
                    </TransformGroup.Children>
               </TransformGroup>
            </Polyline.RenderTransform>
          </Polyline>
          <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10"
            Opacity="0.25" Canvas.Left="75" Canvas.Top="50" /> 
        </Canvas>

</Window>