#217 – Using a Radial Gradient Brush

With a linear gradient, the color changes along the edge of a straight line, as it sweeps across a control.  You can also define a radial gradient, where the color change radiates out in a circle.

You define a radial gradient using a RadialGradientBrush, which you can use wherever a brush is expected.

In the following example, we draw an Ellipse and fill it with a radial gradient.  The gradient starts out white in the center of the circle and then changes to light blue and then dark blue as it expands out to the edges of the circle.  Note that, like a linear gradient brush, we specify a series of gradient stops, where the color changes.

		<Ellipse Height="200" Width="200">
			<Ellipse.Fill>
				<RadialGradientBrush>
					<GradientStop Color="White" Offset="0.0"/>
					<GradientStop Color="LightBlue" Offset="0.5"/>
					<GradientStop Color="DarkBlue" Offset="1.0"/>
				</RadialGradientBrush>
			</Ellipse.Fill>
		</Ellipse>