#228 – Starting/Ending a Gradient Fill Outside a Control

If you specify start and end points for a linear gradient that are inside the control (i.e. between 0 and 1), the start/stop colors are extended to the edge of the control based on the value of the SpreadMethod property.

You can also specify StartPoint and EndPoint positions that are outside the control, i.e. by using X/Y values that are less than 0.0 or greater than 1.0.

When you specify start/stop positions outside of a control, the control will be filled with that portion of the larger gradient that corresponds to the control’s position within the gradient.

Here’s an example with a red-blue fill that starts and finishes outside of the control.  Notice that the control is filled with a subset of the full red-blue gradient, so ends up being shades of magenta.

		<Rectangle Width="200" Height="100" Margin="30">
			<Rectangle.Fill>
				<LinearGradientBrush StartPoint="-1,-1" EndPoint="1.5,1.5">
				    <GradientStop Color="Red" Offset="0.0"/>
				    <GradientStop Color="Blue" Offset="1.0"/>
				</LinearGradientBrush>
			</Rectangle.Fill>
		</Rectangle>