Add Interactively MVVM

This sample demonstrates adding graphics through user interaction using the Model View ViewModel (MVVM) design pattern. The sample uses the Toolkit's Toolbar control and the Draw object to provide graphic drawing tools.

XAML

<UserControl x:Class="ArcGISWPFSDK.DrawGraphicsMVVM"
   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"             
        xmlns:local="clr-namespace:ArcGISWPFSDK"      
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <esri:SimpleLineSymbol x:Key="RedLineSymbol" Color="Red" Width="3" Style="Solid" />
            <local:MainViewModelDrawGraphics x:Key="MyMainViewModel" />
            <local:CommandGenerator x:Key="MyCommandGenerator" />
           
        </Grid.Resources>
        <Grid DataContext="{StaticResource MyMainViewModel}">
            <esri:Map x:Name="MyMap" WrapAround="True" UseAcceleratedDisplay="True" Extent="-15000000,2000000,-7000000,8000000" Background="#FFE3E3E3" MinimumResolution="2500">
                <esri:ArcGISLocalTiledLayer ID="Topographic USA" Path="..\Data\TPKs\Topographic.tpk"/>
                <esri:GraphicsLayer ID="MyGraphicsLayer" 
                          GraphicsSource="{Binding Graphics, Source={StaticResource MyMainViewModel}}">
                    <esri:GraphicsLayer.Renderer>
                        <esri:SimpleRenderer Symbol="{StaticResource RedLineSymbol}" />
                    </esri:GraphicsLayer.Renderer>
                </esri:GraphicsLayer>
            </esri:Map>
            <Border Background="White" BorderThickness="1" 
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="10" BorderBrush="White">
                <Border.Effect>
                    <DropShadowEffect/>
                </Border.Effect>
                <Grid Margin="10" Background="White">
                    <StackPanel Orientation="Vertical">
                        <StackPanel x:Name="MyStackPanel" Orientation="Horizontal" Width="600" Height="60">
                            <Button Margin="5"
              Command="{Binding ConverterParameter=DoFreehand, Converter={StaticResource MyCommandGenerator}}"           
                      ToolTipService.ToolTip="Add a freehand line">
                                <Image Source="/Assets/images/DrawFreehand.png" Margin="2" />
                            </Button>
                            <Button Margin="5"
              Command="{Binding ConverterParameter=DoLine, Converter={StaticResource MyCommandGenerator}}"
                   ToolTipService.ToolTip="Add a Line Segment">
                                <Image Source="/Assets/images/DrawLineSegment.png" Margin="2" />
                            </Button>
                            <Button Margin="5"
              Command="{Binding ConverterParameter=DoPolyline, Converter={StaticResource MyCommandGenerator}}"
                ToolTipService.ToolTip="Add a polyline">
                                <Image Source="/Assets/images/DrawPolyline.png" Margin="2" />
                            </Button>
                            <Button Margin="5"
              Command="{Binding ConverterParameter=DoPolygon, Converter={StaticResource MyCommandGenerator}}"           
                    ToolTipService.ToolTip="Add a polygon">
                                <Image Source="/Assets/images/DrawPolygon.png" Margin="2" />
                            </Button>
                            <Button Margin="5"
              Command="{Binding ConverterParameter=DoRectangle, Converter={StaticResource MyCommandGenerator}}"            
                            ToolTipService.ToolTip="Add a rectangle">
                                <Image Source="/Assets/images/DrawRectangle.png" Margin="2" />
                            </Button>
                            <Button  Margin="5"
              Command="{Binding ConverterParameter=DoCircle, Converter={StaticResource MyCommandGenerator}}"
               ToolTipService.ToolTip="Add a circle">
                                <Image Source="/Assets/images/DrawCircle.png" Margin="2" />
                            </Button>
                            <Button Margin="5"
              Command="{Binding ConverterParameter=DoEllipse, Converter={StaticResource MyCommandGenerator}}"
                   ToolTipService.ToolTip="Add an ellipse">
                                <Image Source="/Assets/images/DrawEllipse.png" Margin="2" />
                            </Button>
                            <Button Margin="5"
              Command="{Binding ConverterParameter=DoTriangle, Converter={StaticResource MyCommandGenerator}}"
          
              ToolTipService.ToolTip="Add a triangle">
                                <Image Source="/Assets/images/DrawTriangle.png" Margin="2" />
                            </Button>
                            <Button Margin="5"
              Command="{Binding ConverterParameter=DoArrow, Converter={StaticResource MyCommandGenerator}}"
         
              ToolTipService.ToolTip="Add an arrow">
                                <Image Source="/Assets/images/DrawArrow.png" Margin="2"/>
                            </Button>
                            <Button Margin="5"
              Command="{Binding ConverterParameter=ClearGraphics, Converter={StaticResource MyCommandGenerator}}"
        
                         ToolTipService.ToolTip="Clear graphics">
                                <Image Source="/Assets/images/StopDraw.png" Margin="2" />
                            </Button>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Border>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Loaded">
                    <i:InvokeCommandAction Command="{Binding ConverterParameter=SetMap, Converter={StaticResource MyCommandGenerator}}"
                                 CommandParameter="{Binding ElementName=MyMap}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Grid>
    </Grid>
