Click or drag to resize
Code Example - EditorConfiguration

Demonstrates sketching Polyline shapes on the map via the Editor.RequestShapeAsync method. The sketches are then added as Graphics in a GraphicsLayer and drawn on the map. Multiple versions of customizing the symbology of the Editor are shown.

Code Example
Editor Configuration

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="EditorConfiguration.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_Red_Circle" Color="Red" Size="10" Style="Circle">
                <esri:SimpleMarkerSymbol.Outline>
                    <esri:SimpleLineSymbol Color="Red" Style="Solid" Width="1" />
                </esri:SimpleMarkerSymbol.Outline>
            </esri:SimpleMarkerSymbol>

            <esri:SimpleMarkerSymbol x:Key="MyPointSymbol_Yellow_Circle" Color="Yellow" Size="10" Style="Circle">
                <esri:SimpleMarkerSymbol.Outline>
                    <esri:SimpleLineSymbol Color="Yellow" Style="Solid" Width="1" />
                </esri:SimpleMarkerSymbol.Outline>
            </esri:SimpleMarkerSymbol>

            <esri:SimpleMarkerSymbol x:Key="MyPointSymbol_Blue_Circle" Color="Blue" Size="10" Style="Circle">
                <esri:SimpleMarkerSymbol.Outline>
                    <esri:SimpleLineSymbol Color="Blue" Style="Solid" Width="1" />
                </esri:SimpleMarkerSymbol.Outline>
            </esri:SimpleMarkerSymbol>

            <esri:SimpleLineSymbol x:Key="MyPolylineSymbol_Black" Color="Black" Style="Solid" Width="2" />
            <esri:SimpleLineSymbol x:Key="MyPolylineSymbol_Yellow" Color="Yellow" Style="Solid" Width="2" />
            <esri:SimpleLineSymbol x:Key="MyPolylineSymbol_Green" Color="Green" Style="Solid" Width="2" />
            <esri:SimpleLineSymbol x:Key="MyPolylineSymbol_White" Color="White" Style="Solid" Width="2" />

        </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 RadioButtons to choose various styles of the Editor when sketching Polygon graphics on the map. -->
        <RadioButton Content="Version1" Height="16" HorizontalAlignment="Left" Margin="12,60,0,0" 
               Name="RadioButton_Version1" VerticalAlignment="Top" IsChecked="True"/>
        <RadioButton Content="Version2" Height="16" HorizontalAlignment="Left" Margin="160,60,0,0" 
               Name="RadioButton_Version2" VerticalAlignment="Top" />
        <RadioButton Content="Version3" Height="16" HorizontalAlignment="Left" Margin="330,60,0,0" 
               Name="RadioButton_Version3" VerticalAlignment="Top" />
        <RadioButton Content="Version4" Height="16" HorizontalAlignment="Left" Margin="489,60,0,0" 
               Name="RadioButton_Version4" VerticalAlignment="Top" />

        <!-- Add a Button to begin the sketching operation on the Map. -->
        <Button Content="Create a Polyline using the Editor" Height="24" HorizontalAlignment="Left" Margin="0,81,0,0" Name="Button1" 
                VerticalAlignment="Top" Width="782" Click="Button1_Click"/>

        <!-- Add a TextBlock to hold the instructions on how to use the sample code. -->
        <TextBlock Height="55" 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 "EditorConfiguration.MainWindow" to be just "MainWindow".

