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

Advertisements

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

One Response to #217 – Using a Radial Gradient Brush

  1. Pingback: #533 – Using the Gradient Tool to Modify a Radial Gradient « 2,000 Things You Should Know About WPF

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: