How can I animate a transition when moving a child from one panel to another in Silverlight

Question

I would like to animate a transition when moving content between two panels. I am getting a bit map image of a detail record and docking it as a thumbnail in the panel below. The docking area is in a footer grid and the content detail is in another grid that sits above the dock area (the dock and the main content area live in separate rows of the root layout control - another grid).

I have tried implementing this with a ScaleTransform and a TranslateTransform, simultaneously shrinking the image and moving it towards the footer control. When it moves into the footer control, it gets clipped even though the image Canvas.ZIndex property is set to a very high number. Eventually the thumnbail will need to be a child of a StackPanel that sits inside the footer grid.

Thanks for your consideration and help.

Answer 1

I had a similar problem (clipping) with a WPF animation I had. The problem was that the owner of the animation needed to be a parent of both containers for the animation to work (in my case I made it the actual window holding the containers).

Without any code, I can't see if that is your problem, but I thought I would throw it out there.

You can see my code where I animate moving from one container to another here: http://wiassistant.codeplex.com/sourcecontrol/changeset/view/36638?projectName=WIAssistant#924851 (See the AnimatePaneBox method at the bottom of the file.) This may or may not be useful to you.

Answer 2

I've done something similar by creating a Canvas that sits over the top of both containers, using a WritableBitmap (if necessary) to create a rendering of the object that you're moving and attach it to that Canvas, animate the bitmap (translate, scale, opacity, whatever), and then pop the new object in under it at the end of the animation. It can be brittle if your controls need to be able to move or resize, but in most of my circumstances it's been a reliable hack.