ARTICLE

Posted by | April 16, 2009

Figure 1

Figure 2 taken from MSDN shows a rectangle filled with a radial gradient brush with multiple gradient stops at various points.

Figure 2

The Center property of the RadialGradientBrush represents the center of the outermost circle of the radial gradient. The default center point of the gradient circle is (0.5, 0.5).

The following code snippet creates a radial gradient brush with blue and red colors by setting GradientStops. The GradientOrigin and Center properties are default properties. The code snippet also sets the RadiusX and RadiusY properties.

Center="0.5,0.5"

We can fill a shape with a radial gradient brush by setting the Fill property of a shape to a gradient brush. The code snippet in Listing 1 creates a rectangle shape sets the Fill property to a RadialGradientBrush with blue and red colors where center of the radial gradient starts with the blue color.

<Rectangle Width="200" Height="100" Stroke="Black" >

<Rectangle.Fill>

Center="0.5,0.5" >

</Rectangle.Fill>

</Rectangle>

Listing 1

The output looks like Figure 3.

Figure 3

Now let us apply multiple stops with multiple colors. The code snippet in Listing 2 creates a radial gradient brush with five stops.

<Rectangle Width="200" Height="100" Stroke="Black" >

<Rectangle.Fill>

Center="0.5,0.5" >

</Rectangle.Fill>

</Rectangle>

Listing 2

The new output generated by Listing 96 looks like Figure 4.

Figure 4

The CreateARectangleWithRGBrush method listed in Listing 3 draws same rectangle in Figure 4 dynamically.

public void CreateARectangleWithRGBrush()

{

// Create a Rectangle

Rectangle blueRectangle = new Rectangle();

blueRectangle.Height = 100;

blueRectangle.Width = 200;

fiveColorRGB.Center = new Point(0.5, 0.5);

blueGS.Color = Colors.Blue;

blueGS.Offset = 0.0;

orangeGS.Color = Colors.Orange;

orangeGS.Offset = 0.25;

yellowGS.Color = Colors.Yellow;

yellowGS.Offset = 0.50;

greenGS.Color = Colors.Green;

greenGS.Offset = 0.75;

redGS.Color = Colors.Red;

redGS.Offset = 1.0;

// Set Fill property of rectangle

blueRectangle.Fill = fiveColorRGB;

// Add Rectangle to the page

}

Listing 3

The following code snippet changes the GradientOrigin and Center properties and now new output looks like Figure 5.

Center="0.1,0.5"

Figure 5

Summary