Windows Phone (14) a brief introduction to ellipse and rectangle Elements

The system. Windows. shapes namespace contains ellipse and rectangle;

Ellipse class

It indicates that an elliptic is drawn and derived from the shapes namespace. For example:

<! -- Contentpanel-place other content here -->
<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0">
<Ellipse fill = "B" stroke = "whitesmoke" strokethickness = "70"
> </Ellipse>
</GRID>

The fill attribute of the code above indicates the fill color, the stroke attribute indicates the stroke color, and the strokethickness indicates the width of the contour, in pixels, among them, fill and stroke attributes are of the brush type, so we can customize their colors, such as gradient effect; their display effect is more like an egg slice, with wood

 

However, if you add these two attributes to the textblock tag

 

Verticalalignment = "center" horizontalalignment = "center"

The whole lingering region disappears because when the container where ellipse is located permits it, ellipse will fill the container region, but if it is forcibly reduced, such as adding the above two attributes, the area to be drawn is reduced without restriction until it is invisible. Therefore, the size limit on the area to be drawn is required. The attribute of the restricted size is width and height ), when we set the width and height, the entire drawing area will become a circle, for example:

<! -- Contentpanel-place other content here -->
<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0">
<Ellipse fill = "fuchsia" stroke = "whitesmoke" strokethickness = "50" width = "400" Height = "400"
> </Ellipse>
</GRID>

Effect:

 

The following result is a circle similar to a 3D image using ellipse, provided that the width and height are the same:

<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0">
<Ellipse width = "400" Height = "400">
<Ellipse. Fill>
<Radialgradientbrush gradientorigin = "0.4 0.4">
<Gradientstop offset = "0" color = "white"> </gradientstop>
<Gradientstop offset = "1" color = "red"> </gradientstop>
</Radialgradientbrush>
</Ellipse. Fill>
</Ellipse>
</GRID>

Effect:

 

Since the white center is set to the coordinate 0.4 0.4, And the offset is 0.5. 05 from the center, the display looks stereoscopic.

Rectangle class

Is drawn into a rectangle, also inherited from the shape class, for example, the following example

<Rectangle Height = "400" width = "400" fill = "brown" stroke = "beige" strokethickness = "50"> </rectangle>

The attributes in the above Code are used in the same way as those in ellipse. effect:

 

Rectang has two properties not available for ellipse, radiusx and radiusy.

<Rectangle Height = "500" width = "400" fill = "brown"
Radiusx = "190"
Radiusy = "200"
Stroke = "beige" strokethickness = "50">

</Rectangle>

In this example, radiusx indicates the x-axis radius of the elliptical circle that converts the angle of the rectangle to the angle of the x-axis. radiausy indicates the y-axis radius of the elliptical circle. Note, if you want to change the angle of the rectangle into a circle, neither of these two values can be blank, because the rounded corner is formed by drawing an elliptical shape based on the defined length on the X and Y axes, and then forming a rounded corner through the intersection, in addition, the value set by radiausx must be smaller than or equal to the Set width value. If it is set to a negative value, the system also considers the value as a positive value;

:

 

 

 

Qianqianli insisted on creating a group: 42182428