Basic graphics in Silverlight

Original article: http://www.cnblogs.com/chukaren/archive/2010/01/15/1648902.html

 

1. Write a page file firstTest.html

 <  Html  > <  Head  > <  Title  > My Silverlight Test </  Title  > </  Head  > <  Body  > < Object  Type  = "Application/x-silverlight-2"  ID  = "Mysl"  Width  = "800"  Height  = "600"> <  Param  Name  = "Background"  Value  = "Silver"/> <  Param  Name  = "Source" Value  = "Mytest. XAML"/> </  Object  > </  Body  > </  Html  > 

 

2. Then write The XAML file,Mytest. XAMLLater, you can change the file to see the effect, as shown below:

 <  Canvas  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X = "Http://schemas.microsoft.com/winfx/2006/xaml"> <  Rectangle  Canvas. Top  = "10"  Canvas. Left  = "10"  Width  = "100"  Height  = "100"  Fill  = "Red"  Stroke  = "Black"  Strokethickness  = "10"/> </  Canvas > 

 
In this way, the Silverlight control is set to 800x600 in the HTML page, and the background color is silver gray. The XAML file is our content.
 

 
The content uses canvas as the layout control, and now a rectangular image is placed in it, which is located at 10, 10 in the upper left corner. The width and height are both
 

 
100, the red background, the edge is black, and the line width of the edge is 10:
 

 

3. rectangle)

In addition to the preceding attributes, you can also set a rounded rectangle.

 <  Canvas  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  : X  = "Http://schemas.microsoft.com/winfx/2006/xaml"> <  Rectangle  Canvas. Top  = "10"  Canvas. Left  = "10"  Width  = "150"  Height  = "100"  Fill  = "Red"  Stroke  = "Black"  Strokethickness  = "10" Radiusx  = "20"  Radiusy  = "50"/> </  Canvas  > 

4. Ellipse)

There is no essential difference between an ellipse and a rectangle, just to make it easier to set radiusx and radiusy to half the length or width.

Therefore, an ellipse has two fewer attributes than a rectangle, and you do not need to set radiusx and radiusy. The image will not be captured here.

5. Polygon)

A polygon needs to specify multiple lines. Therefore, a points attribute is added to specify each vertex, and fill, stroke, and strokethickness are available at the same time.

If canvas. Top and canvas. Left are not specified, the start point is based on the 0, 0 points of the canvas. Otherwise, the start point is based on the specified vertex.

 <  Canvas  Xmlns = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X  = "Http://schemas.microsoft.com/winfx/2006/xaml"> <  Polygon  Canvas. Top  = "10"  Canvas. Left  = "10"  Fill  = "Red"  Stroke  = "Black"  Strokethickness  = "10" Points  = "50, 50 100,100, 10"/> </  Canvas  > 

 

6. Line Segments)

Of course, you must specify the start and end points for the line. This requires four more attributes: X1, Y1, X2, and Y2. You can also specify the style of two endpoints, such as square, circle, and triangle.

. There are two more attributes, strokestartlinecap and strokeendlinecap. In addition, there are stroke and strokethickness.

 <  Canvas  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X = "Http://schemas.microsoft.com/winfx/2006/xaml"> <  Line  X1  = "20"  Y1  = "20"  X2  = "200"  Y2  = "20"  Stroke  = "Black"  Strokethickness  = "10"  Strokestartlinecap  = "Triangle"  Strokeendlinecap = "Triangle"/> <  Line  X1  = "20"  Y1  = "40"  X2  = "200"  Y2  = "40"  Stroke  = "Black"  Strokethickness  = "10"  Strokestartlinecap  = "Round"  Strokeendlinecap = "Round"/> <  Line  X1  = "20"  Y1  = "60"  X2  = "200"  Y2  = "60"  Stroke  = "Black"  Strokethickness  = "10"  Strokestartlinecap  = "Square"  Strokeendlinecap = "Square"/> <  Line  X1  = "20"  Y1  = "80"  X2  = "200"  Y2  = "80"  Stroke  = "Black"  Strokethickness  = "10"  Strokestartlinecap  = "Flat"  Strokeendlinecap = "Flat"/> </  Canvas  > 

 

