Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

November 3, 2009

XAML: Gradients

Filed under: C#,Silverlight,VB.NET,XAML @ 11:51 am

Gradients are a good way to make your application more visually interesting. They turn a flat solid color into something more natural and appealing to the eye by creating an illusion of light and shadow.

For example, compare this image which uses flat colors:

image

to this image that uses gradient colors:

image

For some great uses of gradient effects in user interface designs, see this link.

If you are not familiar with the terminology, a gradient is basically a blending of colors with an even graduation from one set of color values to another set of color values. Notice in the second image above, the white gradually blends into blue from the upper left corner to the lower right corner.

In Silverlight and WPF, you can set colors for just about anything, and wherever you can set a color you can often set a gradient. These examples color the background of the Canvas, but you could also paint Buttons or Rectangles or whatever.

In XAML, there are two primary types of gradients: Linear and Radial.

Linear Gradient

A linear gradient defines the graduation of colors along a line. The example below shows a linear gradient following a line from white at the top to blue at the bottom:

image

The XAML code required to set the linear gradient shown above is as follows:

<Canvas>
    <Canvas.Background>
        <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="LightSteelBlue" Offset="1"/> 
        </LinearGradientBrush>
    </Canvas.Background>

</Canvas>

This specific code sets the gradient for a Canvas background, but you could use it anywhere a gradient is allowed.

The first properties you need to consider when defining your gradient are the StartPoint and EndPoint properties. These properties define where the gradient line begins and where it ends.

Think of the canvas as a rectangle with the (0,0) point in the upper left corner and the (1,1) point in the lower right corner as shown below:

image

If you set the StartPoint to 0,0 and the EndPoint to 1,1, the gradient will start in the upper left and end in the lower right as shown in the Address dialog example shown at the top of this post. (This is the default value, so if you don’t set the StartPoint and EndPoint properties, this is the gradient you will get.)

By setting the StartPoint to .5,0 and EndPoint to .5,1, the gradient line begins in the middle top of the rectangle and ends in the middle bottom, creating the affect shown above.

If you want the gradient to appear from left to right, set the StartPoint to 0,.5 and the EndPoint to 1,.5. For right to left, set the StartPoint to 1,.5 and the EndPoint to 0,.5.

You can use any point in the rectangle as the StartPoint and EndPoint to create different effects. For example, you could set the StartPoint to .2,.2 and the EndPoint to .8,.8 to create this effect:

image

Notice the upper left corner is completely white and the lower right corner is completely blue. The gradient does not begin until .2,.2 and then ends at .8,.8.

The other important property to use when working with a linear gradient is the GradientStop. It defines the colors and where they start. The first GradientStop in this example is set to white and starts at an Offset of 0. The second GradientStop is set to LightSteelBlue at an Offset of 1.

Think of the Offset as the point on the gradient line where 0 is the origin of the line and 1 is the termination of the line. Note that if your StartPoint and EndPoint properties are not at a point of origin (such as .2,.2 and .8,.8), the Offset will still begin at the origin and end at the termination of the gradient line.

You can use any number of GradientStops (with a minimum of two) to include multiple colors in your gradient. For example, this gradient changes from White, to LightSteelBlue, to SteelBlue, back to LightSteelBlue and then White:

<Canvas>
    <Canvas.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="LightSteelBlue" Offset=".2"/>
            <GradientStop Color="SteelBlue" Offset=".4"/>
            <GradientStop Color="LightSteelBlue" Offset=".8"/>
            <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Canvas.Background>
</Canvas>

And the effect is as follows:

image

Radial Gradient

A radial gradient defines the graduation of colors that radiate outward from an origin. The example below shows a radial gradient radiating out from the center:

image

The XAML code required to set a radial gradient is as follows:

<Canvas>
    <Canvas.Background>
        <RadialGradientBrush GradientOrigin=".5,.5">
            <GradientStop Color="White" Offset="0"/>         
            <GradientStop Color="LightSteelBlue" Offset="1"/> 
        </RadialGradientBrush>
    </Canvas.Background>

This specific code sets the gradient for a Canvas background, but you could use it anywhere a gradient is allowed.

The first property you need to consider when defining your radial gradient is the GradientOrigin. It defines where the gradient begins.

Think of the canvas as a rectangle with the (0,0) point in the upper left corner and the (1,1) point in the lower right corner as shown below:

image
In this example, the gradient radiates out from the center point, which is .5,.5. (This is the default value, so if you don’t set the GradientOrigin property, this is the gradient origin you will get.)

The other important property to use when working with a radial gradient is the GradientStop. It defines the colors and where they start. The first GradientStop in this example is set to white and starts at an Offset of 0. The second GradientStop is set to LightSteelBlue at an Offset of 1.

This GradientStop property in the radial gradient is similar to the linear gradient. The primary difference is that the gradient line begins at the GradientOrigin and radiates outward.

You can use any number of GradientStops (with a minimum of two) to include multiple colors in your gradient. For example, this gradient has an origin of .2,.2. It then changes from White, to LightSteelBlue, to SteelBlue, back to LightSteelBlue and then White:

<Canvas>
    <Canvas.Background>
        <RadialGradientBrush GradientOrigin=".2,.2">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="LightSteelBlue" Offset=".2"/>
            <GradientStop Color="SteelBlue" Offset=".4"/>
            <GradientStop Color="LightSteelBlue" Offset=".8"/>
            <GradientStop Color="White" Offset="1"/>
        </RadialGradientBrush>
    </Canvas.Background>
</Canvas>

And the effect is as follows:

image

Feel free to experiment with both types of gradients to produce interesting visual effects.

Enjoy!

3 Comments

  1.   Richard Guion — November 14, 2009 @ 12:35 pm    Reply

    Nice post on gradients–we have been using those in our Foothill WPF class but I was mystified how to achieve certain directions until I read your article.

    For the second image in this post–showing the Address form–what type of Panel did you use to lay that out? Canvas or Grid? The Nathan book says never to use Canvas, so I’m assuming you did so here just for demo purpose.

  2.   DeborahK — November 16, 2009 @ 10:38 am    Reply

    I used Canvas in all of these examples. I am not familiar with the Nathan book. Is there a reason one should never use a Canvas?

    In one of the applications I am working on, I display a set of “bubbles” representing entities that are sized according to one of the entity properties. I lay these out across the control. I can’t image trying to do this with a Grid.

    Thanks for your comments!

  3.   Richard Guion — November 16, 2009 @ 10:51 pm    Reply

    I mis-spoke; Nathan says Canvas is “too primitive a panel for creating flexible user interfaces” but also to “keep in mind for maximum performance when you really do need precise control over the placement of elements.”

    If you have a fixed size window where the elements need to be placed at an exact size/position, or relative position, canvas is fine.

    If you want the UI elements to expand/contract as you resize the window, then I think you have to use one of the other panels like Grid, DockPanel, StackPanel, etc.

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2020 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs