Create animation to select an image

Question

I need the user to select from 10 different images and I will like to place those images in some kind of animation. I was thinking about creating something like:

note that in the example image the user scrolled towards the right and the last image was placed at the beginning.

Also I will like the animation to be smooth because if I place the images under a scroll viewer then the animation is not smooth.

should I place the images in a stackpanel and then animate the stackpanel margin left property? or perhaps should I place the imags in a canvas and animate each image individually?

Answer 1

I would have a stack panel, animate the margin, then duplicate the first image as the true last image that would start off-screen and the "last image" duplicated as the first, then you can animate either direction. I would not use scroll viewer.

Here's how the layout would look.

5[12345]1. A[12345]B.

A is copy brush sourced to 5, and B is sourced to 1.

Now you can animate either way, move the images around, and move the margin back.

So, user moves "right."

5[12345]1 animates to [51234]51

Change A's source to 4, B sources 5, and move actual images back before releasing control to paint. 4[51234]5

If you want a scrollbar, I'd make a separate scrollbar, bind it to the margin, add a converter to control it. Then do the following instead.

12345[12345]12345

Animate the scroll position, and when the user releases, rearrange images and return the scrollbar thumb to center. In this way, you wouldn't have to delete or create pictures.

Hint: You could use a converter on the scroll bar and bind it to a random variable, then animate the panel's margins indirectly by "snapping" the thumb's position to a "position" in your image's stack.