7. Multiple Line Segments

This is basically the same as polygon, but the last vertex is different from the first vertex, so it will not be closed. For example:

 <  Canvas  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X  = "Http://schemas.microsoft.com/winfx/2006/xaml"> <  Polyline  Canvas. Top = "10"  Canvas. Left  = "10"  Fill  = "Red"  Stroke  = "Black"  Strokethickness  = "10"  Points  = "50, 50 100,100, 10"/> </  Canvas  > 

8. Path)

The path is used to represent complex images. The preceding images can both represent and represent various complex curves.

Path mainly uses the data attribute to represent the image. Specify the command in data, M indicates moving, L indicates drawing a straight line, V indicates painting a vertical line,

H indicates that the horizontal line is drawn, Z indicates that the end (directly to the starting point), C indicates that the three-time besell curve, and Q indicates that the two besels curve,

S indicates a smooth besell curve, and a indicates a curve. For more information, see the help documentation.

As shown below, first move to 50, then draw a line to 100,100, then draw a line to 150, then horizontally draw to, then vertically draw to 90, and then end.

<CanvasXmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"Xmlns:X= "Http://schemas.microsoft.com/winfx/2006/xaml"> <PathStroke= "Black"Strokethickness= "10"Data= "M 50, 50 L 100,100 l 150, 10 h v 90 Z"/> </Canvas>
 

You can also set some geometric shapes for the data attribute in the path, suchRectanglegeometry, ellipsegeometry, linegeometry, pathgeometryAnd so on.

For example:

 <  Canvas  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X  = "Http://schemas.microsoft.com/winfx/2006/xaml"> <  Path  Canvas. Top  = "10"  Canvas. Left  = "10" Fill  = "Red"  Stroke  = "Black"  Strokethickness  = "10"> <  Path. Data  > <  Rectanglegeometry  Rect  = "150,100,"/> </  Path. Data  > </  Path  > </  Canvas > 

 

If multiple shapes exist, they must be placed in geometrygroup.

 <  Canvas  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X  = "Http://schemas.microsoft.com/winfx/2006/xaml"> <  Path  Canvas. Top  = "10"  Canvas. Left  = "10" Fill  = "Red"  Stroke  = "Black"  Strokethickness  = "10"> <  Path. Data  > <  Geometrygroup  > <  Rectanglegeometry  Rect  = "150,100,"/> <  Ellipsegeometry  Radiusx  = "30" Radiusy  = "30"  Center  = "220, 40" type = "codeph" text = "/codeph"/> </  Geometrygroup  > </  Path. Data  > </  Path  > </  Canvas  > 

 

The difference between the geometric shape and the above figure is that the geometric shape is completely a mathematical description, and there is no attribute such as fill or stroke, regardless of the display.

 

9. Other common attributes

Strokdasharray:Use the dotted line. It contains the width of short lines and spaces. For example, odd digits represent short lines, and even digits represent spaces.

For example, strokedasharray = "2, 1" indicates that the short line is 2 and the space is 1.

 <  Canvas  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X  = "Http://schemas.microsoft.com/winfx/2006/xaml"> <  Polygon  Canvas. Top  = "10"  Canvas. Left  = "10" Strokedasharray  = "2, 1"  Fill  = "Red"  Stroke  = "Black"  Strokethickness  = "10"  Points  = "50, 50 100,100, 10"/> </  Canvas  > 

Strokelinejoin:Line connection, which can be set to miter, round, and bevel.

Strokemiterlimit:The threshold value when the line is extended.

Visibility:Visualized. It can be set to visible or collapsed. When set to collapsed, the input event cannot be received.

Opacity:Transparency. Any value between 0 and 1. 0 indicates completely transparent. When set to 0, you can receive input events.

Stretch:Scaling. It can be set to none, uniform, and uniformtofill. It is mainly used when the image is filled with images, painter or media.