Question

I have Border element with Margin property bound to StartDate (DateTime) property of some class. If property changed margin is changed also (with a help of converter).

I’d like to make changes as smoothly as possible. for example, on UI side one hour in data class equals to 15 pixels on screen and when i change StartDate +/- one hour i can see that element margin jumping by +/- 15 pixels right/left… so how can i animate this?

Thank you in advance!

BTW – this is my first question here 🙂

Answer 1

Unforunately you can’t natively manipulate a margin through an animation. A margin is really a Thickness object and objects are almost impossible for the simple property animator to figure out on their own.

However, like anything now-a-days, there are many ways to override this:

1. Move the position of the object instead of the margin:
   Animate Margin Change in Silverlight

2. Create a new class similar to the ThicknessAnimation class in WPF and call it in code: http://blogs.msdn.com/blemmon/archive/2009/03/18/animating-margins-in-silverlight.aspx

3. …or my preferred way: Find something else to animate. You can manipulate a different object which moves your other objects over. You can animate width and height of an invisible/clear object very easily. If that item is the first thing in a stack panel, all items after it will be moved as it’s size values are changed. This can become finicky, but it is really easy to do.

Good luck!