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

** Note ** Jesse is currently looking for a new position. You can learn more about him at https://jesseliberty.bio Thank you. 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. His latest book, Building APIs with .NET, is now available wherever you buy your books. Liberty 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 13 year Microsoft MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.