Page view counter

Did You Know That... You can get sharp lines within a linear gradient?

This tip is thanks to Adam Nathan and his excellent book Silverlight 1.0 Unleashed

Silverlight 1.0 Unleashed
by Adam Nathan

Read more about this title...

You can achieve the startling effect of introducing sharp lines within a linear gradient by adding two GradientStops at the same offset, using different, and reinforcing colors.  In the following example, I show two polygons. The first uses a standard gradient brush, but in the second I introduce a new color (DarkBlue) which I place at the same GradientStop as Green and at the same GradientStop as Blue. The effect is quite unmistakable, as shown in the image.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Polygon x:Name="PolyWithGradientBrush"
         Points= "50,70, 100,70, 150,120, 150,170, 100,220, 
         50,220, 0,170, 0,120, 50,70"
         StrokeThickness="2"
         Stroke="Black" >
  <Polygon.Fill>
         <LinearGradientBrush>
            <GradientStop Color="Red"
                          Offset="0.0" />
            <GradientStop Color="Orange"
                          Offset="0.3" />
            <GradientStop Color="Green"
                          Offset="0.5" />
            <GradientStop Color="Blue"
                          Offset="0.7" />
            <GradientStop Color="Violet"
                          Offset="1.0" />
         </LinearGradientBrush>
      </Polygon.Fill>
</Polygon>
   <Polygon x:Name="PolyWithGradientBrushAndSharpLines"
            Points="250,70, 300,70, 350,120, 350,170, 300,220, 
         250,220, 200,170, 200,120, 250,70"
            StrokeThickness="2"
            Stroke="Black">
      <Polygon.Fill>
         <LinearGradientBrush>
            <GradientStop Color="Red"
                          Offset="0.0" />
            <GradientStop Color="Orange"
                          Offset="0.3" />
            <GradientStop Color="Green"
                          Offset="0.5" />
            <GradientStop Color="DarkBlue"
                          Offset="0.5" />
            <GradientStop Color="DarkBlue"
                          Offset="0.7" />
            <GradientStop Color="Blue"
                          Offset="0.7" />
            <GradientStop Color="Violet"
                          Offset="1.0" />
         </LinearGradientBrush>
      </Polygon.Fill>
   </Polygon>
</Canvas>
SharpLineGradient 
   
kick it on DotNetKicks.com
Published Monday, January 14, 2008 10:55 AM by jesseliberty

Comments

# Adding Sharp Lines to a Linear Gradient In Silverlight

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Monday, January 14, 2008 10:59 AM by DotNetKicks.com

# re: Did You Know That... You can get sharp lines within a linear gradient?

Great info! Thanks Jesse.

Hope the shoulder is doing better!

..Ben

Monday, January 14, 2008 2:30 PM by BenHayat

# re: Did You Know That... You can get sharp lines within a linear gradient?

Thanks for the ongoing support.

The shoulder gets a bit better every day (but nothing is linear). Sling for about 2 more weeks,then PT. Sheesh, who expected a fall on the ice to be such a big deal?

Meanwhile, I'm working on a new set of blog posts that are the most exciting I've ever done. Can't wait to unveil them in the next couple of weeks. This is a great job :-)

Monday, January 14, 2008 3:09 PM by jesseliberty

# re: Did You Know That... You can get sharp lines within a linear gradient?

>>Meanwhile, I'm working on a new set of blog posts that are the most exciting I've ever done. Can't wait to unveil them in the next couple of weeks. This is a great job :-)<<

I can't wait. You're doing great. I guess we'll have a webcast on 16th?

Monday, January 14, 2008 7:12 PM by BenHayat

# Adding Sharp Lines to a Linear Gradient In Silverlight | Silverlight Guide

Pingback from  Adding Sharp Lines to a Linear Gradient In Silverlight | Silverlight Guide