Animated transform : DoubleAnimation « Windows Presentation Foundation « C# / C Sharp

1. C# / C Sharp
2. Windows Presentation Foundation
3. DoubleAnimation

Animated transform

  

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

    
    
    <Canvas Width="700" Height="400" HorizontalAlignment="Center">
      <TextBlock Canvas.Top="100" Canvas.Left="50"
        TextAlignment="Center" FontSize="16pt" Foreground="#CCCCFF"
        RenderTransformOrigin="0.5,0.5">
        <TextBlock.RenderTransform>
          <RotateTransform x:Name="MyAnimatedRotateTransform" Angle="0" />
        </TextBlock.RenderTransform>
        RotateTransform
      </TextBlock>
    
      <TextBlock Canvas.Top="100" Canvas.Left="300" Name="scaledText"
        TextAlignment="Center" FontSize="16pt" Foreground="Gray"
        RenderTransformOrigin="0.5,0.5">
        <TextBlock.RenderTransform>
          <ScaleTransform x:Name="MyAnimatedScaleTransform" ScaleX="1" ScaleY="1" />
        </TextBlock.RenderTransform>
        ScaleTransform
      </TextBlock>    
    
      <TextBlock Canvas.Top="250" Canvas.Left="150" 
        TextAlignment="Center" FontSize="16pt" Foreground="Orange"
        RenderTransformOrigin="0.5,0.5">
        <TextBlock.RenderTransform>
          <SkewTransform x:Name="MyAnimatedSkewTransform" AngleX="0" AngleY="0" />
        </TextBlock.RenderTransform>
        SkewTransform
      </TextBlock>      
    
      <TextBlock Canvas.Top="30" Canvas.Left="300" Name="translatedText"
        FontSize="16pt">
        <TextBlock.RenderTransform>
          <TranslateTransform x:Name="MyAnimatedTranslateTransform" X="0" Y="0" />
        </TextBlock.RenderTransform>
        TranslateTransform
      </TextBlock>      
    
    </Canvas>
  </StackPanel>
  

  <Window.Triggers>
    <EventTrigger RoutedEvent="Page.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyAnimatedRotateTransform" 
            Storyboard.TargetProperty="Angle" 
            From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
          <ParallelTimeline RepeatBehavior="Forever" AutoReverse="True">
            <DoubleAnimation 
              Storyboard.TargetName="MyAnimatedScaleTransform" 
              Storyboard.TargetProperty="ScaleX"
              From="0" To="3" Duration="0:0:7" />
            <DoubleAnimation 
              Storyboard.TargetName="MyAnimatedScaleTransform" 
              Storyboard.TargetProperty="ScaleY"          
              From="0" To="3" Duration="0:0:7" />     
          </ParallelTimeline>
          <ParallelTimeline RepeatBehavior="Forever" AutoReverse="True">
            <DoubleAnimation 
              Storyboard.TargetName="MyAnimatedSkewTransform" 
              Storyboard.TargetProperty="AngleX"
              From="-45" To="70" Duration="0:0:10" />
            <DoubleAnimation 
              Storyboard.TargetName="MyAnimatedSkewTransform" 
              Storyboard.TargetProperty="AngleY"          
              From="-45" To="70" Duration="0:0:10" />       
          </ParallelTimeline>     
          <ParallelTimeline RepeatBehavior="Forever" AutoReverse="True">
            <DoubleAnimation 
              Storyboard.TargetName="MyAnimatedTranslateTransform" 
              Storyboard.TargetProperty="X"          
              From="0" To="100" Duration="0:0:5" />
            <DoubleAnimation 
              Storyboard.TargetName="MyAnimatedTranslateTransform" 
              Storyboard.TargetProperty="Y"          
              From="0" To="200" Duration="0:0:5" />   
          </ParallelTimeline>       
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Window.Triggers>

</Window>

   
    
  

Related examples in the same category

1.	Remove aniamtion with RemoveStoryboard
2.	Create DoubleAnimation and Animate a Button with Button.BeginAnimation and Button.WidthProperty
3.	DoubleAnimation Loop forever
4.	DoubleAnimation Loop three times
5.	DoubleAnimation Loop for 30 seconds
6.	TranslateTransform and DoubleAnimation
7.	Path Animation with DoubleAnimationUsingPath, AutoReverse