Add Interactively

This sample demonstrates adding graphics through user interaction. The sample uses the Toolkit's Toolbar control and the Draw object to provide graphic drawing tools. In the sample's code-behind, an event handler for the Toolbar's ItemClicked event is used to parse which tool was clicked and initialize the Draw object accordingly.

XAML

<UserControl x:Class="ArcGISWPFSDK.LocalDrawGraphics"
    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/client/2009">
    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.Resources>
            <esri:SimpleLineSymbol x:Key="DrawLineSymbol" Color="Green" Width="4" />
            <esri:SimpleFillSymbol  x:Key="DrawFillSymbol" Fill="#3300FF00" BorderBrush="Green" BorderThickness="2" />
            <esri:SimpleMarkerSymbol  x:Key="DefaultMarkerSymbol" Color="Red" Size="12" Style="Circle" />
            <esri:SimpleLineSymbol  x:Key="DefaultLineSymbol" Color="Red" Width="4" />
            <esri:SimpleFillSymbol  x:Key="DefaultFillSymbol" Fill="#33FF0000" BorderBrush="Red" BorderThickness="2" />
            <esri:Editor x:Key="MyEditor" LayerIDs="MyGraphicsLayer" />
            <LinearGradientBrush x:Key="PanelGradient" EndPoint="0.5,1" StartPoint="0.5,0">
                <LinearGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                        <SkewTransform CenterY="0.5" CenterX="0.5"/>
                        <RotateTransform Angle="176" CenterY="0.5" CenterX="0.5"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Color="#FF145787" Offset="0.16"/>
                <GradientStop Color="#FF3D7FAC" Offset="0.502"/>
                <GradientStop Color="#FF88C5EF" Offset="0.984"/>
            </LinearGradientBrush>
        </Grid.Resources>

        <esri:Map x:Name="MyMap" WrapAround="True" Loaded="MyMap_Loaded" Extent="-15000000,2000000,-7000000,8000000" Background="#FFE3E3E3" MinimumResolution="2445.98490512499">
            <esri:ArcGISLocalTiledLayer ID="myBaseMap" Path="..\\Data\\TPKs\\Topographic.tpk"/>
            <esri:GraphicsLayer ID="MyGraphicsLayer" MouseLeftButtonUp="GraphicsLayer_MouseLeftButtonUp" />
        </esri:Map>

        <Border Background="{StaticResource PanelGradient}" BorderThickness="1" CornerRadius="5"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="10" BorderBrush="{StaticResource PanelGradient}">
            <Border.Effect>
                <DropShadowEffect/>
            </Border.Effect>
            <Grid Margin="10" Background="White">
                <StackPanel Orientation="Vertical">
                    <StackPanel x:Name="MyStackPanel" Orientation="Horizontal" Width="600" Height="60">
                        <Button Tag="DrawPoint" Margin="5" Click="Tool_Click" 
                                ToolTipService.ToolTip="Add a point">
                            <Image Source="/Assets/images/DrawPoint.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawPolyline" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Add a polyline">
                            <Image Source="/Assets/images/DrawPolyline.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawPolygon" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Add a polygon">
                            <Image Source="/Assets/images/DrawPolygon.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawRectangle" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Add a rectangle">
                            <Image Source="/Assets/images/DrawRectangle.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawFreehand" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Add a freehand line">
                            <Image Source="/Assets/images/DrawFreehand.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawArrow" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Add an arrow">
                            <Image Source="/Assets/images/DrawArrow.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawTriangle" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Add a triangle">
                            <Image Source="/Assets/images/DrawTriangle.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawCircle" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Add a circle">
                            <Image Source="/Assets/images/DrawCircle.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawEllipse" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Add an ellipse">
                            <Image Source="/Assets/images/DrawEllipse.png" Margin="2" />
                        </Button>
                        <Button Tag="ClearStopDraw" Margin="5" Click="Tool_Click"
                                Style="{x:Null}"
                                ToolTipService.ToolTip="Clear graphics">
                            <Image Source="/Assets/images/StopDraw.png" Margin="2" />
                        </Button>
                    </StackPanel>
                    <TextBlock x:Name="StatusTextBlock" Text="" FontWeight="Bold" HorizontalAlignment="Center"/>
                    <CheckBox x:Name="EnableEditVerticesScaleRotate" Content="Click on geometry to edit" 
                          IsChecked="False" Foreground="Black" FontWeight="Bold" Margin="10" />
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</UserControl>

C#

using System.Windows.Controls;
using ESRI.ArcGIS.Client;
using ESRI.ArcGIS.Client.Symbols;
using System.Windows;

namespace ArcGISWPFSDK
{
    public partial class LocalDrawGraphics : UserControl
    {
        private Draw MyDrawObject;
        private Symbol _activeSymbol = null;
        GraphicsLayer graphicsLayer;

