Animating the Margin using Storyboard


  • Hi Guys,

    So the basics of my problem is that I'm attempting to do a Storyboard animation targeting the Top element of a Margin. I am unable to find a way to do this with Windows Phone 8.1. I'm posting in this forum because a solution that works for Windows Store apps should work for this app as it will eventually become a Universal app.

    I'm planing to eventually make this universal app so I don't want to use Silverlight. With the Windows Phone 8.1 SDK we lost the ThicknessAnimation class and after looking at forums for hours I am unable to find an equivalent. I decided to just use a DoubleAnimation but now the issue is figuring out how to correctly target the Margin Property. 

    This is the best i could come up with: 

    Storyboard.SetTargetProperty(frameMarginAnimation, "(FrameworkElement.Margin.Top)");

    But that gives an error... Any ideas?

    This is how I'm setting up the animation by the way: 

    frameMarginAnimation = new DoubleAnimation() { Duration = new Duration(TimeSpan.FromSeconds(animationLength)), From = middlePicture.Margin.Top, To = frameMargin.Top + (double)10 };

    Storyboard.SetTarget(frameMarginAnimation, borderTwo);
    Thanks in advance for any help!

    Tuesday, July 1, 2014 5:37 PM


All replies

  • Hi Ethan,

    you can't animate Margin.Top with a DoubleAnimation, as Top is just a plain Property of the Thickness-struct. It's not a Dependency Property, what it needs to be to animate it.

    What do you want to achieve? Maybe you can add a TranslateTransform to the RenderTransform-property of your element and animate that TranslateTransform to move your element on the screen. I think that's even the better way then animating a Margin.

    Thomas Claudius Huber

    "If you can't make your app run faster, make it at least look & feel extremly fast"

    My latest app: The "Womanizer" :-)
    twitter: @thomasclaudiush
    homepage: www.thomasclaudiushuber.com
    author of: ultimate Windows Store Apps handbook | ultimate WPF handbook | ultimate Silverlight handbook

    • Marked as answer by ethanku Thursday, July 3, 2014 3:42 AM
    Wednesday, July 2, 2014 10:05 AM
  • I actually ended up doing exactly that but had to rewrite a lot of code to achieve that effect. It really seems odd that they removed the BorderAnimation and never replaced it... But so it goes! I believe the performance is better this way anyway, like you said.

    Thank you for you help!

    Thursday, July 3, 2014 3:42 AM