#218 – Defining a Radial Gradient’s Focal Point

By default, the focal point of a radial gradient–the spot where the gradient starts–is at the center of the control in which it’s located.

You can specify a different focal point using the RadialGradientBrush.GradientOrigin property.  The GradientOrigin property specifies the start of the gradient in 2D (X,Y) space, with X ranging from 0.0 (left side of control) to 1.0 (right side) and Y ranging from 0.0 (top) to 1.0 (bottom).

Here’s the same gradient as above, with the origin at (0.2,0.4).

#214 – Starting/Ending a Gradient Fill Inside a Control

You typically set the StartPoint and EndPoint of a gradient fill at the control’s boundary.  For example, a red-blue gradient might start at the left edge of the control and end at the right edge.  This is done with a StartPoint of (0,0.5) and an EndPoint of (1,0.5).

You can also specify start and end points that are in the interior of the control.  If we specify (0.33,0.5) as the StartPoint and (0.67,0.5) as the EndPoint, we get the following.  (Gradient line drawn, for reference).

We still have a red-to-blue gradient, but the gradient starts 1/3 of the way into the rectangle and finishes 2/3 of the way into the rectangle.

The fill behavior outside the specified gradient line depends on the value of the GradientBrush.SpreadMethod.  The default for this property, GradientSpreadMethod.Pad, specifies that the color at the edge of the gradient should just be extended to the edge of the control.