WPF-Samples/Graphics/2DTransforms/TransformCollectionExample.xaml

<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.TransformCollectionExample"
  WindowTitle="TransformCollection Example" >
  <StackPanel Orientation="Horizontal">
    
    <StackPanel Margin="10">
      <TextBlock Margin="0,10,0,0">No transform</TextBlock>
      <Border BorderBrush="Black" BorderThickness="1" Background="{StaticResource MyBlueGridBrushResource}"
        HorizontalAlignment="Left">
        <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" /> 
        </Canvas>
      </Border>
      
      <TextBlock Margin="0,10,0,0">Rotate</TextBlock>
      <Border BorderBrush="Black" BorderThickness="1" Background="{StaticResource MyBlueGridBrushResource}"
        HorizontalAlignment="Left">
        <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>
              <RotateTransform CenterX="25" CenterY="50" Angle="45" />
            </Polyline.RenderTransform>
          </Polyline>
          
          <!-- Shows the original position of the 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>
      </Border>
      
      <TextBlock Margin="0,10,0,0">Translate</TextBlock>
      <Border BorderBrush="Black" BorderThickness="1" Background="{StaticResource MyBlueGridBrushResource}"
        HorizontalAlignment="Left">
        <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>
              <TranslateTransform X="50" Y="0" />
            </Polyline.RenderTransform>
          </Polyline>
          
          <!-- Shows the original position of the 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>
      </Border>         
    </StackPanel>
 
    
    <StackPanel Margin="10">
      <TextBlock Width="200" Margin="0,10,0,0">Rotate then Translate</TextBlock>
      <Border BorderBrush="Black" BorderThickness="1" Background="{StaticResource MyBlueGridBrushResource}"
        HorizontalAlignment="Left">
        <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>
          
          <!-- Shows the original position of the 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>
      </Border> 

      <TextBlock Width="200" Margin="0,10,0,0">Translate then Rotate</TextBlock>
        <Border BorderBrush="Black" BorderThickness="1" Background="{StaticResource MyBlueGridBrushResource}"
          HorizontalAlignment="Left">
            <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>

                <!-- Shows the original position of the 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>
        </Border>
      
    </StackPanel>
    
    <Border BorderBrush="LightGray" BorderThickness="2" Background="WhiteSmoke" Margin="10">
    <StackPanel Margin="10">
      <TextBlock Margin="0,10,0,0" Width="200" TextAlignment="Center">
        A TransformCollection is used to apply a RotateTransform and a ScaleTransform
        to this element. Both the RotateTransform and the ScaleTransform are animated.
      </TextBlock>
      <Border BorderBrush="Black" BorderThickness="1" Background="{StaticResource MyBlueGridBrushResource}"
        HorizontalAlignment="Center" VerticalAlignment="Top">
        <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>
    </Border>
    
    <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="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>
    </StackPanel>
    </Border>    
  </StackPanel>
  
</Page>