Silverlight Learning (v) graphic plotting

There are too many ways to plot graphics in Silverlight, where the plot differs from the plotting in ArcGIS, where most of the plotting is static. The plotting methods mainly include path (route notation), direct plotting (line, etc.), geometric markers (linegeometry, etc.).

1. Path Marking method

Path markers are a very important way of plotting in Silverlight, and with path markers, we can plot curves or lines of various shapes. Directly below the code.

1  <PathStroke= "Blue"Data= "M 0,0 L 0,0 10,10 20,20 50,50"></Path>2             <PathStroke= "Red"Data= "M 50,50 H"></Path>3             <PathStroke= "Green"Data= "M 150,50 V"></Path>4           5             <PathStroke= "Greenyellow"Data= "M 100,200 C 100,25 400,350 400,175 H 280"strokethickness= "3"></Path>

Path

Path plotting is generally through <path data= ""/>, in Data is the main part of the plot, M stands for the starting point, the point is represented as (x, y), L table line, h for Horizontal line, V for vertical, and C for three cubic Bezier curves. If the graphic needs to be closed, end with Z. The stroke represents the color of the contour line. StrokeThickness refers to the width of a line segment.

2. Chart plotting

Several plot types, such as line, PolyLine, Polygon, Eclipse, Rectangle, are available in Silverlight.

Lines, you can draw a line in the canvas, you need to set the starting point (x1,y1), the end point (x2,y2), the color of the line and the width of the line.

PolyLine, which is the polyline, needs to specify that its points,points is a collection of points.

Polygon, is a polygon, you also need to specify points.

Eclipse is an ellipse ...

Rectangle is a rectangle. Here we need to talk about the color gradient. There are two different ways to fade in Silverlight: LinearGradientBrush and RadialGradientBrush.

LinearGradientBrush is a linear gradient that can evolve into a variety of gradients, such as horizontal gradients, vertical gradients, and diagonal gradients.

1         <RectangleWidth= "$"Height= " the"Canvas.Left= "+"Canvas.Top= "+">2                 <Rectangle.fill>3                     <LinearGradientBrushStartPoint= "0,0"EndPoint= "The ">4                         <GradientStopColor= "Yellow"Offset= "0.0"></GradientStop>5                         <GradientStopColor= "Red"Offset= "0.25"></GradientStop>6                         <GradientStopColor= "Blue"Offset= "0.75"></GradientStop>7                         <GradientStopColor= "Limegreen"Offset= "1.0"></GradientStop>8                     </LinearGradientBrush>9                 </Rectangle.fill>Ten             </Rectangle>

Slash gradient

The slash gradient is the start point (0,0) of the line and the end point (in.).

1  <RectangleWidth= "$"Height= " the"Canvas.Left= " the"Canvas.Top= "310">2                 <Rectangle.fill>3                     <LinearGradientBrushStartPoint= "0,0.5"EndPoint= "1,0.5">4                         <GradientStopColor= "Yellow"Offset= "0.0"></GradientStop>5                         <GradientStopColor= "Red"Offset= "0.25"></GradientStop>6                         <GradientStopColor= "Blue"Offset= "0.75"></GradientStop>7                         <GradientStopColor= "Limegreen"Offset= "1.0"></GradientStop>8                     </LinearGradientBrush>9                 </Rectangle.fill>Ten             </Rectangle>

Horizontal Gradient

Horizontal gradient Set starting point (0,0.5), end point (1,0.5), horizontal gradient needs to ensure that the value of the y-axis does not change

1 <RectangleWidth= "$"Height= " the"Canvas.Left= "+"Canvas.Top= "+">2                 <Rectangle.fill>3                     <LinearGradientBrushStartPoint= "0.5,0"EndPoint= "0.5,1">4                         <GradientStopColor= "Yellow"Offset= "0.0"></GradientStop>5                         <GradientStopColor= "Red"Offset= "0.25"></GradientStop>6                         <GradientStopColor= "Blue"Offset= "0.75"></GradientStop>7                         <GradientStopColor= "Limegreen"Offset= "1.0"></GradientStop>8                     </LinearGradientBrush>9                 </Rectangle.fill>Ten             </Rectangle>

Vertical Gradient

Vertical gradients need to ensure that the value of the x-axis is unchanged, such as setting the starting point (0.5,0) and ending Point (0.5,1).

RadialGradientBrush is a radial gradient that, from a central point, gradients colors in a circular way.

1 Rectangle width= "height= ", "canvas.left=", "canvas.top=" >2                 <Rectangle.fill>3                     <RadialGradientBrushCenter= "0.5,0.5"Gradientorigin= "0.5,0.5">4                         <GradientStopColor= "Yellow"Offset= "0"></GradientStop>5                         <GradientStopColor= "Red"Offset= "0.25"></GradientStop>6                         <GradientStopColor= "Blue"Offset= "0.75"></GradientStop>7                         <GradientStopColor= "Limegreen"Offset= "1.0"></GradientStop>8                     </RadialGradientBrush>9                 </Rectangle.fill>Ten             </Rectangle>

Radial Gradient

Here you need to set CENTETR and Gradientorigin,center as the center point, and gradient is the starting point for the radial gradient axis.

3. Geometric plotting

The geometry is plotted through LineGeometry, EllipseGeometry, RectangleGeometry, and so on. With geometric plotting, we can plot complex graphics. There is no detailed explanation here.

It was intended to be written in combination with blend, but it was not implemented in blend because the time was too hasty. Only the next time it's done.