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: https://www.nokola.com/sources/SaturationLight.zip

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:

<Image.OpacityMask>

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

    </RadialGradientBrush>

</Image.OpacityMask>

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()

{

    InitializeComponent();

    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: https://www.wintellect.com/cs/blogs/jprosise/archive/2008/03/18/mousewheel-zooms-in-silverlight-2-0.aspx.

Peter Blois also has a good post wheel and deep zoom, if you’re interested: https://blois.us/blog/2008/03/ive-heard-number-of-people-wondering.html

private void OnMouseWheelTurned(object sender, HtmlEventArgs args)

{

    if (!_isMouseInside) {

        return;

    }

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

    MouseWheelTurned(delta);

    if (delta != 0)

    {

        args.PreventDefault();

        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.