namespace EditorConfiguration
{
    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 one of the RadioButtons, then click the 'Create a Polyline using the Editor' Button " +
                "and begin to sketch a Polygon 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 the other RadioButtons to see how " +
                "the symbology used by the Editor looks different.";
        }

        private async void Button1_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            // 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;

            // Branch the logic to accommodate for which RadioButton user choice to draw a PolyLine on the Map.
            if (RadioButton_Version1.IsChecked == true)
            {
                // Version #1:
                // Use the default Editor to sketch a PolyLine on the Map and then when the edit sketch is done, add a new Graphic to the 
                // GraphicsLayer with a solid black line as the symbol.
                // The default Editor uses the following for its symbology:
                // PolylineSymbol = red line, solid, width of 2.
                // SelectedVertexSymbol = red circle, solid, size 12 | outline -> black, solid line, width of 1.
                // VertexSymbol = blue square, solid, size 10 | outline -> white, solid line, width of 1.
                // MidVertexSymbol = while circle, solid, size 10 | outline -> black, solid line, width of 1.

                // Get the Polyline from the Editor.RequestShapeAsync() method.
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Polyline);

                // Get the 'MyPolylineSymbol_Black' symbol that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myPolylineSymbol_Black = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyPolylineSymbol_Black"];

                // Create a new graphic based upon the polyline geometry and 'MyPolylineSymbol_Black' symbol.
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myPolylineSymbol_Black);
            }
            else if (RadioButton_Version2.IsChecked == true)
            {
                // Version #2:
                // Use a modified version of the default Editor to sketch a PolyLine on the Map and then when the edit sketch is done, add a new Graphic to the 
                // GraphicsLayer with a solid black line as the symbol.
                // The modified version of default Editor uses the following for its symbology:
                // PolylineSymbol = yellow line, solid, width of 2. **
                // SelectedVertexSymbol = red circle, solid, size 12 | outline -> black, solid line, width of 1.
                // VertexSymbol = blue square, solid, size 10 | outline -> white, solid line, width of 1.
                // MidVertexSymbol = while circle, solid, size 10 | outline -> black, solid line, width of 1.
                // NOTE: ** By specifying a the 'myPolylineSymbol_Yellow' symbol as an option parameter of the Editor.RequestShapeAsync() method, we are are able to
                // override the default PolyLineSymbol symbology of the Editor. It is not possible to modify the various MarkerSymbols (SelectedVertexSymbol, 
                // VertexSymbol, and MidVertexSymbol) using optional parameter of the Editor.RequestShapeAsync method; see the code in Version #3 or Version #4 
                // below to modify these symbols of the Editor.

                // Get the 'MyPolylineSymbol_Yellow' symbol that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myPolylineSymbol_Yellow = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyPolylineSymbol_Yellow"];

                // Get the Polyline from the Editor.RequestShapeAsync() method. Pass in the optional symbol 'myPolylineSymbol_Yellow' so that the Editor
                // will be overridden when displaying the PolylineSymbol.
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Polyline, myPolylineSymbol_Yellow);

                // Get the 'MyPolylineSymbol_Black' symbol that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myPolylineSymbol_Black = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyPolylineSymbol_Black"];

                // Create a new graphic based upon the polyline geometry and 'MyPolylineSymbol_Black' symbol.
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myPolylineSymbol_Black);
            }
            else if (RadioButton_Version3.IsChecked == true)
            {
                // Version #3:
                // Override the complete symbology of the default Editor to sketch a PolyLine on the Map and then when the edit sketch is done, add a new Graphic to the 
                // GraphicsLayer with a solid black line as the symbol.
                // The modified version of the Editor uses the following for its symbology:
                // PolylineSymbol = green line, solid, width of 2. **
                // SelectedVertexSymbol = blue circle, solid, size 10 | outline -> blue, solid line, width of 1.  **
                // VertexSymbol = yellow circle, solid, size 10 | outline -> yellow, solid line, width of 1.  **
                // MidVertexSymbol = red circle, solid, size 10 | outline -> red, solid line, width of 1. **
                // NOTE: ** By specifying a the 'myPolylineSymbol_Green' symbol as an option parameter of the Editor.RequestShapeAsync() method, we are are able to
                // override the default PolyLineSymbol symbology of the Editor. It is also possible to modify the various MarkerSymbols (SelectedVertexSymbol, 
                // VertexSymbol, and MidVertexSymbol) by creating an EditorConfiguration and setting its properties, and then applying it to the Editor.Configuration.

                // Create a new EditorConfiguration which allows for the changing of the various MarkerSymbols (SelectedVertexSymbol, VertexSymbol, and MidVertexSymbol).
                Esri.ArcGISRuntime.Controls.EditorConfiguration myEditorConfiguration = new Esri.ArcGISRuntime.Controls.EditorConfiguration();

                // Set the EditorConfiguration.MidVertexSymbol to the SimpleMarkerSymbol 'MyPointSymbol_Red_Circle' that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol myMidVertexSymbol = (Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol)LayoutRoot.Resources["MyPointSymbol_Red_Circle"];
                myEditorConfiguration.MidVertexSymbol = myMidVertexSymbol;

                // Set the EditorConfiguration.VertexSymbol to the SimpleMarkerSymbol 'MyPointSymbol_Yellow_Circle' that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol myVertexSymbol = (Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol)LayoutRoot.Resources["MyPointSymbol_Yellow_Circle"];
                myEditorConfiguration.VertexSymbol = myVertexSymbol;

                // Set the EditorConfiguration.SelectedVertexSymbol to the SimpleMarkerSymbol 'MyPointSymbol_Blue_Circle' that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol mySelectedVertexSymbol = (Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol)LayoutRoot.Resources["MyPointSymbol_Blue_Circle"];
                myEditorConfiguration.SelectedVertexSymbol = mySelectedVertexSymbol;

                // Set the Editor.EditorConfiguration to the custom myEditorConfiguration.
                MapView1.Editor.EditorConfiguration = myEditorConfiguration;

                // Get the 'MyPolylineSymbol_Green' symbol that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myPolylineSymbol_Green = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyPolylineSymbol_Green"];

                // Get the Polyline from the Editor.RequestShapeAsync() method. Pass in the optional symbol 'myPolylineSymbol_Green' so that the Editor
                // will be overridden when displaying the PolylineSymbol.
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Polyline, myPolylineSymbol_Green);

                // Get the 'MyPolylineSymbol_Black' symbol that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myPolylineSymbol_Black = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyPolylineSymbol_Black"];

                // Create a new graphic based upon the polyline geometry and 'MyPolylineSymbol_Black' symbol.
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myPolylineSymbol_Black);
            }
            else if (RadioButton_Version4.IsChecked == true)
            {
                // Version #4:
                // Override the complete symbology of the default Editor to sketch a PolyLine on the Map and then when the edit sketch is done, add a new Graphic to the 
                // GraphicsLayer with a solid black line as the symbol.
                // The modified version of the Editor uses the following for its symbology:
                // PolylineSymbol = white line, solid, width of 2. **
                // SelectedVertexSymbol = black diamond, solid, size 14.5 | outline (default) -> black, solid line, width of 1.  **
                // VertexSymbol [CompositeSymbol] = [SimpleMarkerSymbol] yellow circle, solid, size 14.5 | outline -> black, solid line, width of 1.5  
                // and [TextSymbol] text is vertex order number, HorizontalTextAlignment.Center, VerticalTextAlignment.Middle. **
                // MidVertexSymbol = while circle, solid, size 10 | outline -> black, solid line, width of 1.
                // NOTE: ** By specifying a the 'myPolylineSymbol_White' symbol as an option parameter of the Editor.RequestShapeAsync() method, we are are able to
                // override the default PolyLineSymbol symbology of the Editor. It is also possible to modify the various MarkerSymbols (SelectedVertexSymbol, 
                // VertexSymbol, and MidVertexSymbol) by creating a new class 'VertexOrderEditor' and inheriting the functionality of the Editor base class; and then 
                // overriding the OnGenerateSymbol Method to return the custom MarkerSymbols. Of the various customization options to change the default symbology 
                // of the Editor, this is the only one that gives you the ability to use a CompositeSymbol as a return type for overriding the various MarkerSymbols.

                // Create a new VertexOrderEditor object; it is a custom object that inherits the Editor base class. 
                VertexOrderEditor myEditor = new VertexOrderEditor();

                // Set the MapView.Editor to the custom VertexOrderEditor
                MapView1.Editor = myEditor;

                // Get the 'MyPolylineSymbol_White' symbol that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myPolylineSymbol_White = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyPolylineSymbol_White"];

                // Get the Polyline from the Editor.RequestShapeAsync() method. Pass in the optional symbol 'myPolylineSymbol_White' so that the Editor
                // will be overridden when displaying the PolylineSymbol.
                Esri.ArcGISRuntime.Geometry.Geometry myGeometry = await MapView1.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Polyline, myPolylineSymbol_White);

                // Get the 'MyPolylineSymbol_Black' symbol that was defined in XAML.
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol myPolylineSymbol_Black = (Esri.ArcGISRuntime.Symbology.SimpleLineSymbol)LayoutRoot.Resources["MyPolylineSymbol_Black"];

                // Create a new graphic based upon the polyline geometry and 'MyPolylineSymbol_Black' symbol.
                myGraphic = new Esri.ArcGISRuntime.Layers.Graphic(myGeometry, myPolylineSymbol_Black);
            }

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

            // Reset the Editor back to it's default configuration after each use.
            MapView1.Editor = new Esri.ArcGISRuntime.Controls.Editor();
       }
    }

    // Custom class that inherits is functionality from the Editor base class.
    public class VertexOrderEditor : Esri.ArcGISRuntime.Controls.Editor
    {
        // Override the OnGenerateSymbol method so that custom MarkerSymbols can be used.
        protected override Esri.ArcGISRuntime.Symbology.Symbol OnGenerateSymbol(GenerateSymbolInfo generateSymbolInfo)
        {
            // The OnGenerateSymbol method returns a symbol each time a vertex is rendered when sketching with the Editor. Because a generic
            // symbol is returned we can create a CompositeSymbol for added visualization.

            // There are several Editor.GenerateSymbolType Enumeration possibilities. You can code a different return symbol for each enum type.

            if (generateSymbolInfo.GenerateSymbolType == GenerateSymbolType.Vertex)
            {
                // Returns a CompositeSymbol made up for a SimpleMarkerSymbol and a TextSymbol as the GenerateSymbolType.Vertex.

                // Define the outline (a SimpleLineSymbol) for the SimpleMarkerSymbol.
                Esri.ArcGISRuntime.Symbology.SimpleLineSymbol mySimpleMarkerSymbolOutline = new Esri.ArcGISRuntime.Symbology.SimpleLineSymbol();
                mySimpleMarkerSymbolOutline.Width = 1.5;
                mySimpleMarkerSymbolOutline.Color = System.Windows.Media.Colors.Black;

                // Define the SimpleMarkerSymbol.
                Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol mySimpleMarkerSymbol = new Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol();
                mySimpleMarkerSymbol.Color = System.Windows.Media.Colors.Yellow;
                mySimpleMarkerSymbol.Size = 14.5;
                mySimpleMarkerSymbol.Outline = mySimpleMarkerSymbolOutline;

                // Define a TextSymbol. The text displayed in the TextSymbol will be the vertex position of the Polyline being drawn by the 
                // user with the Editor.
                Esri.ArcGISRuntime.Symbology.TextSymbol myTextSymbol = new Esri.ArcGISRuntime.Symbology.TextSymbol();
                myTextSymbol.Text = System.Convert.ToString(generateSymbolInfo.VertexPosition.CoordinateIndex + 1);
                myTextSymbol.HorizontalTextAlignment = Esri.ArcGISRuntime.Symbology.HorizontalTextAlignment.Center;
                myTextSymbol.VerticalTextAlignment = Esri.ArcGISRuntime.Symbology.VerticalTextAlignment.Middle;

                // Create a new SymbolCollection object and add the MarkerSymbol and TextSymbol to it. 
                Esri.ArcGISRuntime.Symbology.SymbolCollection mySymbolCollection = new Esri.ArcGISRuntime.Symbology.SymbolCollection();
                mySymbolCollection.Add(mySimpleMarkerSymbol);
                mySymbolCollection.Add(myTextSymbol);

                // Create a CompositeMarkerSymbol and set the SymbolCollection to it.
                Esri.ArcGISRuntime.Symbology.CompositeSymbol myCompositeSymbol = new Esri.ArcGISRuntime.Symbology.CompositeSymbol();
                myCompositeSymbol.Symbols = mySymbolCollection;

                // Return the CompositeSymbol as the GenerateSymbol.Vertex.
                return myCompositeSymbol;
            }
            else if (generateSymbolInfo.GenerateSymbolType == GenerateSymbolType.SelectedVertex)
            {
                // Return a SimpleMarkerSymbol as the GenerateSymbolType.SelectedVertex.
                Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol mySimpleMarkerSymbol = new Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol();
                mySimpleMarkerSymbol.Color = System.Windows.Media.Colors.Black;
                mySimpleMarkerSymbol.Size = 14.5;
                mySimpleMarkerSymbol.Style = Esri.ArcGISRuntime.Symbology.SimpleMarkerStyle.Diamond;

                // Return the SimpleMarkerSymbol as the GenerateSymbol.SelectedVertex.
                return mySimpleMarkerSymbol;
            }
            else
            {
                // Return the default Editor symbols that correspond to the rest of the Editor.GenerateSymbol values (ie. Rotate, Scale, MidVertex, and Transform).
                return base.OnGenerateSymbol(generateSymbolInfo);
            }
        }
    }
}