Wahlin on .NET
Silverlight XAML Primer 5: Working with Radial Gradients
Dan walks you through working with the XAML RadialGradientBrush element in Silverlight.
Silverlight provides linear and radial gradient capabilities that allow different types of shapes to be filled with a range of colors. Linear gradients show colors along a line (refer to my
previous article for additional information) while radial gradients show colors within a circle. In this article, I'll explore radial gradients and demonstrate how they can be created using the XAML RadialGradientBrush element.
Creating Radial Gradients
Radial gradients are very similar to linear gradients in the way they're created and used. Both types of gradients rely on the GradientStop element to define colors and offset that need to be applied to a particular XAML element. By using radial gradients, you can apply interesting effects within a Silverlight canvas to provide end users with a more professional-looking interface.
Listing 1 shows an example of using the RadialGradientBrush element to fill an ellipse with a radial gradient. I doubt you'd want to show all of these colors together, but the XAML demonstrates how multiple colors can be defined and how they can be offset from each other. Like linear gradients, colors are offset from each other on a scale from 0 to 1 using the Offset attribute of the GradientStop element. Figure 1 shows an example of what the radial gradient looks like.
The RadialGradientBrush provides several different attributes such as Center, GradientOrigin, RadiusX and RadiusY to control where the gradient is displayed and how it's shown. The Silverlight SDK provides the following details about these attributes:
| Attribute |
Description |
| Center |
Used to get or set the center of the outermost circle of the radial gradient. The default value is 0.5,0.5. |
| GradientOrigin |
Used to get or set the location of the two-dimensional focal point that defines the beginning of the gradient. When GradientOrigin and Center are offset an illusion/effect of a specular highlight from an "off-center" lighting source can be created. This technique is very useful for creating 3-D effects out of 2-D objects. The default value is 0.5,0.5. |
| RadiusX |
Used to get or set the horizontal radius of the outermost circle of the radial gradient. The default value is 0.5. |
| RadiusY |
Used to get or set the vertical radius of the outermost circle of the radial gradient. The default value is 0.5. |
By combining radial brushes within a canvas, you can simulate simple lighting effects to create 3-D-style objects. While I recommend using Microsoft's Expression Blend 2 product to create gradients due to the amount of time it'll save you, the radial gradients shown in Listing 2 were created from scratch to demonstrate what can be done with gradients as you play around with offsets and colors.
Figure 2 shows an example of the output that's generated when the XAML shown in Listing 2 is rendered by Silverlight. There are multiple ways to achieve the same output, but the XAML represents a fairly straightforward way to achieve lighting effects to simulate rounded surfaces. I'll leave it as an exercise for the reader to enhance the XAML to make the object look even more realistic.
About the Author
Dan Wahlin (Microsoft MVP for ASP.NET and XML Web Services) is the founder of The Wahlin Group which specializes in .NET and SharePoint onsite, online and video training and consulting solutions. Dan also founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, Silverlight and Web Services in Microsoft's .NET platform. He's also on the INETA Speaker's Bureau and speaks at conferences and user groups around the world. Dan has written several books on .NET including "Professional Silverlight 2 for ASP.NET Developers," "Professional ASP.NET 3.5 AJAX, ASP.NET 2.0 MVP Hacks and Tips," and "XML for ASP.NET Developers." Read Dan's blog here.