Silverlight 3DRotate + Drag

Question

Hello,

I am trying to implement drag and rotate(Left to right or right to left) on a UIelement similar to this one:

http://www.motorola.com/Consumers/US-EN/Consumer-Product-and-Services/Mobile-Phones/Motorola-Karma-QA1-US-EN

So when the user holds down the left mouse button on the UIelement and starts to move the mouse to the left I want the UIelment to rotate to the left. Vice versa if moving to the right. I am not sure how to go about doing this. Any suggestions?

Answer 1

I took a look at that Flash application that you linked to and I am pretty sure that it is not really 3d. It is a sequence of still images which get switched in and out as you move the mouse.

Answer 2

One approach is to take a series of real photographs of the object while rotating it.

Now you could either stitch all these photographs (all being of the same size) together side-by-sde in to a single file or leave them as separate files.

In XAML the key enabling control is the ScrollContentPresenter. Inside of which you would either load you single stitched photograph in to a single Image control or you would load a the set of photographs into a series of Image controls held in a StackPanel.

You would ensure the ScrollContentPresenter has the same specific size as a single image.

Then hook the Mouse events and as the user moves the mouse with the Left button depressed you would modify the ScrollContentPresenter's HorizontalOffset (assuming your stitching or stack panel is horizontal) by the exact width of an image.

With enough images (your example link uses 36, one every 10 degrees) the result is an apparent 360 3D image. With a small element of spot lighting in the photographs the result is reasonably compelling.