Did You Know That… You can create vertical or horizontal linear gradients?

By default, linear gradients are on a diagonal. 

Understanding this begins with the implicit assumption of a coordinate system superimposed on every shape in which the upper-left hand corner is set to 0,0, with the x axis extending to 1 at the right edge of the shape, and the y axis set to 1 at the bottom of the shape.

LinearGradientCoordinates

An implicit diagonal is then superimposed from 0,0 to 1,1, and the colors are placed at GradientStops along that diagonal. The LinearGradientBrush blends the colors evenly from one Stop to the next,

<LinearGradientBrush >
  <GradientStop Color="Red"
                Offset="0.0"/>
  <GradientStop Color="Orange"
                Offset="0.143"/>
  <GradientStop Color="Yellow"
                Offset="0.286"/>
  <GradientStop Color="Green"
                Offset="0.429"/>
  <GradientStop Color="Blue"
                Offset="0.572"/>
  <GradientStop Color="Indigo"
                Offset="0.715"/>
  <GradientStop Color="Violet"
                Offset="1.0"/>
</LinearGradientBrush>
LinearGradientWithDiagonal 

You can see, therefore why the color lines are on a diagonal,  but this is actually trivial to change. If you prefer vertical lines, you have only to change the origin and termination of the gradient line; instructing it to run not from 0,0 to 1,1 but rather from 0,0.5 to 1, 0.5. 

<LinearGradientBrush StartPoint="0,0.5"
                     EndPoint="1,0.5" >

That is, the line will run from 0 to 1 on the x axis, but will run from 0.5 to 0.5 (no change at all) on the y axis,

HorizGradient

Of course,  you can create horizontal lines by setting the x axis to start and end at 0.5 and letting the y coordinates move from 0 to 1.

 Update: For more on this topic you may want to watch either this video, or this video.

kick it on DotNetKicks.com

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been 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 Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

Leave a Reply

Your email address will not be published.