WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:






Lifetime Member:

Silverlight With Java Script Tutorial 08 - Introduction to Linear and Radial Gradients



Overview

In the hands of a good graphic designer, a gradient can make a frame appear to be metallic, or give the impression of a light source shining on an object. I've used gradients a lot in Paint Shop Pro, but I don't believe I've used them before now in Silverlight, other than in my pass through the QuickStart. I'm going to do this in two parts. I'll introduce gradients this time, and next time we'll play with the values a bit.

As always, here is a reference to the Microsoft Silverlight SDK Online.


Our XAML

Here is the XAML for the canvas above:

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Canvas.Resources>
<Storyboard x:Name="animation" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="true" RepeatBehavior="Forever" >
<DoubleAnimation Storyboard.TargetName="Hello" From="-110" To="300" Duration="0:0:10" />
</Storyboard>
</Canvas.Resources>
<TextBlock x:Name="Lighter" Canvas.Left="0" Canvas.Top="70" Foreground="Blue" Text="Lighter" MouseLeftButtonUp="ClickLighter" Cursor="Hand"/>
<TextBlock x:Name="Restore" Canvas.Left="80" Canvas.Top="70" Foreground="Blue" Text="Restore" MouseLeftButtonUp="ClickRestore" Cursor="Hand"/>
<TextBlock x:Name="Left" Canvas.Left="150" Canvas.Top="70" Foreground="Blue" Text="Left" MouseLeftButtonUp="ClickLeft" Cursor="Hand"/>
<TextBlock x:Name="Middle" Canvas.Left="200" Canvas.Top="70" Foreground="Blue" Text="Middle" MouseLeftButtonUp="ClickMiddle" Cursor="Hand"/>
<TextBlock x:Name="Right" Canvas.Left="260" Canvas.Top="70" Foreground="Blue" Text="Right" MouseLeftButtonUp="ClickRight" Cursor="Hand"/>

<Rectangle x:Name="GradientRect" Canvas.Left="0" Canvas.Top="0" Width="300" Height="50">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="Blue" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

<Rectangle x:Name="GradientRadial" Canvas.Left="0" Canvas.Top="90" Width="300" Height="150">
<Rectangle.Fill>
<RadialGradientBrush x:Name="GradientBrush" GradientOrigin=".5, .5">
<GradientStop Color="White" Offset="0.0" />
<GradientStop x:Name="StopColor" Color="#FF0000FF" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>

</Canvas>



Our HTML

Here is the HTML, including Java Script, to run this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Silverlight With Java Script Tutorial 8</title>
<script src="js/Silverlight.js" type="text/javascript"></script>
</head>

<script type="text/javascript">
function ClickLighter(sender, args)
{
sender.findName("StopColor").Color = "#FF6D70FF";
}

function ClickRestore(sender, args)
{
sender.findName("StopColor").Color = "#FF0000FF";
}

function ClickLeft(sender, args)
{
sender.findName("GradientBrush").GradientOrigin= "0,.5";
}

function ClickMiddle(sender, args)
{
sender.findName("GradientBrush").GradientOrigin= "0.5,.5";
}

function ClickRight(sender, args)
{
sender.findName("GradientBrush").GradientOrigin= "1.0,.5";
}

</script>

<body bgcolor="white">



<br />
<center>
<div id="Ag1Host" style="background:#FFFFFF">
<script type="text/javascript">
var pe1 = document.getElementById("Ag1Host");
</script>
</div>
</center>

<script type="text/javascript">
Silverlight.createObjectEx({source: 'xaml/SilverlightWithJSTutorial08.xml', parentElement:pe1, id:'Ag1', properties:{width:'300', height:'300', background:'#00FFFFFF', isWindowless:'true', framerate:'24', version:'0.90.0'}, events:{onError:null, onLoad:null}, context:null});
</script>


</body>
</html>



Two Types of Gradients

As you can see from the canvas above, there are two types of gradients, or more specifically, two ways to render a gradient: Linearly and Radially.

In it's most simple case, a gradient can be thought of as producing the effect of loading up a paint brush with paint, placing it against the wall, and walking until no more paint is applied. The initial point of contact has the full-color effect of the paint on the brush, and then the farther you go, the lighter the paint gets until it has faded into the original wall color.

As we'll see next time, you can have many more color points than just two end points, but for this Tutorial, we're only going to consider that situation:
Linear Gradient
In a Linear Gradient, a color and starting point are given, and that color is drawn in a smooth progression along a straight line to the end point and color listed. The starting and ending points do not have to be horizontal or vertical. A gradient can run from upper right to lower left if you want.
Radial Gradient
A Radial Gradient has the same start and stop colors, but instead of start and stop locations, you have only a center point, and the gradient is displayed radially out from start color to end color. As you'll see, this 'radial' display is in the form of an ellipse inside the bounding object.

Run-Time Modifications

After looking at the two displays above, the question "So What?" may come to mind since we can make gradient images with many tools. What makes doing them with Silverlight special?

One main item comes to mind, and that is the run-time effects you can achieve. Instead of having to make a background image that is the exact size you plan on using in the display and then changing it every time you make a change to your page, you can have Silverlight fill in the gradient appropriately as the page runs.

My second response would be that Silverlight gives you the capability of changing the gradient parameters at run-time. This means the starting and ending colors could change, or the location of the center on a Radial Gradient.

To demonstrate a bit of that, I've added 5 TextBlocks that have mouse events tied to LeftMouseButtonUp, and perform 5 different functions on our Radial Gradient:
Lighter
Clicking the text "Lighter" sets the stop color to be a lighter blue than the #0000FF we start with.
Restore
"Restore" sets the stop color back to #0000FF
Left
Clicking the text "Left" sets the Origin of the Radial Gradient to be "0,.5", or the left border of the graphic and centered vertically.
Middle
"Middle" sets the Origin of the Radial Gradient back to the center of the image: "0.5,0.5".
Right
"Right" sets the Origin of the Radial Gradient to "1.0,0.5" or the right border of the graphic and centered vertically.

Notes and Variations

As with many things, there is more than one way to achieve some of the results demonstrated above.

In both versions of the gradient, it is possible to avoid setting the ending color to a non-'Pure' Blue, by setting the stop location off the canvas. For example, instead of messing with the "StopColor", we could just as easily set the GradientStop Offset to 1.5 to get a similar effect.


Summary

This quick pass through Gradients should be enough to get you started. Next time I'm planning on doing some other run-time gradient modifications that might be fun.

Stay in the 'Light!

Copyright © 2006-2017, WynApse