Animated ScaleTransform : RenderTransform « Windows Presentation Foundation « C# / CSharp Tutorial





<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>
WPF Animated Scale Transform










24.103.RenderTransform
24.103.1.Rotate the text 90 degrees using a RotateTransformRotate the text 90 degrees using a RotateTransform
24.103.2.Skew the text using a TranslateTransformSkew the text using a TranslateTransform
24.103.3.Skew the text using a SkewTransformSkew the text using a SkewTransform
24.103.4.Scale the text using a ScaleTransformScale the text using a ScaleTransform
24.103.5.Scales a rectangle by 200% from a center of (0,0)Scales a rectangle by 200% from a center of (0,0)
24.103.6.Scales a rectangle by 200% from a center of (25,25)Scales a rectangle by 200% from a center of (25,25)
24.103.7.ScaleX: 0.5 /ScaleY: 0.5 /Center: (25,25)ScaleX: 0.5 /ScaleY: 0.5 /Center: (25,25)
24.103.8.Scales a rectangle by 200% from a center of (0.5,0.5)Scales a rectangle by 200% from a center of (0.5,0.5)
24.103.9.ScaleX: 0.5 / ScaleY: 0.5 / RenderTransformOrigin: (0.25,0.25)ScaleX: 0.5 / ScaleY: 0.5 / RenderTransformOrigin: (0.25,0.25)
24.103.10.Applies a horizontal skew of 45 degrees from a center point of (0,0)Applies a horizontal skew of 45 degrees from a center point of (0,0)
24.103.11.Applies a horizontal skew of 45 degrees from a center point of (25,25)Applies a horizontal skew of 45 degrees from a center point of (25,25)
24.103.12.Applies a vertical skew of 45 degrees from a center point of (25,25)Applies a vertical skew of 45 degrees from a center point of (25,25)
24.103.13.SkewTransform AngleX: 45 / AngleY: 0 / RenderTransformOrigin: (0.5,0.5)SkewTransform AngleX: 45 / AngleY: 0 / RenderTransformOrigin: (0.5,0.5)
24.103.14.TranslateTransform X: 50 / Y: 0TranslateTransform X: 50 / Y: 0
24.103.15.TranslateTransform X: 0 / Y : 50TranslateTransform X: 0 / Y : 50
24.103.16.TranslateTransform X: 50 / Y: 50TranslateTransform X: 50 / Y: 50
24.103.17.The X and Y properties of this TranslateTransform are each animated from -50 to 50The X and Y properties of this TranslateTransform are each animated from -50 to 50
24.103.18.Rotate then TranslateRotate then Translate
24.103.19.Translate then RotateTranslate then Rotate
24.103.20.Animated ScaleTransformAnimated ScaleTransform
24.103.21.Animated SkewTransform ExampleAnimated SkewTransform Example
24.103.22.The ScaleX and ScaleY properties of this ScaleTransform are each animated from 0 to 1The ScaleX and ScaleY properties of this ScaleTransform are each animated from 0 to 1
24.103.23.Path with ScaleTransformationPath with ScaleTransformation