Yesterday I was asked how one can do mousewheel zooms in Silverlight 1.1 given that 1.1 doesn’t provide any mechanism for registering managed handlers for mousewheel events.

It can still be done, thanks to the fact that Silverlight 1.1 permits managed methods to be called from JavaScript. Here’s an example. Start with a XAML file containing a Canvas with a ScaleTransform. Here’s one that displays a smiley face:



        <ScaleTransform x:Name=ZoomTransform />


    <Ellipse Canvas.Left=20 Canvas.Top=20 Height=200

      Width=200 Stroke=Black StrokeThickness=10 Fill=Yellow />

    <Ellipse Canvas.Left=80 Canvas.Top=80 Height=35

      Width=25 Stroke=Black Fill=Black />

    <Ellipse Canvas.Left=140 Canvas.Top=80 Height=35

      Width=25 Stroke=Black Fill=Black />

    <Path Data=M 70, 150 A 60, 60 0 0 0 170, 150 Stroke=Black

      StrokeThickness=15 StrokeStartLineCap=Round

      StrokeEndLineCap=Round />


Next, register the XAML code-behind class as a scriptable class and include scriptable ZoomIn and ZoomOut methods, too:


public partial class Page : Canvas


    public void Page_Loaded(object o, EventArgs e)




            (“magic”, this);




    public void ZoomIn()


        ZoomTransform.ScaleX += 0.1;

        ZoomTransform.ScaleY += 0.1;




    public void ZoomOut()


        ZoomTransform.ScaleX -= 0.1;

        ZoomTransform.ScaleY -= 0.1;



Then, in the Silverlight control’s onLoad event handler (in JavaScript), register a JavaScript handler for mousewheel events. This example works in IE and Firefox, and maybe in other browsers as well:

var _control;


function onLoad(control, context, root)


    _control = control;

    if (window.addEventListener)


            OnMouseWheelTurned, false);

    window.onmousewheel = document.onmousewheel =



Finally, implement the mousewheel event handler in JavaScript and in it, include calls to the ZoomIn and ZoomOut methods written in C#:

function OnMouseWheelTurned(event)


    var delta = 0;

    if (!event)

        event = window.event;


    if (event.wheelDelta)


        delta = event.wheelDelta;

        if (window.opera)

            delta = -delta;


    else if (event.detail)

        delta = -event.detail;


    if (delta)


        if (delta > 0)






    if (event.preventDefault)


    event.returnValue = false;


Try it and you’ll see that it works very well. Silverlight 1.1’s DOM integration features make up for a variety of shortcomings in the platform itself. I rarely ever write a 1.1 app that doesn’t use DOM integration in one way or another!