LA.NET [EN]

Jul 18

Today I needed to animate a Rectangle so that it moved from left to right. Like all sane people, I”ve right clicked the xaml file and chose open in blend. Building the animation was really a complex operation: I only needed a pair of clicks and the rectangle was moving :,,) . Unfortunately, the code blend generates sucks a lot. In order to build the animation, it adds several unecessary transforms to the rectangle:

<Rectangle RenderTransformOrigin=”0.5,0.5″ Fill=”#FFE81E1E” 
       Stroke=”#FF000000″ x:Name=”rectangle” Width=”56″ Height=”48″
       Canvas.Left=”16″ Canvas.Top=”64″>
      <Rectangle.RenderTransform>
         <TransformGroup>
           <ScaleTransform ScaleX=”1″ ScaleY=”1″/>
           <SkewTransform AngleX=”0″ AngleY=”0″/>
           <RotateTransform Angle=”0″/>
           <TranslateTransform X=”0″ Y=”0″/>
        </TransformGroup>
     </Rectangle.RenderTransform>
</Rectangle>

And then it keeps polluting my XAML code by adding the following storyboard:

<Storyboard x:Name=”moveright”>
    <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″
            Storyboard.TargetName=”rectangle”
            Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)”>
          <SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>
          <SplineDoubleKeyFrame KeyTime=”00:00:02″ Value=”544″/>
   </DoubleAnimationUsingKeyFrames>
</Storyboard>

wtf??? Man, i only need a simple animation here! I guess this is what happens when you rely on a tool that has to build all sorts of animations. anyway, this sucked and i though that it was time to clean it up. I started with the xaml for the rectangle:

<Rectangle RenderTransformOrigin=”0.5,0.5″ Fill=”#FFE81E1E”
         Stroke=”#FF000000″ x:Name=”rectangle” Width=”56″ Height=”48″
         Canvas.Left=”16″ Canvas.Top=”64″>

I think we all agree that this is all that is needed, right?

Now, the cool part (which is why i”m writing this post): building the storyboard. When you look at the code blend generates, it”s obvious that it uses a TranslateTransform to change the position of the element. Again,  it”s fair to say that we don”t need that to change the position of the rectangle. The only thing we need is to change its Canvas.Left property. With this in mind, I”ve written the following code (yeah, I”ve also discarded the key frames animation :) ):

<Storyboard x:Name=”moveright”>
   <DoubleAnimation To=”544″ Duration=”0:0:3″
         Storyboard.TargetName=”rectangle”
         Storyboard.TargetProperty=”Canvas.Left” />
</Storyboard>

Surprise! loading it on the browser doesn”t do anything! the rectangle didn”t even move an inch. What was i doing wrong? well, i was missing a pair of parenthesis! Here”s the correct code:

<Storyboard x:Name=”moveright”>
   <DoubleAnimation To=”544″ Duration=”0:0:3″
         Storyboard.TargetName=”rectangle”
         Storyboard.TargetProperty=”(Canvas.Left)” />
</Storyboard>

After all, sometimes the parenthesis do matter!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>