Mousewheel Zooms in Silverlight 1.1

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:

<Canvas>

    <Canvas.RenderTransform>

        <ScaleTransform x:Name=“ZoomTransform“ />

    </Canvas.RenderTransform>

    <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“ />

</Canvas>

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

[System.Windows.Browser.Scriptable]

public partial class Page : Canvas

{

    public void Page_Loaded(object o, EventArgs e)

    {

        InitializeComponent();

        WebApplication.Current.RegisterScriptableObject

            (“magic”, this);

    }

    [System.Windows.Browser.Scriptable]

    public void ZoomIn()

    {

        ZoomTransform.ScaleX += 0.1;

        ZoomTransform.ScaleY += 0.1;

    }

    [System.Windows.Browser.Scriptable]

    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)

        window.addEventListener(‘DOMMouseScroll’,

            OnMouseWheelTurned, false);

    window.onmousewheel = document.onmousewheel =

        OnMouseWheelTurned;

}

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)

            _control.content.magic.ZoomIn();

        else

            _control.content.magic.ZoomOut();

    }

    if (event.preventDefault)

        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!