Image Effects with Silverlight: Creating the Saturation Light Sample

This sample demonstrates the following:

1.       Simulating any image effect with Silverlight

2.       Using the mouse wheel in a Silverlight application


Download sample source code:

The main XAML consists of 2 images:

1.       Saturated image

2.       Desaturated image

To create the visual effect of a “light” I added an opacity mask to the saturated image and set it to this radial gradient brush:


    <RadialGradientBrush RadiusX="0.46" RadiusY="0.64" GradientOrigin="0,0" Center="0,0" x:Name="brushLight" Opacity="0">

        <GradientStop Offset="0" Color="#FF000000"/>

        <GradientStop Offset="1" Color="#00000000"/>




The GradientOrigin and Center control where the “light” is situated on the image. When we move the mouse on the image we change the light position like this:

Point tempPoint = new Point(0, 0);

private void imageSat_MouseMove(object sender, MouseEventArgs e)


    _isMouseInside = true;

    Point p = e.GetPosition(imageSat);

    tempPoint.X = p.X / imageSat.ActualWidth;

    tempPoint.Y = p.Y / imageSat.ActualHeight;

    brushLight.Center = tempPoint;

    brushLight.GradientOrigin = tempPoint;



Mouse wheel control

Is achieved by talking back to the DOM from the Silverlight app:

public Page()




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

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

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



Note that there are several checks for IE, Opera, Mozilla and Safari because the underlying DOM implementation is not the same.

The below code is a slightly modified version of the code on Jeff Prosise’s blog:

Peter Blois also has a good post wheel and deep zoom, if you’re interested:

private void OnMouseWheelTurned(object sender, HtmlEventArgs args)


    if (!_isMouseInside) {




    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"));



    delta = Math.Sign(delta);



    if (delta != 0)



        e.SetProperty("returnValue", false);





private void MouseWheelTurned(double delta)


    brushLight.RadiusX += 0.46*0.06*delta;

    brushLight.RadiusY += 0.64*0.06*delta;



I guess that by using the “Saturation light” method by combining 2 images, you can achieve any image effect you’d like. For example: making a person’s or animal’s eyes “light up” when you move over their picture, or making all kinds of dodge, burn, blurs, etc image effects.


Comments (6)

  1. Straylight says:

    Very neat effect.  Great use of an opacity mask.  I was just thinking today how nice it would be if opacity masks could somehow "filter-out" a color (or "filter-in" a color).  This is an ingenious way to do just that…

  2. nikola says:

    Thanks! It would be nice to see your demo, once published, if you plan to have something like "filter out a color".

  3. Wow! I knew that Silverlight was a superb technology the first time I saw it but your control really brings home the granular flexibility and it’s .NET!

  4. Rune Brattas says:


    Please notice the project is asking for project gocider; which is not included in your zip file.

    The project work without gocider project.

    Thank you,


  5. nikola says:

    Hi Rune,

    Thank you for the note! I’ll fix it up!


Skip to main content