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.