Wahlin on .NET

Silverlight XAML Primer 4: Working with Linear Gradients

Apply gradients to graphics, menus and even text.

Gradients provide a way to blend multiple colors together to enhance text, shapes or canvases. Silverlight provides excellent support for working with different types of gradients and allows colors to be placed at multiple locations. While creating gradients by hand in XAML can be challenging, Microsoft's Expression Blend 2 tool (currently in preview release and available here) allows you to generate the XAML needed for displaying gradients quickly and easily.

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.

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.

comments powered by Disqus

Featured

  • Hands On: New VS Code Insiders Build Creates Web Page from Image in Seconds

    New Vision support with GitHub Copilot in the latest Visual Studio Code Insiders build takes a user-supplied mockup image and creates a web page from it in seconds, handling all the HTML and CSS.

  • Naive Bayes Regression Using C#

    Dr. James McCaffrey from Microsoft Research presents a complete end-to-end demonstration of the naive Bayes regression technique, where the goal is to predict a single numeric value. Compared to other machine learning regression techniques, naive Bayes regression is usually less accurate, but is simple, easy to implement and customize, works on both large and small datasets, is highly interpretable, and doesn't require tuning any hyperparameters.

  • VS Code Copilot Previews New GPT-4o AI Code Completion Model

    The 4o upgrade includes additional training on more than 275,000 high-quality public repositories in over 30 popular programming languages, said Microsoft-owned GitHub, which created the original "AI pair programmer" years ago.

  • Microsoft's Rust Embrace Continues with Azure SDK Beta

    "Rust's strong type system and ownership model help prevent common programming errors such as null pointer dereferencing and buffer overflows, leading to more secure and stable code."

  • Xcode IDE from Microsoft Archrival Apple Gets Copilot AI

    Just after expanding the reach of its Copilot AI coding assistant to the open-source Eclipse IDE, Microsoft showcased how it's going even further, providing details about a preview version for the Xcode IDE from archrival Apple.

Subscribe on YouTube

Upcoming Training Events