XAML Tip: Gradients

XAML makes a lot of things easier. Technically, everything you can do in XAML can also be done in other UI platforms, but XAML just makes it so simple that you're more likely to do them.  What this also means is that we need to think a bit differently when it comes to designing our UIs.

Gradients in the Real World
First, I'll start by saying that I am not a designer; most of these tips have come people way smarter than I am.  Personally, I like gradients -- probably a little bit too much.  They have the ability to make some things look more natural.

There are no solid colors in the real world.  Think about this for a moment.  There are a lot of colors that we perceive as being solid, but when we really look at them, there is some sort of variation (from top to bottom, from side to side, or from some arbitrary angle) based on how the light hits the object.  Because of this, we can add gradients to our applications to make them look more natural; they can also add a bit of visual interest as well.

Gradients in XAML
XAML makes it very easy to add a gradient.  All we need to do is create a gradient brush, and we have a couple of options for that: LinearGradientBrush and RadialGradientBrush.  The LinearGradientBrush lets us create gradients that move evenly from top to bottom, from left ot right, or from one side to another at whatever angle we choose.  The RadialGradientBrush starts at a point and radiates outward (you can think about this as the highlight that you see on the surface of a sphere).

When you create the gradient brush, you specify the gradient stops.  This is how you let XAML know where each color should be along the continuum.  If you've taken a look at my samples, you know that I have a particular gradient background that I always use.  (I'm not recommending this.  It's something that I'm used to that doesn't look too bad.)

Here's the gradient definition:

And what it looks like:

What this means: the start point is the starting point for our gradient.  In this case, we are using point "0,0" which is at the top-right of the control.  The end point "1,1" specifies the bottom-left corner.  So, we will end up with a diagonal gradient.  Next we have 2 or more gradient stops.  The offset value is a value between 0 and 1 to specify where the color should be.  In this case, the first gradient stop is at "0", meaning put Alice Blue at the beginning of the gradient (in this case, the top-right corner).  The second gradient stop is at "0.7" which you can translate as 70% across the gradient.  This point should be Steel Blue.  Since we do not have any additional gradient stops, this color will be "solid" through the end of the gradient.

The great thing about specifying gradients in XAML is that we just specify the gradient stops (where we want our "solid" colors to be).  The XAML renderer figures out how to make the smooth transition from one color to the next.

Gradients in the UI
Here's another example of an application that uses gradients as control backgrounds.  Note: this is an actual application that I wrote and deployed (but the names have been changed to protect the innocent).

Here you can see gradients in the header, the client area, and the login box.  One thing to note about these gradients is that they move from one color to a similar color.  In the case of the client area, it moves from "Ivory" to "Moccasin" and back to "Ivory".  The login box moves from "Steel Blue" to "Dark Blue" and back to "Steel Blue".

Here is the gradient that's used for the header and login box:

This is a little different from our previous gradient.  First, the start point and end point specify that this will be a gradient that goes from top to bottom.  This time we have 3 gradient stops.  The first one specifies Steel Blue at the start point.  The second specifies Dark Blue at the 90% mark.  The third goes back to Steel Blue at the 100% mark.  We can see this as the color moves gradually from Steel Blue (the lighter blue) to Dark Blue, and then quickly back to Steel Blue.
If we were to move from "Steel Blue" to "Orange", things would look a little strange.  Think about the gradients that we see in nature.  We see subtle differences in colors -- moving from white to gray, or from lemon yellow to a darker yellow.  If we create a jarring gradient, then it has the same effect as a rainbow wig -- attention getting, jarring, and unnatural.

Subtler Gradients
In addition to using gradients for control backgrounds, we can also use them more subtly.  Take a look at the following screenshot:

Can you tell how this differs from the screenshot above?  If you're anything like me, you can see a difference and maybe have a preference, but you have difficulty pointing out what the difference is.  Here's are side-by-side comparisons of the affected area:

The difference is that we applied a gradient to the text of the application name.  The great thing about XAML is that it makes this incredibly easy.  In fact, for this sample, we're using the same gradient for the header, the login box, and the application name.  This gradient is stored as an application resource in the App.xaml file.  This makes it easy to share across our screens (and also very easy to update if we change our design).

We'll be looking at this application in a little more detail in future posts.  At that point, we'll see a few more cool XAML features and how it can add value to our UI.

Happy Coding!