Solid Color Fill (represented by NColorFill) is the most common type of filling – it specifies that the target area is filled with a certain solid color. The following code creates an orange color fill:

NColorFill colorFill = new NColorFill(NColor.Orange);

The color of an existing color fill can be obtained or changed using the Color property of the object, for example:

colorFill.Color = NColor.CornflowerBlue;

Linear Gradient Fill (represented by NLinearGradientFill) paints the target area with a linear gradient. The gradient is defined by a set of gradient stops placed along a line called gradient axis. Each gradient stop is comprised of a color and a value that specifies the gradient stop’s position on the gradient axis. The position value is in the range [0.0, 1.0]. The color of an arbitrary point on the gradient axis is interpolated from the colors of its surrounding gradient stops. The same color spreads in the direction perpendicular to the gradient axis.

The following code creates a linear gradient fill:

NLinearGradientFill linearGradient = new NLinearGradientFill(new NAngle(45, NUnit.Degree), NColor.Red, NColor.Blue);

The created gradient has two gradient stops - red at position 0.0 and blue at position 1.0. The slope of the gradient axis is 45 degrees.

Gradient stops can be added to an existing gradient using the Add method of the GradientStops collection. The following code adds a lime-green gradient stop at position 0.5 on the gradient axis (i.e. in the middle between the red and the blue gradient stops):

linearGradient.GradientStops.Add(new NGradientStop(0.5f, NColor.LimeGreen));

The image below displays the resulting gradient:

Mapping Modes

By default the gradient is stretched to fill the target bounding box. If the target bounding box is not a perfect square, the gradient is scaled with different factors along the X and the Y dimensions. As a result the actual slope of the gradient axis will differ from the specified one (unless the specified slope is a multiple of 90 degrees).

The following experiment demonstrates the effect of gradient scaling – we apply the gradient that we have created to a rectangle with dimensions Width=400, Height=150. The gradient looks stretched in width and the slope of the gradient axis is clearly not 45 degrees:

To make the slope of the gradient axis invariant of the target shape’s bounding box, you have to set the mapping mode of the gradient to ENGradientMappingMode.ZoomToFill:

linearGradient.MappingMode = ENGradientMappingMode.ZoomToFill;

The image below displays the effect of this change:

Radial Gradient Fill (represented by NRadialGradientFill) paints the target area with a radial gradient. Similarly to the linear gradient, the radial gradient is defined by a set of gradient stops, each one comprised of a color and a position value. The gradient stops are placed along lines that radiate from a single point (focus point) towards a circle. The position value is in the range [0.0, 1.0], where 0.0 is the position of the focus point and 1.0 is the position of the circle. The color of an arbitrary point on a radial line is interpolated from the colors of its surrounding gradient stops.

The following code creates a radial gradient fill:

NRadialGradientFill radialGradient = new NRadialGradientFill(0.5f, 0.5f, NColor.Red, NColor.Blue);

The created gradient has two gradient stops - red at position 0.0 and blue at position 1.0. The center of the circle is positioned at coordinates X=0.5, Y=0.5 which denotes the center of the target area’s bounding box.

The circle’s center can be moved around the target bounding box using the CenterX and CenterY properties. The coordinates of the center point are relative to the target bounding box. The top-left point is specified with coordinates [0, 0] and the bottom-right is at [1, 1]. The center point cannot be positioned outside the target bounding box.

The following code sets the center point near the top-left corner of the bounding box:

radialGradient.CenterX = 0.1f;
radialGradient.CenterY = 0.3f;

As a result the gradient circle becomes an ellipse that touches the right and bottom sides of the bounding box from inside, as displayed in the following image:

The gradient’s focus point moves with the center point, but can be displaced using the FocusFactorX and FocusFactorY properties. The coordinates of the focus point are relative to the gradient’s center point. The following code sets the gradient center point back in the middle of the bounding box and offsets the focus point:

radialGradient.CenterX = 0.5f;
radialGradient.CenterY = 0.5f;
radialGradient.FocusFactorX = 0.5f;
radialGradient.FocusFactorY = -0.5f;

The focus point is shifted to the right and upwards from the center point, as displayed in the image below:

Gradient stops can be added to an existing gradient using the Add method of the GradientStops collection. The following code adds a lime-green gradient stop between the red and the blue gradient stops:

radialGradient.GradientStops.Add(new NGradientStop(0.5f, NColor.LimeGreen));

The image below displays the resulting gradient:

A common use case for radial gradients is the simulation of lighting effects for oval shapes. Such effects can be achieved with a gradient with 3 gradient stops and offset focus point, like the following:

NRadialGradientFill radialGradient = new NRadialGradientFill();
radialGradient.GradientStops.Add(new NGradientStop(0.0f, NColor.White));
radialGradient.GradientStops.Add(new NGradientStop(0.4f, NColor.Red));
radialGradient.GradientStops.Add(new NGradientStop(1.0f, NColor.Black));
radialGradient.CenterX = 0.5f;
radialGradient.CenterY = 0.5f;
radialGradient.FocusFactorX = -0.6f;
radialGradient.FocusFactorY = -0.6f;