</UserControl>

C#

using System;
using System.Linq;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Input;
using System.Windows.Media;
using ESRI.ArcGIS.Client;
using System.Collections.ObjectModel;
using System.Reflection;
using System.Windows.Markup;
using System.ComponentModel;
using ESRI.ArcGIS.Client.Symbols;

namespace ArcGISWPFSDK
{
    public partial class DrawGraphicsMVVM : UserControl
    {
        public DrawGraphicsMVVM()
        {
            InitializeComponent();
        }
    }

    class MainViewModelDrawGraphics
    {

        Draw _draw;

        public MainViewModelDrawGraphics()
        {
            Graphics = new ObservableCollection<Graphic>();

            SolidColorBrush mySolidColorBrush = new SolidColorBrush();
            mySolidColorBrush.Color = Color.FromArgb(255, 0, 0, 255);
            SimpleLineSymbol l = new SimpleLineSymbol();
            SimpleFillSymbol fs = new SimpleFillSymbol();
            l.Color = mySolidColorBrush;
            fs.Fill = mySolidColorBrush;
            _draw = new Draw
            {
                LineSymbol = l,
                FillSymbol = fs,
            };

            _draw.DrawComplete += _draw_DrawComplete;
        }

        public ObservableCollection<Graphic> Graphics { get; private set; }

        void _draw_DrawComplete(object sender, DrawEventArgs e)
        {
            Graphics.Add(new Graphic() { Geometry = e.Geometry });
            _draw.IsEnabled = false;
        }

        public void DoFreehand()
        {
            _draw.DrawMode = DrawMode.Freehand;
            _draw.IsEnabled = true;
        }

        public void DoLine()
        {
            _draw.DrawMode = DrawMode.LineSegment;
            _draw.IsEnabled = true;
        }

        public void DoPolyline()
        {
            _draw.DrawMode = DrawMode.Polyline;
            _draw.IsEnabled = true;
        }

        public void DoPolygon()
        {
            _draw.DrawMode = DrawMode.Polygon;
            _draw.IsEnabled = true;
        }

        public void DoRectangle()
        {
            _draw.DrawMode = DrawMode.Rectangle;
            _draw.IsEnabled = true;
        }

        public void DoCircle()
        {
            _draw.DrawMode = DrawMode.Circle;
            _draw.IsEnabled = true;
        }
        public void DoEllipse()
        {
            _draw.DrawMode = DrawMode.Ellipse;
            _draw.IsEnabled = true;
        }

        public void DoTriangle()
        {
            _draw.DrawMode = DrawMode.Triangle;
            _draw.IsEnabled = true;
        }

        public void DoArrow()
        {
            _draw.DrawMode = DrawMode.Arrow;
            _draw.IsEnabled = true;
        }

        public void ClearGraphics()
        {
            Graphics.Clear();
        }

        public void SetMap(ESRI.ArcGIS.Client.Map map)
        {
            _draw.Map = map;
        }
    }

