Silverlight Tutorial – Flashlight Tutorial

How to make a flashlight effect with silverlight ?


    What you need :

  • be familiar with Blend
  • be familiar with Visual Studio
  • half an hour


    Many years ago, a friend taught me how to make a flash light effect with flash.
    You probably saw it in many tutorials.

    Today, we will try to do better with silverlight :)


    The Blend Part


      Create a new project

    I’m doing it with Blend, but you can use Visual Studio if you want.

      I’m doing it with Blend, but you can use Visual Studio if you want.


      Add an image


      Add it to the project.


      Resize the image to give it the same size that the LayoutRoot


      Draw a rectangle


      select the tool


      You should get this.


      Gradient Brush and Radial Gradient


      Set up the rectangle background as a gradientbrush


      And click on the radial gradient option


      You rectangle should look like this.




      Set the first gradiant to black


      For the other one, same color but set transparenrcy to half


      We begin to see the final result

      Draw your Flashlight


      Play with gradiant and try to make something which looks like a light.


      Here is the artistical part :)


      Well, i think i’m fine.


      For me, it looks like this.


      Transform the Brush

    if you want to be able to move, you have to enlarge the brush.

      Select the “Brush Transform” tool.


      Resize the brush to about one and half.


    The Visual Studio part



    Ok this part is ridiculous you have to add a method in FlashLight.xaml.cs to register mouse move.

    namespace FlashLight
        public partial class Page : UserControl
            public Page()
                // Required to initialize variables
                LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove);
            void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
                Point newPosition = e.GetPosition(this);
                RadialGradientBrush radialGradient = (RadialGradientBrush)Light.Fill;
                radialGradient.GradientOrigin = new Point(newPosition.X / 640, newPosition.Y / 400);
                Light.Fill = radialGradient;



    Actually, i’m pretty sure that you can do the same with the last version of Flash but this tutorial is a good exercise to practice with Blend.
    Thanks for reading. You can download the source code here.

This entry was posted in Blend, silverlight and tagged , . Bookmark the permalink.

One Response to Silverlight Tutorial – Flashlight Tutorial

  1. Congratulations, very nice article:)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>