Using a Draw surface

A Draw surface is an interactive surface that provides a simple way to draw on a map. The Draw surface allows you to 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 do the following:

Creating an application with a Draw surface

The following steps walk you through creating a simple application with a Draw surface. This application allows users to draw polygons on a map.

  1. Create an ArcGIS API for Windows Phone application with a Map, GraphicsLayer, and SimpleFillSymbol, as described in Creating a map, Creating a graphics layer, and Managing graphic features.

    Your ContentPanel XAML should look as follows:

    <esri:Map x:Name="MyMap" 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:ArcGISTiledMapServiceLayer>
            <esri:GraphicsLayer ID="MyGraphicsLayer"/>
        </esri:Map.Layers>
    </esri:Map>
    

    Add a SimpleFillSymbol as a resource in your LayoutRoot Grid with the following XAML:

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

    TipTip:

    • Don't forget to add references to the ESRI.ArcGIS.Client and System.Runtime.Serialization assemblies to your project.
    • Make sure you include XML namespace references for both the ESRI.ArcGIS.Client and ESRI.ArcGIS.Client.Symbols namespaces in the ESRI.ArcGIS.Client assembly as attributes on the phone:PhoneApplicationPage element.
      xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client"
      xmlns:esriSymbols="clr-namespace:ESRI.ArcGIS.Client.Symbols;assembly=ESRI.ArcGIS.Client"
      

  2. Add a blue fill symbol so that you can see the difference between the symbol used on the Draw surface and the symbol used in the GraphicsLayer.
    <Grid.Resources>
        <esriSymbols:SimpleFillSymbol x:Key="RedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" />
        <esriSymbols:SimpleFillSymbol x:Key="BlueFillSymbol" Fill="#660000FF" BorderBrush="Blue" BorderThickness="2" />
    </Grid.Resources>
    
  3. Open the code-behind. Add using statements for ESRI.ArcGIS.Client and ESRI.ArcGIS.Client.Symbols.
    using ESRI.ArcGIS.Client;
    using ESRI.ArcGIS.Client.Symbols;
    
  4. In the Page constructor, create a new Draw object. Include the Map name in the Draw constructor.
    Draw MyDrawObject = new Draw(MyMap);
    
  5. Specify the Draw 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.
    Draw MyDrawObject = new Draw(MyMap) { 
        FillSymbol = LayoutRoot.Resources["RedFillSymbol"] as FillSymbol 
    };
    
  6. Declare a handler for the surface's DrawComplete event. This event fires whenever a user finishes drawing a shape on the surface.
    Draw MyDrawObject = new Draw(MyMap) { 
        FillSymbol = LayoutRoot.Resources["RedFillSymbol"] 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 (for example, a button click). When the Draw surface is active, click events result in geometries being drawn on the map. The DrawMode determines the type of geometry that's drawn.
    MyDrawObject.DrawMode = DrawMode.Polygon; 
    MyDrawObject.IsEnabled = true;
    
  8. Implement a handler for the Draw surface's DrawComplete event. This handler is called when the user is done drawing a polygon. The handler's args parameter holds a reference to the user-drawn geometry.
    private void MyDrawObject_DrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args) 
    { 
    }
    
  9. Create a Graphic. Assign the geometry drawn by the user and the blue SimpleFillSymbol specified in the application's XAML to the Graphic.
    private void MyDrawObject_DrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args) 
    { 
        Graphic graphic = new Graphic() { 
            Geometry = args.Geometry, 
            Symbol = LayoutRoot.Resources["BlueFillSymbol"] as FillSymbol 
        }; 
    }
    
  10. Retrieve the GraphicsLayer that is specified in the application's XAML.
    private void MyDrawObject_DrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args) 
    { 
        Graphic graphic = new Graphic() { 
            Geometry = args.Geometry, 
            Symbol = LayoutRoot.Resources["BlueFillSymbol"] as FillSymbol  
        };
        GraphicsLayer graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer; 
    }
    
  11. Add the Graphic to the GraphicsLayer. This will display the graphic on the map, as the Draw surface is cleared and ready for additional user drawing.
    private void MyDrawObject_DrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args) 
    { 
        Graphic graphic = new Graphic() { 
            Geometry = args.Geometry, 
            Symbol = LayoutRoot.Resources["BlueFillSymbol"] as FillSymbol  
        };
        GraphicsLayer graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer; 
        graphicsLayer.Graphics.Add(graphic); 
    }
    

Enabling and disabling the Draw surface

While the application created above has a Draw surface that is always enabled, many applications will have a Draw surface that is only enabled during certain operations or states. In that case, the Draw surface needs to be enabled and disabled over the life of the application. In the following code, the Draw surface is enabled by setting the IsEnabled property to true, and specifying a DrawMode:

MyDrawObject.DrawMode = DrawMode.Polygon; 
MyDrawObject.IsEnabled = true;

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

MyDrawObject.DrawMode = DrawMode.None; 
MyDrawObject.IsEnabled = false;

Drawing different 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 FillSymbol 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 following table:

Draw Mode

Supported Symbol Types

Bound Property

Point

none

none

Polyline

CartographicLineSymbol

LineSymbol

Polygon

SimpleFillSymbol

PolygonSymbol

Rectangle

SimpleFillSymbol

PolygonSymbol

Freehand

CartographicLineSymbol

LineSymbol

While there is a Point draw mode, no symbol types are supported, and there is no property to customize the point symbol used on a Draw surface. The properties and symbolizations are for use while interacting with the Draw surface. In Point mode, there is no intermediate display before the Draw event is completed. Rather, the points are captured from the Draw surface and processed, often being added to a GraphicsLayer (as shown with the polygons in the above example). In this case, the symbols (SimpleMarkerSymbol, TextSymbol, or PictureMarkerSymbol) are set as the symbol for the graphic added to the GraphicsLayer, not on the Draw surface used to generate their geometries.

1/23/2012