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

Unknown's avatar

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. Liberty is a Senior AI Engineer at the University of Pittsburgh Medical Center, and was a Team Lead and Senior Software Engineer for various corporations, a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a 21 year Microsoft MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.