Add Interactively Online

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.DrawGraphics"
    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>
            <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>
            <Style TargetType="Button">
                <Setter Property="Background" Value="#FF1F3B53"/>
                <Setter Property="Foreground" Value="#FF000000"/>
                <Setter Property="Padding" Value="3"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="BorderBrush">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFA3AEB9" Offset="0"/>
                            <GradientStop Color="#FF8399A9" Offset="0.375"/>
                            <GradientStop Color="#FF718597" Offset="0.375"/>
                            <GradientStop Color="#FF617584" Offset="1"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" 
                                                                 Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                                                <ColorAnimation Duration="0" To="#F2FFFFFF" 
                                                                Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#CCFFFFFF" 
                                                                Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#7FFFFFFF" 
                                                                Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="#D8FFFFFF" 
                                                                Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#C6FFFFFF" 
                                                                Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#8CFFFFFF" 
                                                                Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="Red" 
                                                                Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="MyStates">
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ColorAnimation 
                                                    Duration="0" 
                                                    To="Red" 
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                    Storyboard.TargetName="Background"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="UnSelected">
                                            <Storyboard>
                                                <ColorAnimation 
                                                    Duration="0" 
                                                    To="White" 
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                    Storyboard.TargetName="Background"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}" 
                                        Background="White" 
                                        CornerRadius="3">
                                    <Grid Background="{TemplateBinding Background}" 
                                          Margin="1">
                                        <Border x:Name="BackgroundAnimation" 
                                                Background="#FF448DCA" 
                                                Opacity="0"/>
                                        <Rectangle x:Name="BackgroundGradient">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                    <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                    <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                                    <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Grid>
                                </Border>
                                <ContentPresenter x:Name="contentPresenter" 
                                                  ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                  Content="{TemplateBinding Content}" 
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                  Margin="{TemplateBinding Padding}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <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" />
        </Grid.Resources>

        <esri:Map WrapAround="True" x:Name="MyMap" Extent="-15000000,2000000,-7000000,8000000" Loaded="MyMap_Loaded">
            <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer" 
                      Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
            <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,5,5,5" />
                </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 DrawGraphics : UserControl
    {

        private Draw MyDrawObject;
        private Symbol _activeSymbol = null;
        GraphicsLayer graphicsLayer;

        public DrawGraphics()
        {
            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 DrawGraphics
        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