XAML animation to bound property

Question

I have the following Rectangle bound to an ever-changing positioning property "RectTop"

<Rectangle Canvas.Top="{Binding RectTop}" Height="100" Width="100" Fill="Red" />

Is there I way I can set up an animation/trigger to smoothly animate the rectangle to RectTop whenever that value changes? RectTop changes constantly. RectTop's class implements INotifyPropertyChanged so my updates are working fine. I've had success using an intermediary thread that slowly increments RectTop, then invokes the UI thread to notify it's value changing. That method feels terribly hackish. There must be a better way.

Any ideas?

Answer 1

Hi, Simple trick. Update the Margin property of the Rectangle instead of updating the Canvas.Top.

Instead of this:

  <Canvas Width="300" Height="300" Background="Black">  
    <Rectangle Canvas.Top="10" Fill="Blue" Height="100" Width="100"/>
  </Canvas>

Try this:

<Canvas Width="300" Height="300" Background="Black">  
    <Rectangle Margin="0,10,0,0" Fill="Blue" Height="100" Width="100"/>
  </Canvas>

PS: You should use Thickness Animation

HTH