(1 votes)

Creating a Glowing effect in Silverlight 2

5 comments   /   posted by Martin Mihaylov on Sep 03, 2008

Update: The demo, the source code and the code in the article are compatible with Silverlight 2 RTW. The only changes I made were to the object element in the host page.

In this article we'll try to create a Silverlight Glowing effect that will be used along with other Silverlight controls. It's going to behave like the Border control and will have two shapes - rectangle and ellipse. Obviously it won't be used along with triangles or polygons. The control should also allow us to set its color, the spread of the glowing, its height and width and its shape. We can easily align it to the control that we want to have glowing effect, just like we do with the Border control. So let's get to the job!

Live Demo | Sample Source Code

What we need:

  • One Grid with 3 rows and 3 columns
  • 9 Rectangles
  • Some LinearGradientBrushes and RadialGradientBrushes
  • Set of properties, that will allow the user to adjust the control to his likings and needs
  • Methods and handlers where needed

Configuring the Grid

Here is the Grid:

<Grid x:Name="LayoutRoot" Background="#00000000" Width="Auto" Height="Auto">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
</Grid>

We have defined 3 rows and 3 columns. Note that the width and respectively the height are set to "Auto". That's because the size of the control is dynamic and we want the cells to take the size of the content in them. We also set the background to be transparent. The first two "0"s in "#00000000" indicate that the opacity is 0. If they were two "f"s ("#ff000000") the opacity would have been 255 or 100%.

Adding the Rectangles and the Gradients

As you probably have already figured it out, we place one rectangle in each cell. After this step we're going to fill them with gradients, but that later. I gave the Rectangles names depending on their position in the grid, for example TopLeft, BottomRight, Middle etc. Here is the idea:

 

All rectnagles except the middle one will be filled with Gradients - the corner rectangles with RadialGradientBrushes and the side rectangles with LinearGradientBrushes, so we can form the glowing like a rectangle. If we want to create an ellipse shaped glowing we just "remove" the side rectangles and than the corner rectangles will form an ellipse, due to the radial gradients. Here is the code:

<Grid x:Name="LayoutRoot" Background="#00000000" Width="Auto" Height="Auto" ShowGridLines="False">
    <Grid.RowDefinitions...>
    <Grid.ColumnDefinitions...>
    <Rectangle Grid.Row="0" Grid.Column="0" x:Name="TopLeft">
        <Rectangle.Fill>
            <RadialGradientBrush Center="1.0,1.0" RadiusX="1" RadiusY="1" GradientOrigin="1.0,1.0" >
                <GradientStop x:Name="TopLeftPrimary" Color="#B4ffcc00" Offset="0"></GradientStop>
                <GradientStop x:Name="TopLeftSecondary" Color="#00000000" Offset="1"></GradientStop>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Row="0" Grid.Column="1" x:Name="Top">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
                <GradientStop x:Name="TopSecondary" Color="#00000000" Offset="0.0"></GradientStop>
                <GradientStop x:Name="TopPrimary" Color="#B4ffcc00" Offset="1"></GradientStop>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Row="0" Grid.Column="2" x:Name="TopRight">
        <Rectangle.Fill>
            <RadialGradientBrush Center="0.0,1.0" RadiusX="1" RadiusY="1" GradientOrigin="0.0,1.0">
                <GradientStop x:Name="TopRightPrimary" Color="#B4ffcc00" Offset="0"></GradientStop>
                <GradientStop x:Name="TopRightSecondary" Color="#00000000" Offset="1"></GradientStop>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Row="1" Grid.Column="0" x:Name="MiddleLeft">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                <GradientStop x:Name="MiddleLeftSecondary" Color="#00000000" Offset="0.0"></GradientStop>
                <GradientStop x:Name="MiddleLeftPrimary" Color="#B4ffcc00" Offset="1"></GradientStop>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Row="1" Grid.Column="1" x:Name="Middle" Fill="#B4ffcc00">
    </Rectangle>
    <Rectangle Grid.Row="1" Grid.Column="2" x:Name="MiddleRight">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="1, 0.5" EndPoint="0, 0.5">
                <GradientStop x:Name="MiddleRightSecondary" Color="#00000000" Offset="0.0"></GradientStop>
                <GradientStop x:Name="MiddleRightPrimary" Color="#B4ffcc00" Offset="1"></GradientStop>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Row="2" Grid.Column="0" x:Name="BottomLeft">
        <Rectangle.Fill>
            <RadialGradientBrush Center="1.0,0.0" RadiusX="1" RadiusY="1" GradientOrigin="1.0,0.0" >
                <GradientStop x:Name="BottomLeftPrimary" Color="#B4ffcc00" Offset="0"></GradientStop>
                <GradientStop x:Name="BottomLeftSecondary" Color="#00000000" Offset="1"></GradientStop>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Row="2" Grid.Column="1" x:Name="Bottom">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.5, 1" EndPoint="0.5, 0">
                <GradientStop x:Name="BottomSecondary" Color="#00000000" Offset="0.0"></GradientStop>
                <GradientStop x:Name="BottomPrimary" Color="#B4ffcc00" Offset="1"></GradientStop>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Row="2" Grid.Column="2" x:Name="BottomRight">
        <Rectangle.Fill>
            <RadialGradientBrush Center="0.0,0.0" RadiusX="1" RadiusY="1" GradientOrigin="0.0,0.0" >
                <GradientStop x:Name="BottomRightPrimary" Color="#B4ffcc00" Offset="0"></GradientStop>
                <GradientStop x:Name="BottomRightSecondary" Color="#00000000" Offset="1"></GradientStop>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

