dot
Using a Draw surface

With the Draw surface, you can easily capture geometries that are drawn by users of your application. Once you retrieve these geometries, you can add them to a Graphics layer or use them as input for other operations such as identify or buffer. To use a Draw surface in your application, you must:

Creating an application with a Draw surface

This document will walk you through using the Draw surface in a simple application that allows users to draw polygons on a map. All the .NET code (code-behind) shown in the steps that follow is written in C#. As a starting point, create a Silverlight application with a Map, GraphicsLayer, and SimpleFillSymbol as outlined in the topics Creating a map, Creating a Graphics layer, and Managing Graphic features. The XAML view of your application's main page (i.e. Page.xaml) should look similar to the following:

<UserControl x:Class="DrawSurface.Page"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client"
	xmlns:esriSymbols="clr-namespace:ESRI.ArcGIS.Client.Symbols;assembly=ESRI.ArcGIS.Client"   >
	<Grid x:Name="LayoutRoot" Background="White">

		<Grid.Resources>
			<esriSymbols:SimpleFillSymbol x:Name="RedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" />
		</Grid.Resources>

		<esri:Map x:Name="MyMap" Background="White" Extent="-120, 20, -100, 40" >
			<esri:Map.Layers>
				<esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer" 
					Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
				<esri:GraphicsLayer ID="MyGraphicsLayer" />
			</esri:Map.Layers>
		</esri:Map>
	</Grid>
</UserControl>

  1. Open the code-behind and in the Page constructor create a new Draw object. Include the Map name in the Draw constructor.
  2. MyDrawObject = new Draw(MyMap);

  3. Specify the surface's DefaultPolygonSymbol property to be the RedFillSymbol object defined in the Grid's resources. This sets the symbol that will be used to show polygons while they are being drawn.
  4. MyDrawObject = new Draw(MyMap)
                {
                    LineSymbol = LayoutRoot.Resources["DrawLineSymbol"] as LineSymbol,
                    FillSymbol = LayoutRoot.Resources["DrawFillSymbol"] as FillSymbol
                };

  5. Declare a handler for the surface's OnDrawComplete event. This event fires whenever a user finishes drawing a shape on the surface.
  6. MyDrawObject = new Draw(MyMap)
                {
                    LineSymbol = LayoutRoot.Resources["DrawLineSymbol"] as LineSymbol,
                    FillSymbol = LayoutRoot.Resources["DrawFillSymbol"] as FillSymbol
                };
    
    MyDrawObject.DrawComplete += MyDrawObject_DrawComplete;
    

  7. Activate the Draw surface by specifying a DrawMode and setting IsEnabled to true. Usually activation of a Draw surface is initiated by a user event (e.g. button click). When the Draw surface is active, click events will result in geometries being drawn on the Map. The DrawMode determines the type of geometry that will be drawn.
  8. MyDrawObject.DrawMode = DrawMode.Polygon;
    MyDrawObject.IsEnabled = true;
    

  9. Implement a handler for the Draw surface's OnDrawComplete event. This handler will be called whenever the user is done drawing a polygon. The handler's args parameter holds a reference to the user-drawn geometry.
  10. private void MyDrawObject_OnDrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args)
    {
    }

  11. Create a Graphic. Assign the Graphic the geometry drawn by the user and the SimpleFillSymbol specified in the application's XAML.
  12. private void MyDrawObject_OnDrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args)
    {
    	Graphic graphic = new Graphic()
    	{
    		Geometry = args.Geometry,
    		Symbol = RedFillSymbol
    	};
    }

  13. Retrieve the GraphicsLayer that is specified in the application's XAML.
  14. private void MyDrawObject_OnDrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args)
    {
    	Graphic graphic = new Graphic()
    	{
    		Geometry = args.Geometry,
    		Symbol = RedFillSymbol
    	};
    
    	GraphicsLayer graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer;
    }

  15. Add the Graphic to the GraphicsLayer. This will display the Graphic on the Map.
  16. private void MyDrawObject_OnDrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args)
    {
    	Graphic graphic = new Graphic()
    	{
    		Geometry = args.Geometry,
    		Symbol = RedFillSymbol
    	};
    
    	GraphicsLayer graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer;
    	graphicsLayer.Graphics.Add(graphic);
    }

  17. To disable the Draw surface, set the DrawMode to None and IsEnabled property to false.
  18.  

Geometries

In the application above, the Draw surface is used to draw polygons. To do this, a SimpleFillSymbol was bound to the Draw surface's DefaultPolygonSymbol property and a DrawMode of Polygon was used. The relationships between Symbol types and Draw surface properties for all the supported geometry types are summarized in the table below.

Draw Mode Supported Symbol Types Bound Property
Point SimpleMarkerSymbol, TextSymbol, PictureMarkerSymbol DefaultMarkerSymbol
Polyline CartographicLineSymbol DefaultLineSymbol
Polygon SimpleFillSymbol DefaultPolygonSymbol
Rectangle SimpleFillSymbol DefaultRectangleSymbol
Freehand CartographicLineSymbol DefaultLineSymbol