Using RadialGradientBrush in Silverlight 4.0

This is my third article in a series focusing on the basics of painting shapes in a Silverlight application using both declarative and code-behind methods. In this article, we will cover gradient painting in depth by using RadialGradientBrush in Silverlight.

Contributed by Jagadish Chaterjee
Rating:

/ 1
June 23, 2010

Rate this Article:
MEH MEH++

SEARCH ASP FREE

The entire source code for this article is available in the form of a free downloadable zip file. The solution was developed using Microsoft Visual Studio 2010 Ultimate Edition with Microsoft Silverlight 4.0 RC2 on Windows 7 Ultimate edition. I didn’t really test it in any other environment. I request that you post in the discussion area if you have any problems with execution.

Introducing the RadialGradientBrush in Silverlight

My previous article focused completely on LinearGradientBrush to paint surfaces in various gradient combinations. If you are completely new to gradients, I strongly recommend that you go through that earlier article, as most of this article follows the same approach.

RadialGradientBrush is similar to LinearGradientBrush, except that the surface (shape/control) gets painted in a circular/elliptical fashion with a blend of colors.

Let's start with the following code:

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

The above would deliver the result shown below:

In the above code we are using a new element called “RadialGradientBrush.” Like “LinearGradientBrush,” this also works with multiple GradientStops where each of the GradientStops define a color within the gradient pattern (of the whole painting). In the above case, we are asking the radial to have two colors of gradient available (Red and Blue). The painting starts from the center of the radial with the first GradientStop color (in this case, it is red). And, gradually, it blends to the rest of the GradientStop colors (in this case, only to blue) until it reaches the border. We will cover “Offset” a bit later.

We can achieve the above using code-behind as follows:

Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

'start: Simple Radial Gradient (code-behind)

Dim brRBGrad = New RadialGradientBrush

Dim GradRed As New GradientStop()

GradRed.Color = ColorHelper.Red

GradRed.Offset = 0

brRBGrad.GradientStops.Add(GradRed)

Dim GradBlue As New GradientStop()

GradBlue.Color = ColorHelper.Blue

GradBlue.Offset = 1

brRBGrad.GradientStops.Add(GradBlue)

Me.Rectangle1.Fill = brRBGrad

'end: Simple Radial Gradient (code-behind)

End Sub

Offsets in GradientStops of RadialGradientBrush

In the previous section, we saw how to specify GradientStops for a RadialGradientBrush. In this section, we will dig into “Offsets” of GradientStops and their usage with respect to RadialGradientBrush.

Let us start with an example:

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

An “Offset” determines the stopping point of the gradient color. It can take any value between 0 and 1 (0 being the center of the radial and 1 being the border of the radial). Providing a value greater than 1 would cause blending to cross the borders. This may not be visible beyond the bounds of the shape, but would certainly lead to a different effect.

You can understand the above code from the following:

We can achieve the above using code-behind as follows:

Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

'start: Radial Gradient - Offset Sample 1 (code-behind)

Dim brYRBGrad = New RadialGradientBrush

Dim GradYellow As New GradientStop()

GradYellow.Color = ColorHelper.Yellow

GradYellow.Offset = 0

brYRBGrad.GradientStops.Add(GradYellow)

Dim GradRed As New GradientStop()

GradRed.Color = ColorHelper.Red

GradRed.Offset = 0.5

brYRBGrad.GradientStops.Add(GradRed)

Dim GradBlue As New GradientStop()

GradBlue.Color = ColorHelper.Blue

GradBlue.Offset = 1

brYRBGrad.GradientStops.Add(GradBlue)

Me.Rectangle1.Fill = brYRBGrad

'end: Radial Gradient - Offset Sample 1 (code-behind)

End Sub

Playing with Origins using RadialGradientBrush

I already explained the “StartPoint” and “EndPoint” of the “LinearGradientBrush” class in my previous article. The “GradientOrigin” of “RadialGradientBrush” is similar to the “StartPoint” of “LinearGradientBrush.” It simply determines the starting point of entire gradient pattern (with the surface/shape area). The default value is “0.5, 0.5” (nothing but the center of the radial).

Let us try to understand from an example:

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

The above would give you the output shown below:

The co-ordinate “0, 0” stands for “Top, Left.” Similarly, you can achieve different other effects with the following combinations:

Top-Right:

Bottom-left:

Bottom-Right:

Left-side:

Right-Middle:

Top-Middle:

Bottom-Middle:

You can specify “GradientOrigin” from the code-behind as follows:

Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

'start: Working with GradientOrigin (from top-left) (code-behind)

Dim brRBGrad = New RadialGradientBrush

brRBGrad.GradientOrigin = New Point(0, 0)

Dim GradRed As New GradientStop()

GradRed.Color = ColorHelper.Red

GradRed.Offset = 0

brRBGrad.GradientStops.Add(GradRed)

Dim GradBlue As New GradientStop()

GradBlue.Color = ColorHelper.Blue

GradBlue.Offset = 1

brRBGrad.GradientStops.Add(GradBlue)

Me.Rectangle1.Fill = brRBGrad

'end: Working with GradientOrigin (from top-left) (code-behind)

End Sub

Understanding RadiusX, RadiusY and Center of RadialGradientBrush

You can control the width and height of the radial using the “RadiusX” and “RadiusY” properties available with “RadialGradientBrush.” The values for “RadiusX” or “RadiusY” are similar to that of GradientPoint’s “Offset.”

Vertical Elliptical Radial:

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

The above gives the following output.

Horizontal Elliptical Radial:

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

The above gives the following output.

Up to now, we've played with gradient position and size using “GradientOrigin,” “RadiusX” and “RadiusY.” Let us be crystal clear: we changed the position of the gradient (in the radial) using “GradientOrigin,” we modified gradient behaviors using “Offset,” and finally, we resized the radial itself using “RadiusX” and “RadiusY.”

But we did not move the radial itself. This can be achieved using “Center.”

Consider the following example:

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

You need to concentrate on both “Center” and “GradientOrigin” in the above code. Those settings move the radial to the position specified, and we are also making the same position the gradient origin.

The above gives the following output.

Further, we can apply the above to achieve a 3D sphere effect (using the Ellipse shape) as shown below:

<Ellipse.Fill>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

The above would give you the following output.

All of the settings seen in this section can be easily applied in code-behind using the “RadialGradientBrush” object.

Miscellaneous Effects/Features of RadialGradientBrush

All of the features I am about to demonstrate in this section are explained clearly in my previous article on the “LinearGradientBrush.” If you still have any questions/doubts regarding these features, you can post in the discussion area.

Applying a transparency (Moon effect) to RadialGradientBrush:

<Ellipse.Fill>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

The following is the output for the above:

“SpreadMethod” with “Repeat”:

<Ellipse.Fill>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

The following is the output for the above:

“SpreadMethod” with “Reflect”:

<Ellipse.Fill>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

The following is the output for the above:

In my upcoming articles, we will see more examples of Silverlight 4.0 development. I hope you enjoyed this article; any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com