Image Effects with Silverlight: Creating the Saturation Light Sample

nikola — Thu, 24 Apr 2008 02:27:00 GMT

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: http://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>

</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: http://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: http://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.

You had me at "Hello World!" : Demo

Image Effects with Silverlight: Creating the Saturation Light Sample

Mouse wheel control