Windows Phone development (30): Graphics

Images, such as rectangles, rectangles, and paths, are derived from the shape class. They generally represent regular or irregular images. These images are simple two-dimensional images and I believe everyone can understand them.

Example 1: rectangle.

See the following XAML code.

 

<Rectangle radiusx = "20" radiusy = "35" <br/> Fill = "blue" <br/> canvas. left = "32" canvas. top = "28" <br/> width = "200" Height = "156"/>

Images are suitable for positioning in the canvas. Therefore, I will place a series of graphic examples in the canvas. For the canvas layout method, I have already introduced it in the previous article.
The rectangle class indicates a rectangle. radiusx indicates the radius of the rectangle rounded corner on the X axis. In the same way as radiusy, fill is used to fill the painting brush.
The rectangle class is easy to understand.

Next we will look at a rectangle with a contour and filled with a gradient paint brush.

<Rectangle canvas. left = "12" canvas. top = "210" <br/> stroke = "green" <br/> Height = "112" width = "223" <br/> strokethickness = "8.5"> <br /> <rectangle. fill> <br/> <lineargradientbrush startpoint = "" endpoint = ""> <br/> <gradientstop color = "# ff408764" offset = "0"/> <br /> <gradientstop color = "gold" offset = "0.65"/> <br/> <gradientstop color = "# ffc697e0" offset = "1"/> <br/> </lineargradientbrush> <br/> </rectangle. fill> <br/> </rectangle>

 

Stroke is the outline painter, and strokethickness is the outline size. These attributes are derived from the shape class, so they are common to all subclasses.

Example 2: elliptic.

Ellipse indicates the elliptic, which also includes the positive circle (the height and width are equal). This class is also very easy to use, and all its attributes are inherited from the shape of the common base class.
See the following example.

<Ellipse canvas. left = "25" canvas. top = "370" <br/> width = "145" Height = "135" <br/> stroke = "blue" <br/> strokethickness = "3.8" <br/> Fill = "Silver"/>

The Running Effect of the preceding example is displayed.

 

 

 

Example 3: draw a line segment using line.

Strictly speaking, it should be called a line segment, because a straight line has no endpoints and is infinitely extended. Line has two endpoints, namely the start point and the result point.
Line is also very easy to use, that is, two points (four coordinates), please refer to the instance.

<Grid> <br/> <line X1 = "60" Y1 = "35" <br/> X2 = "480" y2 = "450" <br/> stroke =" yellow <br/> strokethickness = "9.2"/> <br/> </GRID>

Line has obvious effect in grid, because left and top attributes must be set in canvas, which will interfere with the settings of X1, Y1, X2, Y2.
Shows the running effect.

 

Example 4: polygon and polyline

We can see that these two guys look very much like each other.
They have the same attributes.

Points: a set of all vertices that constitute the graph.

These two guys may feel a little dizzy. You may not understand the explanation in the document, but it doesn't mean you can't use it. It doesn't matter. Let's first compare the differences between the two brothers.

<Grid> <br/> <grid. columndefinitions> <br/> <columndefinition width = "*"/> <br/> <columndefinition width = "*"/> <br/> </grid. columndefinitions> <br/> <grid. rowdefinitions> <br/> <rowdefinition Height = "*"/> <br/> <rowdefinition Height = "Auto"/> <br/> </grid. rowdefinitions> <br/> <textblock grid. column = "0" grid. row = "1" text = "polygon" horizontalalignment = "center" margin = "0, 20" fontsize = "35"/> <br/> <textblock grid. column = "1" grid. row = "1" text = "polyline" horizontalalignment = "center" margin = "0, 20" fontsize = "35"/> <br/> <polygon grid. column = "0" grid. row = "0" <br/> margin = "50" <br/> stroke = "yellow" <br/> strokethickness = "6.8" <br/> stretch = "Fill "> <br/> <polygon. points> <br/> <point X = "2" Y = "6"/> <br/> <point X = "65" Y = "37"/> <br /> <point X = "160" Y = "120"/> <br/> <point X = "22" Y = "390"/> <br/> </ polygon. points> <br/> </polygon> <br/> <polyline grid. column = "1" grid. row = "0" <br/> margin = "50" <br/> stroke = "yellow" <br/> strokethickness = "6.8" <br/> stretch = "Fill "> <br/> <polyline. points> <br/> <point X = "2" Y = "6"/> <br/> <point X = "65" Y = "37"/> <br /> <point X = "160" Y = "120"/> <br/> <point X = "22" Y = "390"/> <br/> </ polyline. points> <br/> </polyline> <br/> </GRID>

 

See it. One is closed and the other is closed. If you can't see it clearly, do it yourself.

 

 

Certificate ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Opinion: the blog editor often dies, and the editor does not respond to the issue. We hope csdn can fix the vulnerability early.