[Silverlight]-How to Use the paint brush Function

Silverlight provides four paint brushes: solid color paint brush, linear gradient Paint Brush, radial gradient Paint Brush, image paint brush, and visual paint brush. The following briefly introduces their respective purposes:

1. Solid color paint brush)

A solid color brush is also called a monochrome brush. It is characterized by filling objects with a single color. For example, you can see colors in red or green. One of its important attributes is the color attribute. You can use the color attribute to set its fill color.

Example:

Solidcolorbrush

< Grid X: Name = "Layoutroot" Showgridlines = "True" >
< Grid. rowdefinitions >
< Rowdefinition Height = "350" />
< Rowdefinition Height = "*" />
</ Grid. rowdefinitions >
< Grid. columndefinitions >
< Columndefinition Width = "500" />
< Columndefinition Width = "*" />
</ Grid. columndefinitions >

< Rectangle Grid. Row = "0" Grid. Column = "0" >
< Rectangle. Fill >
< Solidcolorbrush Color = "Red" />
</ Rectangle. Fill >
</ Rectangle >
</ Grid >

 

:

A rectangle object is defined here, And the fill attribute of rectangle is filled with solidcolorbrush. use a single red color ). in addition, the color with transparency is also supported in Silverlight. The color with transparency is generally expressed in the argb hexadecimal notation, for example, # ffff0000.

Ii. gradient Paint Brush

It is a gradient Paint area that uses multiple colors that blend along one axis. They can be used to form the effect of light and shadows, so that the UI elements have a three-dimensional appearance. They can also be used to simulate glass, borders, water and other smooth surfaces. Gradient paint brush is divided into two types: linear gradient Paint Brush and radial gradient Paint Brush

(1) linear gradient Paint Brush (lineargradientbrush)

Lineargradientbrush draws an area using a gradient defined along a straight line (that is, the gradient axis. The gradient axis can be changed, and different gradient effects can be achieved by changing the direction of the gradient axis. The gradient axis has the starting point and ending point. The default starting point is in the upper left corner (), and the ending point is in the lower right corner ). Therefore, the default gradient axis is a diagonal line.

You can use gradientstop to specify the gradient color and its position on the gradient axis. The gradientstop object's [color] and [offset] attributes are used. The offset attribute is used to set the position on the gradient axis. The color attribute is used to specify the gradient color. The color of each vertex between gradient stop points performs linear interpolation based on the color combination specified by two border gradient stop points

Example:

Linearcolorbrush

  < Rectangle Grid. Row = "0" Grid. Column = "1" >
< Rectangle. Fill >
< Lineargradientbrush Startpoint = "0, 0" Endpoint = "1, 1" >
< Gradientstop Color = "Yellow" Offset = "0" />
< Gradientstop Color = "Red" Offset = "0.25" />
< Gradientstop Color = "Blue" Offset = "0.5" />
< Gradientstop Color = "Limegreen" Offset = "1" />
</ Lineargradientbrush >
</ Rectangle. Fill >
</ Rectangle >

 

:

Here, four gradient levels are set at 0, 0, respectively. Different colors are set at 25, 0.5, and 1. The start and end of the gradient are default values.

Similarly, we can re-change its start and end locations to achieve different gradient effects. Here we set its start position to (0.5, 0); the end point to (0.5, 1 ). this achieves a vertical gradient from top to bottom:

Horizontal gradient effect:

 

3. radialgradientbrush)

Radialgradientbrush is also called a ray gradient brush. Similar to linearcolorbrush, radialgradientbrush uses a color area that is mixed along an axis, while linearcolorbrush) is a straight line. The axis of the radial gradient Paint Brush is defined by a circle, and its color emits outward from the circle origin.

Example:

Radialgradientbrush

< Rectangle Grid. Row = "1" Grid. Column = "0" >
< Rectangle. Fill >
< Radialgradientbrush Gradientorigin = "0.5, 0.5" Center = "0.5, 0.5"
Radiusx = "0.5" Radiusy = "0.5" >
< Gradientstop Color = "Yellow" Offset = "0"   />
< Gradientstop Color = "Red" Offset = "0.25"   />
< Gradientstop Color = "Blue" Offset = "0.75"   />
< Gradientstop Color = "Limegreen" Offset = "1"   />
</ Radialgradientbrush >
</ Rectangle. Fill >
</ Rectangle >

 

Effect:

 

Gradientorigin specifies the starting point of the gradient axis of the radial gradient paint brush. The gradient axis radiating from the gradient origin to the gradient circle. The gradient circle of a paint brush is defined by its center, radiusx, and radiusy attributes.

Displays gradientorigin,Center, Radiusx and radiusy.

In addition, because the gradient stop point does not provide the opacity attribute, you must use the argb hexadecimal or scrgb notation to specify the alpha channel of the color to create a transparent or partially transparent gradient stop point. Its hexadecimal representation. For more information, see other documents.

Iv. Image brush)

The imagebrush class allows you to use images as fills, backgrounds, and outlines. Imagebrush usedImagesourceThis attribute specifies a JPEG or PNG Image to draw a region. Used to set the path of the image to be loadedImagesourceAttribute.

By default, imagebrush will stretch the image to fully fill the area to be drawn. If the area to be drawn is different from the aspect ratio of the image, the image may be distorted. You can change the strech attribute from the default valueFillChangeNone,UniformOrUniformtofillTo change this behavior.

Example:

< Rectangle Grid. Row = "1" Grid. Column = "1" >
< Rectangle. Fill >
< Imagebrush Imagesource = "Windows7opendaylogo.png" />
</ Rectangle. Fill >
</ Rectangle >

 

5. Video paint brush)

A video paint brush uses a video to draw an area. It relies on the mediaelement object to provide video streams. You can use the video content by directing the sourcename of videobrush to the name of mediaelement.

Videobrush

< Mediaelement X: Name = "Media" Source = "OK. wmv" Autoplay = "True" Stretch = "Uniformtofill" />
< Stackpanel >
< Stackpanel. Background >
< Videobrush Sourcename = "Media" />
</ Stackpanel. Background >
</ Stackpanel >

 

The next section describes how to use mediaelement.