Silverlight: animate and/or pan an image

Question

I have a client requesting an animated/panned image be added to their website. Basically, it's a standard-size image, he wants to put it in a slightly narrower frame and have the image pan from left to right as a visual element on his website. There's no clicking and dragging required; it's just basically an animated pan from left to right, then re-start with another picture.

This is a .NET page, and I've got a stack of Silverlight books sitting here with the idea that I'm going to learn it. I figure now's as good a time as any, since now I actually have a real-live use for it. For the record, I'm an experience .NET developer but have not played much with Silverlight beyond reading the first couple chapters of a few books.

So... first question, I'm assuming this is possible to do with Silverlight, am I wrong on that?

Second question, if I can do it, can someone point me in the right direction as far as what feature/control/technology is needed to do this? I'm reading up on deep zoom, but that doesn't seem to be quite what I want. I just need to take a standard size jpeg/gif/whatever file and have it slowly pan from left to right. What Silverlight features do I need to study/spend some time learning in order to do this?

NakedBrunch NakedBrunch · Accepted Answer · 2010-05-04T21:31:26

This is certainly doable. You will essentially have an image sitting on a canvas and you'll handle MouseMove events on that canvas. As the mouse tracks from one side to the other, you'll apply a translation to the image to move it from side to side.

The following code should get you started:

Add a canvas with your image to MainPage.xaml (notice 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 move your mouse over the image, the image will be translated from either left to right or right to left. When you leave the image, it will go back to its original position.

Silverlight: animate and/or pan an image

3 Answers