What you need :
 
• be familiar with Blend
• be familiar with Visual Studio
• half an hour

 
 
 

Introduction

 
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.

 
 

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.

 
 

Transparency

 
 


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
            InitializeComponent();
            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;
        }
    }
}

 
 
 

Conclusion

 
 
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.
 
 

• A .cs file, named with your new Custom Control name
• A directory named Themes
• A generic.xaml file in it (just delete generic.xaml.cs if it was created)

A basic custom control .cs file (the logic part):

 
using System.Windows.Controls;
 
namespace Custom_Control_1
{
    public class EditableTextBlock : Control
    {
        public EditableTextBlock()
        {
            DefaultStyleKey = typeof(EditableTextBlock);
        }
    }
}

A basic custom control generic.xaml file (the graphic part):

 
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:controls="clr-namespace:Custom_Control_1">
    <Style TargetType="controls:EditableTextBlock">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:EditableTextBlock">
                    <Grid Background="AliceBlue">
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Now, to test, you need to add the xmlns of your namespace, and add the usercontrol :

 
<UserControl x:Class="Custom_Control_1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ctrl="clr-namespace:Custom_Control_1"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <ctrl:EditableTextBlock></ctrl:EditableTextBlock>
    </Grid>
</UserControl>

In the next article, we’ll see how to bind properties with TemplateBinding.
Don’t forgot to read the MSDN !

This is not hard but you have to be famialiar with Blend.

download this video

Everybody developping in Silverlight knows that there’s no password textbox, and some of us rewrite a UserControl to replace it… yeark !!
There’s a so simple way to create a password textbox :
Use a TextBox and change the font with a home made font in which all characters are ‘*’ …
0 lines of code, do it in XAML

<TextBox FontFamily="password.ttf#Password"/>

FontFamily can download a file and pick a font from this file, the syntaxe is given “file.ttf#fontname” in my password.ttf the font name is “Password”, with the .ttf have to be in your ClientBin (relatives or absolute URI can be used with nothing, the root directory is checked, so put it in your ClientBin)
According to TimHeuer’s comment, after beta 2, embedding fonts will not work with this way, so watch his video Using custom fonts in silverlight to do it with the right way :)

Dont want to create a .ttf ? download mine. password.ttf