Introduction

The Use Gradient property controls whether a Skia Standard Element uses gradient values if true or a solid color if false.

By default this value is false.

If this value is set to true, then additional properties appear for controlling the gradient.

Red1 and 2, Green1 and 2, Blue1 and 2

Gradients create a smooth interpolation of color from the first set of values (Red1, Green1, Blue1) to the second set of values (Red2, Green2, Blue2).

Changing these values adjusts the gradient start and end colors.

Gradient X1 and 2, Gradient Y1 and 2

The gradient values appear at their respective values at the points specified by Gradient X1, Gradient Y1, Gradient X2, and Gradient Y2. For example the gradient points could be visualized as shown in the following image:

Changing the Gradient X or Y values changes the start and end points for the gradient.

Gradient X1 and X2 Units, Gradient Y1 and Y2 Units

Gradient values use Units similar to X Units and Y Units. By default, gradient values are relative to the top-left of the element. Since the gradient values are not affected by size, changing the size of the element does not affect the gradient.

The gradient X and Y units can be changed. Each value can be set independently. For example, the X2 and Y2 units can be adjusted to be relative to the bottom-right corner of the instance. The following shows a RoundedRectangle with the Gradient X2 and Y2 values 100 pixels up and to the left of the bottom-right corner. If the RoundedRectangle is resized, then the gradient adjusts in response.

Gradient X and Y values can exist outside of the visual space of the instance, and even outside of its bounds. The following image shows an Arc with a gradient which is defined below the visual part of the arc. Notice that the Gradient Y values are both 0 PixelsFromBottom.

Gradient Type

Gradient Type controls whether the gradient is linear or radial. Radial gradients place the center of the radial gradient at X1,Y1 and the edge of the radial gradient at X2, Y2.

Introduction

Has Dropshadow controls whether a dropshadow is drawn below an element. By default this value is false.

The following image shows two RoundedRectangles. The left with Has Dropshadow unchecked, the right with Has Dropshadow checked.

Note that if an instance has a dropshadow, the dropshadow renders outside of the bounds of the instance.

Dropshadows draw as part of the object, so if multiple objects stack, their dropshadows also stack.

Dropshadow Offset X and Y

Dropshadow Offset X and Y control the position of the dropshadow relative to the main body of the instance. By default this value is 3 pixels below (Dropshadow Offset Y of positive 3).

This value can be changed to offset the dropshadow in any direction increasing a sense of height for the element.

Dropshadow Blur X and Y

Dropshadow Blur X and Y control how much to blur the dropshadow on the X and Y axes, respectively. A value of 0 creates a sharp shadow, while a larger value increases blur. Note that the X and Y values can be adjusted independently.

Dropshadow Alpha

Dropshadow Alpha controls the transparency of a dropshadow. A fully-opaque dropshadow has an alpha of 255. This value can be modified to decrease or increase the dropshadow's opacity.

Dropshadow Red, Green, and Blue

Dropshadow Red, Green, and Blue can be used to adjust the dropshadow color. Usually dropshadows are pure black with their transparency adjusted by Dropshadow Alpha, but they can also include other colors if needed.

Introduction

Is Filled controls whether a shape is filled in or if it is drawn using stroke - another word for outline. By default this is true, but it can be unchecked to make a shape draw its outline.

Stroke Width

Stroke Width controls the thickness of the stroke (outline). Increasing the value makes the stroke thicker.

Stroke, Gradient, and Dropshadow

If a Skia standard element has its Is Filled unchecked, this affects the rendering of gradients and dropshadows.

Gradients only fill the solid parts of a shape, so if a shape has Is Filled set to false, the hollow center of the shape does not show gradient color.

Dropshadows respect the opaque part of the shape, so changing Is Filled also affects the dropshadow.