SilverLight 3 Beginner question: Scroll with mousewheel and zoom image with panning

Question

Hello, I would like to make a small silverlight app which displays one fairly large image which can be zoomed in by scrolling the mouse and then panned with the mouse. it's similar to the function in google maps and i do not want to use deepzoom.

here is what i have at the moment. please keep in mind that this is my first silverlight app: this app is just for me to see it's a good way to build in a website. so it's a demo app and therefor has bad variable names.

the initial image is 1800px width.

    private void sc_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        var st = (ScaleTransform)plaatje.RenderTransform;
        double zoom = e.Delta > 0 ? .1 : -.1;
        st.ScaleX += zoom;
        st.ScaleY += zoom;
    }

this works, but could use some smoothing and it's positioned top left and not centered.

the panning is like this: found it @ http://stackoverflow.com/questions/741956/wpf-pan-zoom-image and converted it to this below to work in silverlight

    Point start;
    Point origin;
    bool captured = false;

    private void plaatje_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        plaatje.CaptureMouse();
        captured = true;
        var tt = (TranslateTransform)((TransformGroup)plaatje.RenderTransform)
            .Children.First(tr => tr is TranslateTransform);
        start = e.GetPosition(canvasje);
        origin = new Point(tt.X, tt.Y);
    }

    private void plaatje_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        plaatje.ReleaseMouseCapture();
        captured = false;
    }

    private void plaatje_MouseMove(object sender, MouseEventArgs e)
    {
        if (!captured) return;

        var tt = (TranslateTransform)((TransformGroup)plaatje.RenderTransform).Children.First(tr => tr is TranslateTransform);
        double xVerschuiving = start.X - e.GetPosition(canvasje).X;
        double yVerschuiving = start.Y - e.GetPosition(canvasje).Y;
        tt.X = origin.X - xVerschuiving;
        tt.Y = origin.Y - yVerschuiving;
    }

so the scaling isn't smooth and the panning isn't working, because when i click it, the image disappears.

thanks in advanced!

Answer 1

Hi there,

first thing I noticed was this:

var st = (ScaleTransform)plaatje.RenderTransform;

and

(TransformGroup)plaatje.RenderTransform

. So in one handler, you're casting "plaatje.RenderTransform" to ScaleTransform, in the other you're casting to TransformGroup? This is probably causing an exception, making your image disappear.

For the zooming part, you might want to try setting the RenderTransformOrigin of the object you want to scale ("plaatje"?) to "0.5,0.5", meaning the center of the UI element. So the image will be scaled around its center point instead of its top left corner.

Cheers, Alex