Thursday, October 25, 2012

Windows Phone Margin Animation

In Silverlight for Windows Phone the ThicknessAnimation class isn't available.

You have two solutions:
  • Place a transparent object on the left/top and animate it's Width/Height properties;
  • Place the object you want to animate in a Canvas and animate the object Left/Top properties.
If you choose the second options, the XAML can look like this:
    <Storyboard x:FieldModifier="private" x:Name="SBUndeterminedAnimation">
        <DoubleAnimation x:FieldModifier="private" x:Name="DAUndeterminedAnimation" AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:2.000" From="0" Storyboard.TargetName="BProgress" Storyboard.TargetProperty="(Canvas.Left)" />

    <Canvas x:FieldModifier="private" x:Name="CTrack" Background="#19ff0000" Height="5" HorizontalAlignment="Stretch">
        <Border x:FieldModifier="private" x:Name="BProgress" Background="#ffff0000" Height="5" Width="50" />
This XAML is actually a custom ProgressBar that has both determined and undetermined behavior.

The To property of the DAUndeterminedAnimation DoubleAnimation is set in code-behind.


  1. Transform and Projection properties can be used in controls animations. So moving of control to the left can be done with projection's LocalOffsetX, instead of Margin -> Thickness -> Left.