        public LocalDrawGraphics()
        {
            InitializeComponent();


            graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer;
            MyDrawObject = new Draw(MyMap)
            {
                LineSymbol = LayoutRoot.Resources["DrawLineSymbol"] as LineSymbol,
                FillSymbol = LayoutRoot.Resources["DrawFillSymbol"] as FillSymbol
            };

            MyDrawObject.DrawComplete += MyDrawObject_DrawComplete;
        }

        private void MyDrawObject_DrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args)
        {
            GraphicsLayer graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer;
            ESRI.ArcGIS.Client.Graphic graphic = new ESRI.ArcGIS.Client.Graphic()
            {
                Geometry = args.Geometry,
                Symbol = _activeSymbol,
            };
            graphicsLayer.Graphics.Add(graphic);
        }

        private void UnSelectTools()
        {
            foreach (UIElement element in MyStackPanel.Children)
                if (element is Button)
                    VisualStateManager.GoToState((element as Button), "UnSelected", false);
        }

        private void Tool_Click(object sender, RoutedEventArgs e)
        {
            UnSelectTools();

            VisualStateManager.GoToState(sender as Button, "Selected", false);

            switch ((sender as Button).Tag as string)
            {
                case "DrawPoint":
                    MyDrawObject.DrawMode = DrawMode.Point;
                    _activeSymbol = LayoutRoot.Resources["DefaultMarkerSymbol"] as Symbol;
                    break;
                case "DrawPolyline":
                    MyDrawObject.DrawMode = DrawMode.Polyline;
                    _activeSymbol = LayoutRoot.Resources["DefaultLineSymbol"] as Symbol;
                    break;
                case "DrawPolygon":
                    MyDrawObject.DrawMode = DrawMode.Polygon;
                    _activeSymbol = LayoutRoot.Resources["DefaultFillSymbol"] as Symbol;
                    break;
                case "DrawRectangle":
                    MyDrawObject.DrawMode = DrawMode.Rectangle;
                    _activeSymbol = LayoutRoot.Resources["DefaultFillSymbol"] as Symbol;
                    break;
                case "DrawFreehand":
                    MyDrawObject.DrawMode = DrawMode.Freehand;
                    _activeSymbol = LayoutRoot.Resources["DefaultLineSymbol"] as Symbol;
                    break;
                case "DrawArrow":
                    MyDrawObject.DrawMode = DrawMode.Arrow;
                    _activeSymbol = LayoutRoot.Resources["DefaultFillSymbol"] as Symbol;
                    break;
                case "DrawTriangle":
                    MyDrawObject.DrawMode = DrawMode.Triangle;
                    _activeSymbol = LayoutRoot.Resources["DefaultFillSymbol"] as Symbol;
                    break;
                case "DrawCircle":
                    MyDrawObject.DrawMode = DrawMode.Circle;
                    _activeSymbol = LayoutRoot.Resources["DefaultFillSymbol"] as Symbol;
                    break;
                case "DrawEllipse":
                    MyDrawObject.DrawMode = DrawMode.Ellipse;
                    _activeSymbol = LayoutRoot.Resources["DefaultFillSymbol"] as Symbol;
                    break;
                default:
                    MyDrawObject.DrawMode = DrawMode.None;
                    graphicsLayer.ClearGraphics();
                    break;
            }
            MyDrawObject.IsEnabled = (MyDrawObject.DrawMode != DrawMode.None);
        }

        private void MyMap_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            Editor ed = LayoutRoot.Resources["MyEditor"] as Editor;
            ed.Map = MyMap;
        }
        private void GraphicsLayer_MouseLeftButtonUp(object sender, GraphicMouseButtonEventArgs e)
        {
            if (EnableEditVerticesScaleRotate.IsChecked.Value)
            {
                Editor editor = LayoutRoot.Resources["MyEditor"] as Editor;
                if (e.Graphic != null && !(e.Graphic.Geometry is ESRI.ArcGIS.Client.Geometry.MapPoint))
                {
                    editor.EditVertices.Execute(e.Graphic);
                }
            }
        }
    }
}

VB.NET

Imports System.Windows.Controls
Imports ESRI.ArcGIS.Client
Imports ESRI.ArcGIS.Client.Symbols
Imports System.Windows

