#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>

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: