Silverlight Study Notes (I) paint brush: Brush

1. linear gradient Paint Brush (lineargradientbrush/gradientstop)

Linear gradient Paint Brush: defines the gradient area along a straight line. This line is called the "gradient axis". You can specify multiple colors to fill the object. Based on the set start point and end point, you can achieve horizontal, vertical, and diagonal gradient effects.

Main members:

A.Startpoint: Linear gradient start point, such as (0, 0.5), the middle position of the object's leftmost border, the first digit represents the position of the X axis, the second digit represents the position of the Y axis

B.Endpoint: Linear gradient end point, see startpoint

C.Color: Fill color, which can be named colors (such as: red), six or eight characters in hexadecimal notation (such as: ffffff)

D.Offset: Gets the position of the gradient stop point in the gradient vector. In layman's terms, it is the position where the color is completely displayed in the object. Both sides of the completely displayed position are gradient.
. For example, (0.75), the saturation value of the color is reached at 3/4 of the object.

 

<Lineargradientbrush startpoint = "0, 0.5" endpoint = "1, 0.5">
<Gradientstop color = "# ffffff" offset = "0.0"/>
<Gradientstop color = "#00ff00" offset = "0.25"/>
<Gradientstop color = "# ff0000" offset = "0.75"/>
<Gradientstop color = "# 0099ff" offset = "1.0"/>
</Lineargradientbrush>

 

2. radial gradient Paint Brush (radialgradientbrush/gradientstop)

Radial Gradient painting brush: the gradient axis is a circle, and uses its origin as a radioactive source, radial divergence from the center to the outward gradient. Use a radial gradient to draw a region. Focus defines the beginning of the gradient, while the circle defines the end of the gradient (msdn ).

The general understanding is: to fill a gradient with multiple colors for an object, the gradient of the fill color is from a point (center-center) to the surrounding divergence, that is, the circular gradient. At the same time, the gradient area, that is, the circle, is the gradient area. For radial gradient, you need to understand three points:

A. Gradient area: the gradient area is the gradient circle, and the gradient size is the circle size.

B. Gradient start point (Focus-gradientstop): the point at which the gradient begins.

C. Gradient position (center-center): To determine the gradient position (circle position), as long as the center is determined, that is, the center of the center is controlled.

Main members:

A.Gradientstop: Gets or defines the position of the two-dimensional focus at the beginning of the gradient. And use a single point to determine the location of the radioactive source in the radiation area (circle), such as (0.5, 0.5)

B.Center: The position of the gradient area (gradient circle) (center), which is a two-dimensional focus, such as (0.5, 0.5)

C.Color: Fill color (gradient), can be named color (such as: red), 6 or 8 characters hexadecimal mark (such as: ffffff)

D.Offset: Gets the position of the gradient stop point in the gradient vector. In layman's terms, it is the position where the color is completely displayed in the object. Both sides of the completely displayed position are gradient.
. For example, (0.75), the saturation value of the color is reached at 3/4 of the object.

E.Radiusx: X-axis radius of the gradient circle. From the center of the circle to the nearest border of the object to be filled, that is, 1/2 of the diameter. Therefore, 0.5 is the maximum value.

F.Radiusy: Gradient round Y-axis radiation radius

<Radialgradientbrush gradientorigin = "0.25, 0.5" center = "0.5, 0.5" radiusx = "0.5" radiusy = "0.5">
<Gradientstop color = "# fbfe03" offset = "0.0"/>
<Gradientstop color = "#41f702" offset = "0.25"/>
<Gradientstop color = "# ff0000" offset = "0.75"/>
<Gradientstop color = "# 0066ff" offset = "1.0"/>
</Radialgradientbrush>

 

Pay attention to downlinkCode:

<Gradientstop color = "# 0066ff" offset = "1.0"/>

BecauseColor = 0066ffOffset is 1.0, so the color is the critical color of the gradient area. The saturation value of the color is reached only at the critical point of the gradient area, will be filled with the color. You can also split the color to be not a gradient circle.