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.


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"
  <GradientStop Color="Orange"
  <GradientStop Color="Yellow"
  <GradientStop Color="Green"
  <GradientStop Color="Blue"
  <GradientStop Color="Indigo"
  <GradientStop Color="Violet"

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,


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

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 Pluralsight & LinkedIn Learning courses. He was 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 and a Microsoft MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.