Wahlin on .NET

Silverlight XAML Primer 4: Working with Linear Gradients

Apply gradients to graphics, menus and even text.

• By Dan Wahlin
• 12/18/2007

Although it's recommended that you use a tool such as Expression Blend 2 to create gradients, in this column I'll focus on the fundamentals of gradients and explain how they can be created by hand using XAML; this will help you understand what happens behind the scenes. I'll focus on linear gradients in this column and cover radial gradients in the next.

Creating Linear Gradients
Silverlight provides several different types of brushes, such as SolidColorBrush, VideoBrush, LinearGradientBrush and ImageBrush (refer to my previous article for more information on using image brushes in Silverlight). There are two types of gradient brushes, including a linear brush and a radial brush. Linear brushes are used to define gradients along a line, whereas radial brushes are used to define gradients in a circle.

Gradients are composed of points that determine where one color starts and another ends. Silverlight takes these points (known as "gradient stops") and uses them to merge different colors together. Each gradient stop is defined using a GradientStop XAML element. Linear gradients allow stops to be defined between 0 and 1, where 0 represents the start position of the gradient (left side of a line) and 1 represents the end position of the gradient (right side of a line). Listing 1 shows an example of defining a gradient using the LinearGradientBrush and the GradientStop XAML elements.

In this example, the LinearGradientBrush is used to fill a Rectangle element with purple, red, navy, yellow and green colors. The brush starts by defining the start and end points for the gradient using the StartPoint and EndPoint attributes. As shown in Figure 1, the gradient in this case will move from 0,0 (the upper-left corner of the rectangle) to 1,1 (the lower-right corner of the rectangle).

The gradient brush also defines which colors should appear within the gradient using the GradientStop element. In this example, five different colors are defined, offset by 0.25 units from each other (recall that gradients start at 0 and end at 1, which is why 0.25 is used rather than 25). Figure 2 shows an example of the output rendered by the XAML shown in Listing 1.

If you want the gradient colors to be positioned vertically rather than at a diagonal as shown in Figure 2, you can change the StartPoint and EndPoint elements to 0,1 and 1,1, respectively, as shown in Listing 2. By changing the StartPoint to 0,1, the gradient will be positioned at 1 on the Y-axis to start and end, resulting in vertical gradient lines. Figure 3 shows the resulting output of making these start and end point changes.

Using Gradients
Gradients are nice in practice, but most people will agree that the ones that have been shown up to this point aren't really useful unless you're trying to illustrate the colors in a rainbow, or something like that. Of course, gradients can be very useful as backgrounds to make professional-looking toolbars, menus and text.

Figure 4 shows an example of a gradient used as the fill for a menu background (the XAML is available with this article's downloadable code and was based on XAML originally published at http://advertboy.wordpress.com). While you can certainly accomplish the same effect using a background image in HTML, Silverlight offers the ability to change the gradient colors and stops dynamically while also leveraging powerful animation features that allow various effects to be applied to menu items as users mouse over or select menu items. I'll discuss Silverlight animations more in a future column.

Listing 3 shows an example of applying a LinearGradientBrush to text and Figure 5 shows the output that's rendered in Silverlight. Looking through the XAML in Listing 3, you'll notice that the LinearGradientBrush has an additional attribute named SpreadMethod that has its value set to Repeat. SpreadMethod accepts three different values -- including Pad, Repeat and Reflect -- that can be used to change how a gradient appears. The default value is Pad.

In the next article, I'll discuss how radial gradients can be used to create gradient effects in circles and ellipses.