I will not fall in explanations about the Gradients and their positioning in the rectangles, I think you can figure that out by yourself. Note that we always have two GradientStops - the first one is for the main color, and the second is transparent or will be set to the background color. The GradientStops have Names, that will be used later in order to manipulate the colors. Note also that the middle rectangle is solid color. It represents the control to which the glow effect will be applied. And when we set the width and the height of our control they will be applied to this rectangle. The size of the other rectangles depends on the spread of the glowing, which will be represented by its own property. Now as we have our Grid, Rectangles and Gradients ready, we can go to the codebehind file and continue with the work on our Glowing effect control.

The Properties

We want the users to be able to set the width, the height, the shape, the color and the spread of the glowing. For that purpose we create properties for each of them and set a default value of course. Let's start with the color of the glowing:

private Color glowColor = Color.FromArgb( 255, 255, 255, 255 );
 
public Color GlowColor
{
    get
    {
        return glowColor;
    }
    set
    {
        glowColor = value;
        this.TopLeftPrimary.Color = value;
        this.TopPrimary.Color = value;
        this.TopRightPrimary.Color = value;
        this.MiddleRightPrimary.Color = value;
        this.MiddleLeftPrimary.Color = value;
        this.BottomLeftPrimary.Color = value;
        this.BottomRightPrimary.Color = value;
        this.BottomPrimary.Color = value;
        this.Middle.Fill = new SolidColorBrush( value );
    }
}

When the color is set we change the color of the gradients to the selected value. And we create one more property for the BackgroundColor aka the secondary color of the gradient:

private Color backgroundColor = Color.FromArgb( 255, 0, 0, 0 );
 
public Color BackgroundColor
{
    get
    {
        return backgroundColor;
    }
    set
    {
        backgroundColor = value;
        glowColor = value;
        this.TopLeftSecondary.Color = value;
        this.TopSecondary.Color = value;
        this.TopRightSecondary.Color = value;
        this.MiddleRightSecondary.Color = value;
        this.MiddleLeftSecondary.Color = value;
        this.BottomLeftSecondary.Color = value;
        this.BottomRightSecondary.Color = value;
        this.BottomSecondary.Color = value;
    }
}

The next properties all affect the size or the form of our control. So when we set the we call a method that adjust the size or the form of it to the new values. But I'll explain it later in the article. The first one is the shape of the glowing. First we create an enumerator called GlowShapes:

public enum GlowShape
{
    Rectangular,
    Oval
}

And here is the property:

private GlowShapes shape = GlowShapes.Rectangular;
 
public GlowShapes Shape
{
    get
    {
        return shape;
    }
    set
    {
        shape = value;
 
        //Will be explained later
        this.AdjustSize();
    }
}

The next property is called Spread. It will determine the size of the glowing (how much it spreads away from the figure):

public double spread = 0;
 
public int Spread
{
    get
    {
        return spread;
    }
    set
    {
        spread = value;
 
        //Will be explained later
        this.AdjustSize();
    }
}

The last two properties will be used to set the height and the width of the figure that glows. I've called them ShapeWidth and ShapeHeight:

private double shapeWidth = 0;
private double shapeHeight = 0;
 
public double ShapeHeight
{
    get
    {
        return shapeHeight;
    }
    set
    {
        shapeHeight = value;
        this.AdjustSize();
    }
}
 
public double ShapeWidth
{
    get
    {
        return shapeWidth;
    }
    set
    {
        shapeWidth = value;
        this.AdjustSize();
    }
}

These are the properties we need. Now let's get to the helper method and an event handler that will come in handy.

Adjusting the size and the shape of our control

When one of the properties that regards the shape or the size of our control is set, we must apply the changes. That's why I create a method to do this job. It's called AdjustSize(). In it there is a switch for the GlowShape. Here is the code:

private void AdjustSize()
{
    switch( this.Shape )
    {
        case GlowShape.Rectangular:
            this.TopLeft.Height = this.Spread;
            this.TopLeft.Width = this.Spread;
            this.TopRight.Height = this.Spread;
            this.TopRight.Width = this.Spread;
            this.Top.Height = this.Spread;
            this.Top.Width = this.ShapeWidth;
            this.MiddleLeft.Width = this.Spread;
            this.MiddleLeft.Height = this.ShapeHeight;
            this.MiddleRight.Width = this.Spread;
            this.MiddleRight.Height = this.ShapeHeight;
            this.Middle.Height = this.ShapeHeight;
            this.Middle.Width = this.ShapeWidth;
            this.BottomLeft.Height = this.Spread;
            this.BottomLeft.Width = this.Spread;
            this.BottomRight.Height = this.Spread;
            this.BottomRight.Width = this.Spread;
            this.Bottom.Width = this.ShapeWidth;
            this.Bottom.Height = this.Spread;
            break;
        case GlowShape.Oval:
            this.TopLeft.Height = this.Spread + ( this.ShapeHeight / 2 );
            this.TopLeft.Width = this.Spread + ( this.ShapeWidth / 2 );
            this.TopRight.Height = this.Spread + ( this.ShapeHeight / 2 );
            this.TopRight.Width = this.Spread + ( this.ShapeWidth / 2 );
            this.Top.Height = 0;
            this.Top.Width = 0;
            this.MiddleLeft.Width = 0;
            this.MiddleLeft.Height = 0;
            this.MiddleRight.Width = 0;
            this.MiddleRight.Height = 0;