Click or drag to resize
Code Example - Editor_Sketching

Demonstrates sketching various geometric shapes on the map via the Editor.RequestShapeAsync method. The sketches are then added as Graphics in a GraphicsLayer and drawn on the map.

Code Example
Editor Sketching

This section contains selected code files from a Visual Studio project that emphasize specific ArcGIS Runtime SDK (Windows Desktop) features. For example: some code examples may accomplish the bulk of the work as a configuration property in the .xaml file and hence only the .xaml file will be shown in detail below. In other code examples, the .xaml is used to define the configuration of graphical elements for the application but the application logic is performed in the code behind, hence you may see both the .xaml and .cs/.vb files shown in detail below.

XAML
<Window x:Class="Editor_Sketching.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013" 
    Title="MainWindow" Height="600" Width="800">

    <Grid x:Name="LayoutRoot">


        <!-- 
        Define a set of symbols that will be used in the code-behind to draw graphics on the screen. 
        -->
        <Grid.Resources>

            <esri:SimpleMarkerSymbol x:Key="MyPointSymbol" Color="Black" Size="12" Style="Circle" />

            <esri:SimpleLineSymbol x:Key="MyPolylineSymbol" Color="Green" Style="Solid" Width="1" />

            <esri:SimpleFillSymbol x:Key="MyPolygonSymbol" Color="Yellow" Style="Solid">
                <esri:SimpleFillSymbol.Outline>
                    <esri:SimpleLineSymbol Color="Black" Style="Solid" Width="2"/>
                </esri:SimpleFillSymbol.Outline>
            </esri:SimpleFillSymbol>

            <esri:SimpleFillSymbol x:Key="MyRectangleSymbol" Color="Turquoise" Style="DiagonalCross">
                <esri:SimpleFillSymbol.Outline>
                    <esri:SimpleLineSymbol Color="Pink" Style="Dash" Width="2"/>
                </esri:SimpleFillSymbol.Outline>
            </esri:SimpleFillSymbol>

            <esri:SimpleLineSymbol x:Key="MyFreehandSymbol" Color="Orange" Style="Dot" Width="4" />

            <esri:SimpleFillSymbol x:Key="MyArrowSymbol" Color="Blue" Style="Horizontal">
                <esri:SimpleFillSymbol.Outline>
                    <esri:SimpleLineSymbol Color="DarkGray" Style="Null" />
                </esri:SimpleFillSymbol.Outline>
            </esri:SimpleFillSymbol>

            <esri:SimpleFillSymbol x:Key="MyTriangleSymbol" Color="LightBlue" Style="Null">
                <esri:SimpleFillSymbol.Outline>
                    <esri:SimpleLineSymbol Color="Black" Style="DashDotDot"  Width="10"/>
                </esri:SimpleFillSymbol.Outline>
            </esri:SimpleFillSymbol>

            <esri:SimpleFillSymbol x:Key="MyEllipseSymbol" Color="White" Style="Solid">
                <esri:SimpleFillSymbol.Outline>
                    <esri:SimpleLineSymbol Color="Peru" Style="Solid" Width="5"/>
                </esri:SimpleFillSymbol.Outline>
            </esri:SimpleFillSymbol>

            <esri:SimpleFillSymbol x:Key="MyCircleSymbol" Color="Black" Style="Solid">
                <esri:SimpleFillSymbol.Outline>
                    <esri:SimpleLineSymbol Color="Red" Style="Solid" Width="2"/>
                </esri:SimpleFillSymbol.Outline>
            </esri:SimpleFillSymbol>

            <esri:SimpleLineSymbol x:Key="MyLineSegmentSymbol" Color="Aqua" Style="Solid" Width="4" />

        </Grid.Resources>

        <!-- Add a MapView Control. -->
        <esri:MapView x:Name="MapView1" Background="White" HorizontalAlignment="Left" Margin="10,112,0,0"  VerticalAlignment="Top" 
                   Height="447" Width="772">

            <!-- Add a Map. -->
            <esri:Map x:Name="Map1" >

                <!-- Add a backdrop ArcGISTiledMapServiceLayer. -->
                <esri:ArcGISTiledMapServiceLayer ID="World_Light_Gray_Base" 
                              ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"/>

                <!-- Add an empty GraphicsLayer to hold graphics that are generated by the user with the Editor control. -->
                <esri:GraphicsLayer ID="MyGraphicsLayer"/>

            </esri:Map>
        </esri:MapView>

        <!-- Add a ComboBox to hold the different DrawShape enumerations that can be used for sketching graphics with the Editor control. -->
        <ComboBox Name="ComboxBox1" Height="40" Margin="199,67,407,462"/>

        <!-- Add a Button to begin the Editor.RequestShapeAsync() method based upon the user choice in the ComboBox. -->
        <Button Content="Draw Sketch" Height="40" HorizontalAlignment="Left" Margin="390,67,0,0" 
          Name="Button1" VerticalAlignment="Top" Width="184" Click="Button1_Click"/>


        <!-- Add a TextBlock to hold the instructions on how to use the sample code. -->
        <TextBlock Height="62" HorizontalAlignment="Left" Name="TextBlock1" VerticalAlignment="Top" Width="772" 
                   TextWrapping="Wrap" Margin="10,0,0,0" />
    </Grid>

</Window>

