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

Posted by JP Hellemons on Stack Overflow See other posts from Stack Overflow or by JP Hellemons
Published on 2010-05-20T12:35:09Z Indexed on 2010/05/21 8:10 UTC
Read the original article Hit count: 479

Filed under:
|
|

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!

© Stack Overflow or respective owner

Related posts about silverlight-3.0

Related posts about xaml