Class Gradient
A smooth multi-stop fill - linear along an axis, or radial out from a center point.
public class Gradient
- Inheritance
-
Gradient
- Inherited Members
Remarks
Rendered by tessellating the target rect and evaluating this gradient at each vertex, letting the GPU interpolate between them (see GradientMesh). That needs no texture, shader or material, which is what keeps a gradient usable from a .view.xml the same way a flat color is.
Angles follow the CSS convention, so a value copied off a design mockup means the same thing here: 0 points to the top, 90 to the right, 180 to the bottom, 270 to the left.
Properties
Angle
Direction in degrees for a linear gradient. Ignored when radial.
public float Angle { get; set; }
Property Value
Center
Center of a radial gradient, in 0-1 fractions of the target rect. Ignored when linear. Defaults to the middle.
public Vector2 Center { get; set; }
Property Value
Kind
Whether the gradient is linear or radial.
public GradientKind Kind { get; set; }
Property Value
Stops
The colour stops, in order along the gradient. A gradient with no stops draws nothing.
public List<GradientStop> Stops { get; }
Property Value
Methods
ColorAt(float)
Color at a position from 0 to 1 along the gradient.
public Color ColorAt(float position)
Parameters
positionfloat
Returns
PositionAt(float, float, float)
Position along the gradient, 0 to 1, of a point given in 0-1 fractions of the rect.
public float PositionAt(float u, float v, float aspect = 1)
Parameters
ufloatvfloataspectfloatThe target rect's width divided by its height. A linear gradient's angle is measured in pixels, as CSS measures it, so a non-square rect skews the axis: 135deg across a wide, short button is very nearly a left-to-right sweep, not the corner-to-corner diagonal it would be on a square. Defaults to 1 - a square, where the two agree.