Graphics – Development Notes

Esri Silverlight API graphics samples have some well explained examples for rendering basic graphic objects. It is possible to define graphics symbols both using xaml and code(c#).

I will explain how to render a bezier curve using esri simple renderer with a xaml. First of all, add your silverlight project a resources.xaml. It should contain a resource dictionary that will define the behaviour of the renderer for our graphicslayer object. An example resource.xaml :

In the resources.xaml file there are some bindings that may take your attention. For example the Fill property of the symbol is bound to Color attribute. I will initialize this attribute with a SolidColorBrush while constructing Graphic object. Than I will add the Graphic object to graphics layer.

Initialize graphicslayer with the resource dictionary and add it to map’s Layers:

Now our graphics layer is ready to render a Bezier curve. We just need to apply the bezier formula to our map points and obtain a Polyline object.

In my case I have two MapPoints ( P0 and P2) and need to draw a curve between them. It is obvious that I need one more intermediate point to apply bezier formula. I generated an intermediate point whose coordinates have equal distances from my initial points and a little away from the straight line between the initial points. The generated intermediate point, P1, and the midpoint between the initial points forms a 2D vector which is orthogonal to the vector<p0,p2>.Now I will use the Quadratic Bézier curves formula which is explained here.

The polyline object created above contains an array of PointCollections. Each PointCollection object containts two points. First one is the end point of previous PointCollection and second one is the end point for the current PointCollection. The second point will be used in the loop as a start point for the next PointCollection.

It is time to create a Graphic object and give it to a predefined GraphicsLayer of the map to render.