Namespace ArcGISWPFSDK
    Partial Public Class LocalDrawGraphics
        Inherits UserControl
        Private MyDrawObject As Draw
        Private _activeSymbol As Symbol = Nothing
        Private graphicsLayer As GraphicsLayer

        Public Sub New()
            InitializeComponent()


            graphicsLayer = TryCast(MyMap.Layers("MyGraphicsLayer"), GraphicsLayer)
            MyDrawObject = New Draw(MyMap) With { _
             .LineSymbol = TryCast(LayoutRoot.Resources("DrawLineSymbol"), LineSymbol), _
             .FillSymbol = TryCast(LayoutRoot.Resources("DrawFillSymbol"), FillSymbol) _
            }

            AddHandler MyDrawObject.DrawComplete, AddressOf MyDrawObject_DrawComplete
        End Sub

        Private Sub MyDrawObject_DrawComplete(sender As Object, args As ESRI.ArcGIS.Client.DrawEventArgs)
            Dim graphicsLayer As GraphicsLayer = TryCast(MyMap.Layers("MyGraphicsLayer"), GraphicsLayer)
            Dim graphic As New ESRI.ArcGIS.Client.Graphic() With { _
             .Geometry = args.Geometry, _
             .Symbol = _activeSymbol _
            }
            graphicsLayer.Graphics.Add(graphic)
        End Sub

        Private Sub UnSelectTools()
            For Each element As UIElement In MyStackPanel.Children
                If TypeOf element Is Button Then
                    VisualStateManager.GoToState(TryCast(element, Button), "UnSelected", False)
                End If
            Next
        End Sub

        Private Sub Tool_Click(sender As Object, e As RoutedEventArgs)
            UnSelectTools()

            VisualStateManager.GoToState(TryCast(sender, Button), "Selected", False)

            Select Case TryCast(TryCast(sender, Button).Tag, String)
                Case "DrawPoint"
                    MyDrawObject.DrawMode = DrawMode.Point
                    _activeSymbol = TryCast(LayoutRoot.Resources("DefaultMarkerSymbol"), Symbol)
                    Exit Select
                Case "DrawPolyline"
                    MyDrawObject.DrawMode = DrawMode.Polyline
                    _activeSymbol = TryCast(LayoutRoot.Resources("DefaultLineSymbol"), Symbol)
                    Exit Select
                Case "DrawPolygon"
                    MyDrawObject.DrawMode = DrawMode.Polygon
                    _activeSymbol = TryCast(LayoutRoot.Resources("DefaultFillSymbol"), Symbol)
                    Exit Select
                Case "DrawRectangle"
                    MyDrawObject.DrawMode = DrawMode.Rectangle
                    _activeSymbol = TryCast(LayoutRoot.Resources("DefaultFillSymbol"), Symbol)
                    Exit Select
                Case "DrawFreehand"
                    MyDrawObject.DrawMode = DrawMode.Freehand
                    _activeSymbol = TryCast(LayoutRoot.Resources("DefaultLineSymbol"), Symbol)
                    Exit Select
                Case "DrawArrow"
                    MyDrawObject.DrawMode = DrawMode.Arrow
                    _activeSymbol = TryCast(LayoutRoot.Resources("DefaultFillSymbol"), Symbol)
                    Exit Select
                Case "DrawTriangle"
                    MyDrawObject.DrawMode = DrawMode.Triangle
                    _activeSymbol = TryCast(LayoutRoot.Resources("DefaultFillSymbol"), Symbol)
                    Exit Select
                Case "DrawCircle"
                    MyDrawObject.DrawMode = DrawMode.Circle
                    _activeSymbol = TryCast(LayoutRoot.Resources("DefaultFillSymbol"), Symbol)
                    Exit Select
                Case "DrawEllipse"
                    MyDrawObject.DrawMode = DrawMode.Ellipse
                    _activeSymbol = TryCast(LayoutRoot.Resources("DefaultFillSymbol"), Symbol)
                    Exit Select
                Case Else
                    MyDrawObject.DrawMode = DrawMode.None
                    graphicsLayer.ClearGraphics()
                    Exit Select
            End Select
            MyDrawObject.IsEnabled = (MyDrawObject.DrawMode <> DrawMode.None)
        End Sub

        Private Sub MyMap_Loaded(sender As Object, e As System.Windows.RoutedEventArgs)
            Dim ed As Editor = TryCast(LayoutRoot.Resources("MyEditor"), Editor)
            ed.Map = MyMap
        End Sub
        Private Sub GraphicsLayer_MouseLeftButtonUp(sender As Object, e As GraphicMouseButtonEventArgs)
            If EnableEditVerticesScaleRotate.IsChecked.Value Then
                Dim editor As Editor = TryCast(LayoutRoot.Resources("MyEditor"), Editor)
                If e.Graphic IsNot Nothing AndAlso Not (TypeOf e.Graphic.Geometry Is ESRI.ArcGIS.Client.Geometry.MapPoint) Then
                    editor.EditVertices.Execute(e.Graphic)
                End If
            End If
        End Sub
    End Class
End Namespace