May 19th, 2009

Zoom in and out using the Mouse wheel in Silverlight

Silverlight 2 tutorials, Silverlight C# Tutorials, Silverlight Effects, by Gavin Wignall.
Below is an example showing a simple zoom in / out interaction controlled via the mouse wheel, a slider and some buttons. *Please note, mouse wheel functionality not currently working in the Google Chrome browser. Due to the Silverlight example being displayed within an iFrame you will experience issues with scrolling, to open the example in a new window click here.

First off I add the following reference at the top of my C# file so that we can interact with the browser;

using System.Windows.Browser;

To then listen for the Mouse wheel interaction I set events in the browser using the following piece of C#;

HtmlPage.Window.AttachEvent(“DOMMouseScroll”, OnMouseWheel);
HtmlPage.Window.AttachEvent(“onmousewheel”, OnMouseWheel);
HtmlPage.Document.AttachEvent(“onmousewheel”, OnMouseWheel);

I can then check for a value to see if the mouse wheel is being moved forward or backward using the following Method;

private void OnMouseWheel(object sender, HtmlEventArgs args)
{
double mouseDelta = 0;
ScriptObject e = args.EventObject;

// Mozilla and Safari
if (e.GetProperty(“detail”) != null)
{
mouseDelta = ((double)e.GetProperty(“detail”));
}
// IE and Opera
else if (e.GetProperty(“wheelDelta”) != null)
mouseDelta = ((double)e.GetProperty(“wheelDelta”));
mouseDelta = Math.Sign(mouseDelta);
}

This now gives me a value in the form of ‘mouseDelta’ which can be applied to what ever you want your interaction to be. In this case we are controlling the scale factor of a canvas.

To limit the scale factor I run a check to see if the scale value has gone under 1 or over 10 and if so reset the value to the minimum or maximum amount;

if (ScaleFactor.ScaleX < 1)
{
ScaleFactor.ScaleX = 1;
ScaleFactor.ScaleY = 1;
}

if (ScaleFactor.ScaleX > 10)
{
ScaleFactor.ScaleX = 10;
ScaleFactor.ScaleY = 10;
}

I also check where the mouse cursor is and focus the zoom in / out on that position. I do this by storing the mouse co-ordinates everytime the user moves their mouse and then changing the ‘RenderTransformOrigin’ value;

//get mouse co-ordinates
void zoomArea_MouseMove(object sender, MouseEventArgs e)
{
pt = e.GetPosition(zoomArea);
}

//change the RenderTransformOrigin
zoomArea.RenderTransformOrigin = new Point(pt.X / zoomArea.Width, pt.Y / zoomArea.Height);

Get the code

You can download the above example here.

Back Top

Responses to “Zoom in and out using the Mouse wheel in Silverlight”

  1. This looks good, however unfortunately when I use the mouse-wheel is not only zooms the silverlight application but also performs a vertical scroll of my browser window! (Firefox 3.0.10)

    Regards, Colin E.

  2. Thanks for your helpful example.

    As I needed to get it working in Google Chrome, I found that Google Chrome 2.0.172.33 has both the properties, “detail”, which returns 0.0 and “wheelDelta” which returns a valid integer value.

    I modified the code snippet as below to get the example working in Google Chrome.

    // IE, Google Chrome and Opera
    if (e.GetProperty(”wheelDelta”) != null)
    {
    mouseDelta = ((double)e.GetProperty(”wheelDelta”));
    }
    // Mozilla and Safari
    else if (e.GetProperty(”detail”) != null)
    {
    mouseDelta = ((double)e.GetProperty(”detail”));
    }
    mouseDelta = Math.Sign(mouseDelta);

    Thanks again,
    Scotto

    Scott Rogers at July 9, 2009 6:08 am
  3. Thanks Scotto that’s great, I’ll get the example source updated as soon as I get a chance!

  4. There’s a bug: If you are zoomed in on one point, and move your mouse to a different point to zoom, zoomArea “jumps”.

    Does anyone know a fix for this?

  5. Another bug is that it only seems to work when the ScaleX and ScaleY are >= 1 . Massive jumping occurs if your Canvas is already scaled beneath 1 the start.

    If I come up with a fix, I’ll post here. Thanks for posting this. It’s way better than what I was getting when I was trying to calculate the margin based on the scale and offset the position with that.

  1. Links da Semana (25-29) - Gonçalo Chaves - XAML PT (,May 29, 2009)

    [...] Trabalhar com Zoom em Silverlight -  Mais um bom exemplo, de como podemos trabalhar com as funções de zoom numa aplicação silverlight. Como apanhar os eventos do rato, bem como a famosa “rodinha”, para o Zoom. [...]

  2. CodeEase.com » Blog Archive » Silverlight, WPF, AutoCAD, Zoom (,September 10, 2010)

    [...] 4: Zoom in and out using the Mouse wheel in Silverlight [...]

Leave a Reply

Back Top