    public class CommandGenerator : MarkupExtension, IValueConverter
    {
        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return this;
        }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null)
                return null;
            if (!(value is MainViewModelDrawGraphics))
                throw new ArgumentException("Value is not a ViewModel class.");

            string methodName = parameter.ToString();
            if (string.IsNullOrEmpty(methodName))
                return null;

            var viewType = value.GetType();
            var methods = viewType.GetMethods();
            var properties = viewType.GetProperties();

            foreach (var method in methods)
            {
                if (methodName != method.Name)
                    continue;

                var foundProperty = properties.FirstOrDefault(x => x.Name == "Can" + method.Name);

                return new ReflectiveCommand(value as MainViewModelDrawGraphics, method, foundProperty);
            }

            throw new InvalidOperationException("Target method not found '" + methodName + "'.");
        }

        public object ConvertBack(object value, Type typeName, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    public class ReflectiveCommand : ICommand
    {
        readonly PropertyInfo _canExecute;
        readonly MethodInfo _execute;
        readonly object _targetObject;

        public ReflectiveCommand(object targetObject, MethodInfo execute, PropertyInfo canExecute)
        {
            _targetObject = targetObject;
            _execute = execute;
            _canExecute = canExecute;

            var notifier = _targetObject as INotifyPropertyChanged;
            if (notifier != null && _canExecute != null)
            {
                notifier.PropertyChanged += (s, e) =>
                {
                    if (e.PropertyName == _canExecute.Name)
                        CanExecuteChanged(this, EventArgs.Empty);
                };
            }
        }

        public bool CanExecute(object parameter)
        {
            if (_canExecute != null)
                return (bool)_canExecute.GetValue(_targetObject, null);
            return true;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            if (parameter == null)
                _execute.Invoke(_targetObject, null);
            else
                _execute.Invoke(_targetObject, new object[] { parameter });
        }
    }
}

VB.NET

Imports System.Linq
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Input
Imports System.Windows.Media
Imports ESRI.ArcGIS.Client
Imports System.Collections.ObjectModel
Imports System.Reflection
Imports System.Windows.Markup
Imports System.ComponentModel
Imports ESRI.ArcGIS.Client.Symbols