SPECIAL NOTE: The XAML displayed above comes from a C# project. If you are a VB.NET developer, you will need to modify the text for the x:Class namespace from "Editor_Sketching.MainWindow" to be just "MainWindow".

namespace Editor_Sketching
{
    public partial class MainWindow : System.Windows.Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // Add instructions on how to use the sample. 
            TextBlock1.Text = "When the application loads choose an item from the ComboBox, then click the 'Draw Sketch' Button " + 
                "and begin to sketch a DrawShape on the Map using the Editor. When the sketch operation is complete, a graphic will " + 
                "be added to the GraphicsLayer using the symbology defined in XAML. Repeat this process for multiple sketch types.";

            // Add the various Esri.ArcGISRuntime.Controls.DrawShape shapes to the ComboBox.
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.Point);
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.Polyline);
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.Polygon);
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.Rectangle);
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.Freehand);
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.Arrow);
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.Triangle);
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.Ellipse);
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.Circle);
            ComboxBox1.Items.Add(Esri.ArcGISRuntime.Controls.DrawShape.LineSegment);
        }

        private async void Button1_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            // Obtain the Esri.ArcGISRuntime.Controls.DrawShape that the user selected from the ComboBox.
            Esri.ArcGISRuntime.Controls.DrawShape theDrawShape = (Esri.ArcGISRuntime.Controls.DrawShape)ComboxBox1.SelectedItem;

            // Get the string version of the Esri.ArcGISRuntime.Controls.DrawShape enumeration.
            string theDrawShapeString = theDrawShape.ToString();

            // Obtain the GraphicsLayer by its ID from the LayerCollection of the Map.
            Esri.ArcGISRuntime.Layers.GraphicsLayer myGraphicsLayer = (Esri.ArcGISRuntime.Layers.GraphicsLayer)MapView1.Map.Layers["MyGraphicsLayer"];

            //myGraphicsLayer.Graphics.Clear() ' Uncomment this line if you want to clear out the graphics in the GraphicsLayer between sketch operations.

            // Create a new empty graphic to hold the geometry from the RequestShapeAsync Method.
            Esri.ArcGISRuntime.Layers.Graphic myGraphic = null;

            // For each of the Esri.ArcGISRuntime.Controls.DrawShape option's chosen by the user, do the following:
            // (1) Get the Geometry from the Editor.RequestShapeAsync that the user draws in the Map.
            // (2) Get the correct Symbol from what was defined in XAML that corresponds to the DrawShape enumeration.
            // (3) Create a graphic using the Geometry and Symbol defined in (1) and (2).
            if (theDrawShapeString == "Point")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Point);
                Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol myPointSymbol = (Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol)LayoutRoot.Resources["MyPointSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myPointSymbol);
            }
            else if (theDrawShapeString == "Polyline")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Polyline);
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myPolylineSymbol = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyPolylineSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myPolylineSymbol);
            }
            else if (theDrawShapeString == "Polygon")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Polygon);
                Esri.ArcGISRuntime.Symbology.SimpleFillSymbol myPolygonSymbol = (Esri.ArcGISRuntime.Symbology.SimpleFillSymbol)LayoutRoot.Resources["MyPolygonSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myPolygonSymbol);
            }
            else if (theDrawShapeString == "Rectangle")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Rectangle);
                Esri.ArcGISRuntime.Symbology.SimpleFillSymbol myRectangleSymbol = (Esri.ArcGISRuntime.Symbology.SimpleFillSymbol)LayoutRoot.Resources["MyRectangleSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myRectangleSymbol);
            }
            else if (theDrawShapeString == "Freehand")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Freehand);
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myFreehandSymbol = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyFreehandSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myFreehandSymbol);
            }
            else if (theDrawShapeString == "Arrow")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Arrow);
                Esri.ArcGISRuntime.Symbology.SimpleFillSymbol myArrowSymbol = (Esri.ArcGISRuntime.Symbology.SimpleFillSymbol)LayoutRoot.Resources["MyArrowSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myArrowSymbol);
            }
            else if (theDrawShapeString == "Triangle")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Triangle);
                Esri.ArcGISRuntime.Symbology.SimpleFillSymbol myTriangleSymbol = (Esri.ArcGISRuntime.Symbology.SimpleFillSymbol)LayoutRoot.Resources["MyTriangleSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myTriangleSymbol);
            }
            else if (theDrawShapeString == "Ellipse")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Ellipse);
                Esri.ArcGISRuntime.Symbology.SimpleFillSymbol myEllipseSymbol = (Esri.ArcGISRuntime.Symbology.SimpleFillSymbol)LayoutRoot.Resources["MyEllipseSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myEllipseSymbol);
            }
            else if (theDrawShapeString == "Circle")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Circle);
                Esri.ArcGISRuntime.Symbology.SimpleFillSymbol myCircleSymbol = (Esri.ArcGISRuntime.Symbology.SimpleFillSymbol)LayoutRoot.Resources["MyCircleSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myCircleSymbol);
            }
            else if (theDrawShapeString == "LineSegment")
            {
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.LineSegment);
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myLineSegmentSymbol = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyLineSegmentSymbol"];
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myLineSegmentSymbol);
            }

            // Add the Graphic to the GraphicsLayer. This will automatically cause a refresh of the Map, displaying the graphic visually.
            myGraphicsLayer.Graphics.Add(myGraphic);
        }
    }
}