The image below displays the resulting gradient (applied on a circle):

Mapping Modes

Similarly to the linear gradient, the radial gradient’s default mapping mode is ENGradientMappingMode.Stretch. In this mode the gradient can be scaled disproportionately, which causes the gradient circle to be squashed into an ellipse:

To avoid disproportionate scaling, you have to set the mapping mode of the gradient to ENGradientMappingMode.ZoomToFill.

linearGradient.MappingMode = ENGradientMappingMode.ZoomToFill;

The image below displays the effect of this change:

In this mode the radius of the gradient circle is equal to the longest of the distances between the gradient center point and the corners of the target bounding box.

Advanced Gradient Fill (represented by NAdvancedGradientFill) is a gradient comprised of a background color and a set of 2D color-emitting points (or sources). The gradient is produced by blending the colors of the sources, according to their location, intensity and shape.

The following code creates an advanced gradient fill with black background and three gradient points:

NAdvancedGradientFill gradient = new NAdvancedGradientFill();
gradient.BackgroundColor = NColor.Black;
gradient.Points.Add(new NAdvancedGradientPoint(NColor.Crimson, NAngle.Zero, 0.87f, 0.29f, 0.92f, ENAdvancedGradientPointShape.Circle));
gradient.Points.Add(new NAdvancedGradientPoint(NColor.DarkBlue, NAngle.Zero, 0.53f, 0.82f, 0.81f, ENAdvancedGradientPointShape.Circle));
gradient.Points.Add(new NAdvancedGradientPoint(NColor.LavenderBlush, NAngle.Zero, 0.16f, 0.17f, 1, ENAdvancedGradientPointShape.Circle));

The image below displays the resulting gradient (applied on a square):

The following table lists the available shapes for advanced gradient points:

Circle
Line (can be rotated)
Square (can be rotated)

Stock Gradient Fill (represented by NStockGradientFill) provides an easy way to specify the most frequently used two-color gradients. There are 6 styles of stock gradients, each providing 4 variants. The following code creates a “Diagonal-Down” stock gradient fill with red and yellow colors:

NStockGradientFill stockGradient = new NStockGradientFill(ENGradientStyle.DiagonalDown, ENGradientVariant.Variant3, NColor.Red, NColor.Yellow);

The image below displays the resulting gradient (applied on a square):

The following table lists the available gradient styles and variants:

	Variant 1	Variant 2	Variant 3	Variant 4
Horizontal
Vertical
Diagonal Up
Diagonal Down
From Corner
From Center

Image Fill (represented by NImageFill) fills the interior of the target shape with a raster image. The NImageFill must be linked to an NImage object that acts as a source for the image data. The following code creates an image fill using a local file as an image source:

NImage image = new NImage(@"D:\flower.png");
NImageFill imageFill = new NImageFill(image);

By default the image is fitted within the target bounding box so that the box may not be fully covered, but the original image’s aspect ratio is preserved. There are many other options for mapping the image onto the target area (like stretching, fitting, tiling, etc). These options are common for all fill types that are based on raster images and are described in detail in the Texture Mapping topic.

Hatch Fill (represented by NHatchFill) fills the interior of the target shape with a hatch pattern. The framework supports 53 predefined hatch patterns based on raster images with size 8x8 pixels. To create a hatch fill, apart from the hatch style, you have to specify the background and foreground colors.

The following code creates a black and white “Weave” pattern:

NHatchFill hatchFill = new NHatchFill(ENHatchStyle.Weave, NColor.White, NColor.Black);

The table below displays the available hatch styles:

Backward Diagonal		Cross
Dark Downward Diagonal		Dark Horizontal
Dark Upward Diagonal		Dark Vertical
Dashed Downward Diagonal		Dashed Horizontal
Dashed Upward Diagonal		Dashed Vertical
Diagonal Brick		Diagonal Cross
Divot		Dotted Diamond
Dotted Grid		Forward Diagonal
Horizontal		Horizontal Brick
Large Checkerboard		Large Confetti
Light Downward Diagonal		Light Horizontal
Light Upward Diagonal		Light Vertical
Narrow Horizontal		Narrow Vertical
Outlined Diamond		Percent 05
Percent 10		Percent 20
Percent 25		Percent 30
Percent 40		Percent 50
Percent 60		Percent 70
Percent 75		Percent 80
Percent 90		Plaid
Shingle		Small Checkerboard
Small Confetti		Small Grid
Sphere		Trellis
Vertical		Wave
Weave		Wide Downward Diagonal
Wide Upward Diagonal		Zig Zag

The hatch fill is an image based fill type and as such, it supports texture mappings. Normally hatch images are used in tiled mode (as it is the default), but all options are available. Please see Texture Mapping for details.