Mousewheel Zooms in Silverlight 2.0

9 Comments March 18, 2008

A few weeks ago I posted a short code sample demonstrating how to do mousewheel zooms in Silverlight 1.1. They're easier to do in Silverlight 2.0 and can be done without calling out of managed code, thanks to the new HtmlWindow class (and the HtmlPage.Window property, which returns a reference to an HtmlWindow).

Here's a summary. First, assume you have a ScaleTransform that facilitates zooms:

<ScaleTransform x:Name="ZoomTransform" />

Next, when the page loads, use HtmlWindow.AttachEvent to register a managed handler for mousewheel events:

HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheelTurned);

HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheelTurned);

HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheelTurned);

Here's the event handler that responds to mousewheel events by manipulating the ScaleTransform:

private void OnMouseWheelTurned(Object sender, HtmlEventArgs args)


    double delta = 0;

    ScriptObject e = args.EventObject;


    if (e.GetProperty("wheelDelta") != null) // IE and Opera


        delta = ((double)e.GetProperty("wheelDelta"));

        if (HtmlPage.Window.GetProperty("opera") != null)

            delta = -delta;


    else if (e.GetProperty("detail") != null) // Mozilla and Safari


        delta = -((double)e.GetProperty("detail"));



    if (delta > 0)


        // Zoom in

        ZoomTransform.ScaleX += 0.1;

        ZoomTransform.ScaleY += 0.1;


    else if (delta < 0)


        // Zoom out

        ZoomTransform.ScaleX -= 0.1;

        ZoomTransform.ScaleY -= 0.1;



    if (delta != 0)



        e.SetProperty("returnValue", false);



Anything affected by the ScaleTransform will now scale up and down with mousewheel movements.

My mousewheel event handler is browser-independent and correctly reports the direction of travel, but it doesn't take into account the differences in the magnitude of travel reported by various browsers. Scott Hanselman pointed me to an excellent blog post by Pete Blois that includes downloadable source code for a MouseWheelHelper class that accounts for differences in magnitude, too. Check it out if you want to make mousewheel handling simple as pie in Silverlight 2.0.


  • Gravatar Image
    Tiago Andrade e Silva March 28, 2008 8:18 PM

    Marcas Technorati: silverlight Ao ler o Blog do Jeff Prosise encontrei um conjunto de links interessantes

  • Gravatar Image
    Vincent Vergonjeanne April 12, 2008 5:21 AM

    Thanks for this post. Really usefull.


  • Gravatar Image
    XAML, WPF, Silverlight, .NET, Office 2007, Windows April 23, 2008 7:41 PM

    This sample demonstrates the following: 1. Simulating any image effect with Silverlight 2. Using the

  • Gravatar Image
    Shahkar May 1, 2008 2:09 PM

    Its always useful if you upload a small source code file. That will help a newbie like me

  • Gravatar Image
    Shahkar May 1, 2008 2:11 PM

    When i try to add your code in page.xaml.cs ..i get this error

    Expected class, delegate, enum, interface, or struct

  • Gravatar Image
    Shahkar May 1, 2008 2:14 PM

    It worked. Sorry my bad. I was adding the code in wrong place.


  • Gravatar Image
    simon August 22, 2008 3:08 PM

    Hurray! I've been struggling to figure this out for a while now.
    Thank you!

    I also needed to include:
    using System.Windows.Browser;

  • Gravatar Image
    sajan October 14, 2010 5:03 AM

    it worked but zoomng is old style.......not fit for silverlight..

  • Gravatar Image
    Johnette July 29, 2011 1:38 AM

    That's way more clveer than I was expecting. Thanks!

Have a Comment?