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

Home
C# / CSharp Tutorial
1.Language Basics
2.Data Type
3.Operator
4.Statement
5.String
6.struct
7.Class
8.Operator Overload
9.delegate
10.Attribute
11.Data Structure
12.Assembly
13.Date Time
14.Development
15.File Directory Stream
16.Preprocessing Directives
17.Regular Expression
18.Generic
19.Reflection
20.Thread
21.I18N Internationalization
22.LINQ
23.GUI Windows Forms
24.Windows Presentation Foundation
25.Windows Communication Foundation
26.Workflow
27.2D
28.Design Patterns
29.Windows
30.XML
31.XML LINQ
32.ADO.Net
33.Network
34.Directory Services
35.Security
36.unsafe
C# / CSharp Tutorial » Windows Presentation Foundation » RenderTransform 




<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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.