Silverlight: animating and / or panning an image

Question

I have a client requesting to add an animated / panned image to my site. In principle, this is a standard-sized image, he wants to put it in a slightly narrower frame and have a panning image from left to right, like a visual element on his website. No need to click and drag; it's just basically an animated pan from left to right, and then start again with another image.

This is a .NET page, and I have a stack of Silverlight books that are sitting here with the thought that I'm going to learn this. Now I treat anyone just as well, since now I have real use. For the record, I am a .NET.NET developer, but have not played much with Silverlight without having read the first couple of chapters from several books.

So ... first question, I suppose it's possible to do this with Silverlight, am I mistaken about that?

The second question, if I can do this, can someone point me in the right direction, how much function / control / technology is needed for this? I read deep zoom, but that doesn't seem to be exactly what I want. I just need to take the standard size jpeg / gif / any file and slowly pan it from left to right. What Silverlight features do I need to learn / spend some time learning to do this?

Answer 1

This is certainly doable. You will essentially have an image sitting on the canvas, and you will be handling MouseMove events on this canvas. When the mouse moves from one side to the other, you will use the translation of the image to move it from side to side.

The following code should get started:

Add a canvas with your image to MainPage.xaml (note the MouseMove / Enter / Leave events)

<Canvas x:Name="LayoutCanvas" MouseMove="LayoutCanvas_MouseMove" MouseEnter="LayoutCanvas_MouseEnter" Height="200" Width="200"> <Image x:Name="imgToMove" Source="myimage.png" /> </Canvas> 

In your code behind add MouseMove / Enter / Leave events

  Point lastMousePos = new Point(); Point currentMousePos = new Point(); double amountToMove = 1; private void LayoutCanvas_MouseMove(object sender, MouseEventArgs e) { currentMousePos = e.GetPosition(LayoutCanvas); if (lastMousePos.X > currentMousePos.X) { amountToMove--; } else { amountToMove++; } imgToMove.SetValue(Canvas.LeftProperty, amountToMove); lastMousePos = currentMousePos; } private void LayoutCanvas_MouseEnter(object sender, MouseEventArgs e) { lastMousePos = e.GetPosition(LayoutCanvas); } private void LayoutCanvas_MouseLeave(object sender, MouseEventArgs e) { imgToMove.SetValue(Canvas.LeftProperty, (double)0); } 

And you're done. Now, when you mouse over the image, the image will be moved from left to right or from right to left. When you leave the image, it will return to its original position.

Answer 2

I think you can do it. Read the chapter of your book on animation and you will see how easy it is to move the image. And read about positioning a control as Image in a layout panel, like Canvas.

Answer 3

What you are looking for is called projection transformation.

Some good sources:

Silverlight 3 PlaneProjection Primer by Jaime Rodriguez

MSDN Documentation PlaneProjection

Chapter 7 Basics of Silverlight 3 Animation of Jeff Paris

Basically what you are going to do is create an animation that will apply rotation along the Y axis.