Namespace ArcGISWPFSDK

    Partial Public Class DrawGraphicsMVVM
        Inherits UserControl
        Public Sub New()
            InitializeComponent()
        End Sub

    End Class

    Class MainViewModelDrawGraphics

        Private _draw As Draw

        Public Sub New()
            Graphics = New ObservableCollection(Of Graphic)()

            Dim mySolidColorBrush As New SolidColorBrush()
            mySolidColorBrush.Color = Color.FromArgb(255, 0, 0, 255)
            Dim l As New SimpleLineSymbol()
            Dim fs As New SimpleFillSymbol()
            l.Color = mySolidColorBrush
            fs.Fill = mySolidColorBrush
            _draw = New Draw() With { _
            .LineSymbol = l, _
             .FillSymbol = fs _
            }

            AddHandler _draw.DrawComplete, AddressOf _draw_DrawComplete
        End Sub

        Public Property Graphics() As ObservableCollection(Of Graphic)
            Get
                Return m_Graphics
            End Get
            Private Set(value As ObservableCollection(Of Graphic))
                m_Graphics = Value
            End Set
        End Property
        Private m_Graphics As ObservableCollection(Of Graphic)

        Private Sub _draw_DrawComplete(sender As Object, e As DrawEventArgs)
            Graphics.Add(New Graphic() With { _
             .Geometry = e.Geometry _
            })
            _draw.IsEnabled = False
        End Sub

        Public Sub DoFreehand()
            _draw.DrawMode = DrawMode.Freehand
            _draw.IsEnabled = True
        End Sub

        Public Sub DoLine()
            _draw.DrawMode = DrawMode.LineSegment
            _draw.IsEnabled = True
        End Sub

        Public Sub DoPolyline()
            _draw.DrawMode = DrawMode.Polyline
            _draw.IsEnabled = True
        End Sub

        Public Sub DoPolygon()
            _draw.DrawMode = DrawMode.Polygon
            _draw.IsEnabled = True
        End Sub

        Public Sub DoRectangle()
            _draw.DrawMode = DrawMode.Rectangle
            _draw.IsEnabled = True
        End Sub

        Public Sub DoCircle()
            _draw.DrawMode = DrawMode.Circle
            _draw.IsEnabled = True
        End Sub
        Public Sub DoEllipse()
            _draw.DrawMode = DrawMode.Ellipse
            _draw.IsEnabled = True
        End Sub

        Public Sub DoTriangle()
            _draw.DrawMode = DrawMode.Triangle
            _draw.IsEnabled = True
        End Sub

        Public Sub DoArrow()
            _draw.DrawMode = DrawMode.Arrow
            _draw.IsEnabled = True
        End Sub




        Public Sub ClearGraphics()
            Graphics.Clear()
        End Sub

        Public Sub SetMap(map As ESRI.ArcGIS.Client.Map)
            _draw.Map = map
        End Sub

    End Class

    Public Class CommandGenerator
        Inherits MarkupExtension
        Implements IValueConverter

        Public Function ConvertBack(value As Object, typeName As Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object
            Throw New NotImplementedException()
        End Function

        Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object
            If value Is Nothing Then
                Return Nothing
            End If
            If Not (TypeOf value Is MainViewModelDrawGraphics) Then
                Throw New ArgumentException("Value is not a ViewModel class.")
            End If

            Dim methodName As String = parameter.ToString()
            If String.IsNullOrEmpty(methodName) Then
                Return Nothing
            End If

            Dim viewType = value.[GetType]()
            Dim methods = viewType.GetMethods()
            Dim properties = viewType.GetProperties()

            For Each method As Object In methods
                If methodName <> method.Name Then
                    Continue For
                End If

                Dim foundProperty = properties.FirstOrDefault(Function(x) x.Name = "Can" & method.Name)

                Return New ReflectiveCommand(TryCast(value, MainViewModelDrawGraphics), method, foundProperty)
            Next

            Throw New InvalidOperationException("Target method not found '" & methodName & "'.")
        End Function


        Public Overrides Function ProvideValue(serviceProvider As IServiceProvider) As Object
            Return Me
        End Function

        Public Function Convert1(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.Convert
        End Function

        Public Function ConvertBack1(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
        End Function
    End Class

    Public Class ReflectiveCommand
        Implements ICommand

        ReadOnly _canExecute As PropertyInfo
        ReadOnly _execute As MethodInfo
        ReadOnly _targetObject As Object

        Public Sub New(targetObject As Object, execute As MethodInfo, canExecute As PropertyInfo)
            _targetObject = targetObject
            _execute = execute
            _canExecute = canExecute

            'Dim notifier = TryCast(_targetObject, INotifyPropertyChanged)
            'If notifier IsNot Nothing AndAlso _canExecute IsNot Nothing Then
            '    AddHandler notifier.PropertyChanged, Function(s, e)
            '                                             If e.PropertyName = _canExecute.Name Then
            '                                                 RaiseEvent CanExecuteChanged(Me, EventArgs.Empty)
            '                                             End If

            '                                         End Function
            'End If
        End Sub

        Public Function CanExecute(parameter As Object) As Boolean
            If _canExecute IsNot Nothing Then
                Return CBool(_canExecute.GetValue(_targetObject, Nothing))
            End If
            Return True
        End Function

        Public Event CanExecuteChanged As EventHandler

        Public Sub Execute(parameter As Object)
            If parameter Is Nothing Then
                _execute.Invoke(_targetObject, Nothing)
            Else
                _execute.Invoke(_targetObject, New Object() {parameter})
            End If

        End Sub

        Public Function CanExecute1(parameter As Object) As Boolean Implements ICommand.CanExecute

        End Function

        Public Event CanExecuteChanged1(sender As Object, e As EventArgs) Implements ICommand.CanExecuteChanged

        Public Sub Execute1(parameter As Object) Implements ICommand.Execute

        End Sub
    End Class

End Namespace