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



Sample 


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


 

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:

    Hi,

    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,

    Rune

  5. nikola says:

    Hi Rune,

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

    Nikola

Skip to main content