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"
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>
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.
