WPF(Windows Presentation Foundation) and XPS (Open XML Paper Specification) supports five types of brushes. They are solid color brush, linear gradient brush, radial gradient brush, image brush, and visual brush. This posting will discuss the 'shape' of radial gradient brushes.

The shape of a WPF/XPS radial gradient brush is defined by three attributes:

• Center

The best way to understand a radial gradient brush is to look it using a series of paramterized ellipses, with parameter t.

The brush originates at GradientOrigin, with t= 0, color from GradientStopCollection at offset 0, and radius (0, 0).

When t = 1, it complets its first cycle. The ellipses is centered around Center, with t = 1, color from GradientStopCollections at offset 1, and radisu (RadiusX, RadiusY).

Center:   GradientOrigin (1 - t) + Center * t

The centers for these ellipses move along the straight line from GradientOrigin to Center. After the first cycle is completed, they continue to move along the line.

Radii are simply increasing proportionally with t.

Color is a periodical function of t. But you also need to consider SpreadMethod to make it right.

Normally, center and origin are the same point. These ellipses are then cocentric curves. But when origin is moving away from center, they can become quite interesting.

If we move GradientOrigin from (0.5, 0.5) to (0.4, 0.5), this is what we get:

If we further move GradientOrigin from (0.4, 0.5) to (0.3, 0.5), something drastic happens:

Instead of having gradual changing ellipses filling the whole plane, only half of the plane is filled with ellipses; the other is filled with color at gradient stop 1. This breaking change happens when the distance between center and origin points equals radius.

If we move the origin further away, the ellipses fill an even smaller (triangular) shape: