ArcGIS Pro SDK for .NET: Map Interaction and MVVM

Wolfgang Kaiser

Map Interaction (MapTool) displays results in Advanced UI (MVVM)

Session Overview

• Map Tool – Base class for interactions with Map Views- Map Tool used for Selection / Identify

• Advanced User Controls- Use the MVVM (Model View ViewModel) Programming Pattern- MVVM Implementation in Pro: Dockpane Example

• MVVM key concepts- Databinding- ICommand Pattern- Multi threading considerations- Styling / themes

MapTool• Base class representing a tool to perform interactive operations with a MapView.

• Used to create custom tools for- Selection, Identify, Editing

• Provides virtual methods for Keyboard and Mouse Events• Provides properties to set default behavior of left-click to create a sketch.- Virtual SketchComplete and - SketchCancelled methods.

MapTool

• .class MyBasicSketchTool1 : MapTool{public SketchTool1(){IsSketchTool = true;SketchType = SketchGeometryType.Rectangle;//Sketch geometrySketchOutputMode = SketchOutputMode.Map; //Map or Screen.

}

protected override Task<bool> OnSketchCompleteAsync(Geometry geometry){return base.OnSketchCompleteAsync(geometry);

}}

Sketch Callbacks• Callbacks after sketching.

- No need to Rubber-band “feedback” via Mouse Move, etc. as with ArcObjects- Sketch geometry is parameter of the callback

class SketchTool1 : MapTool{

// On sketch completion select the intersecting features and zoomprotected override Task<bool> OnSketchCompleteAsync(Geometry geometry) {return QueuedTask.Run(() => {//select features that intersect the sketch geometry var selection = MapView.Active.SelectFeatures(geometry);//zoom to selection (kvp.Key are the feature layers with selections) return MapView.Active.ZoomToAsync(selection.Select(kvp => kvp.Key),

true, TimeSpan.FromSeconds(1.5), true);});

}

Demo: Create a MapTool using MapTool Item Template

Use Item Template

Advanced User Controls in Add-ins• Advanced Framework elements such as:

- Dockpane- Pane- Custom Control- Embeddable Control- Property Page

• Use the Model-View-ViewModel (MVVM) Pattern

MVVM Implementation in Add-ins• MVVM implementation in Add-ins follows the

same Pattern used in WPF / .Net- Model: Classes that represent the data consumed by the app (optional for Pro SDK)- View: User interface (UI) implemented as a WPF UserControl using XAML, declared

in config.daml.- ViewModel: Classes that wrap data (coming from a model) and provide business

logic for the UI (views), declared in config.daml.

• Implement your Add-in UI just as you implement a UserControl in WPF/.Net- You can use many available online WPF MVVM snippets

• Differences in MVVM for Add-ins versus WPF applications:- Multi-threading considerations- ArcGIS Pro Styling

Demo: New DockpaneCreate a new dockpane and show MVVM components

MVVM Key Concepts

• The MVVM pattern separates the User Interface definition and layout (XAML) and design from the business logic (code)

• ‘Data Binding’: UI elements in a view are bound to the properties which are exposed by the ViewModel (business logic / code)

• Examples:View – UI - XAML ViewModel – Code behind – c#

<Button Command="{Binding RetrieveMapsCommand}"/> public ICommand RetrieveMapsCommand => _retrieveMapsCommand;

<TextBlock Text="{Binding Heading}“ /> public string Heading { get {…} set {…} }

<ComboBox ItemsSource="{Binding AllMaps}"SelectedItem="{Binding SelectedMap,Mode=TwoWay}“/>

public ReadOnlyObservableCollection<Map> AllMaps => _Maps;public Map SelectedMap { get {…} set {…} }

ICommand Pattern in MVVM• ICommand is a .Net interface and requires implementation of 2 methods: Execute and

CanExecute – used by the ICommand Pattern:• Adding a button to the Dockpane to run the ‘Close ArcGIS Pro’ Command

- Use ‘Data Binding’ in UI declaration to bind to an ICommand property in the view model

- Define the referenced ICommand property in your viewmodel

• Adding a button to the Dockpane with our ‘custom’ behavior using RelayCommand

Using Existing ArcGIS Pro Commands in Code• Use the ArcGIS Pro Framework’s “GetPlugInWrapper” method with any ArcGIS Pro

element’s Id to get the IPlugInWrapper interface• All buttons implement the ICommand interface - with Execute() and CanExecute()• Programming pattern to use any ArcGIS Pro button functionality in your code:

// ArcGIS Pro's Create button control DAML ID.var commandId = DAML.Button.esri_mapping_createBookmark;// get the ICommand interface from the ArcGIS Pro Button// using command's plug-in wrapper// (note ArcGIS.Desktop.Core.ProApp can also be used)var iCommand = FrameworkApplication.GetPlugInWrapper(commandId) as ICommand;if (iCommand != null){

// Let ArcGIS Pro do the work for usif (iCommand.CanExecute(null))

iCommand.Execute(null);}

How to find Exiting ArcGIS Pro Element Ids

• SDK Help: ArcGIS Pro DAML ID Referencehttps://github.com/Esri/arcgis-pro-sdk/wiki/ArcGIS-Pro-DAML-ID-Reference

• Pro Generate DAML Ids tool in Visual Studio- Allows Intellisense to find Ids:

i.e. DAML.Button.esri_mapping_addDataButton

• ArcGIS Pro ‘Customizethe Ribbon’

Demo: Using Existing

Pro CommandsInteraction With Maps

Multi-threading considerations

• Many data elements in Pro are NOT collected on the UI thread- When collecting data from within QueuedTask.Run (worker thread) special

precaution must be taken if this data is used by UI.

• Updating UI collections from a QueuedTask worker thread- Locking is required when sharing objects across threads

• Recommended pattern for updating collections from a worker thread- Found in .Net BindingOperations helper class:

BindingOperations.EnableCollectionSynchronization

Demo: Update UI from

worker threadInteraction With Maps

Add-in Styling

• Dark Theme and High Contrast• In order for your Add-ins to “blend” when the theme is toggled they must be styled

correctly- Note: It is not required that your Add-ins “blend” with Pro though it is desirable in most

cases

• Style Guide: https://github.com/Esri/arcgis-pro-sdk/wiki/proguide-style-guide

Demo: Dockpanewith Esri StylesInteracting With Maps

ArcGIS Pro SDK for .NET Tech Sessions

Date Time Technical Session Location

Tue, 23. Oct13:00 – 13:45 Beginning Pro Customization and Extensibility B 07 - B 08

15:00 – 15:45 Map Interaction and MVVM B 05

Wed, 24. Oct

09:00 – 09:45 Beginning Editing B 05

10:00 – 10:45 Advanced Editing B 05

13:00 – 13:45 Layer Customization and Layout Customization B 07 - B 08

14:00 – 14:45 Advanced Pro Customization and Extensibility A 03 - A 04

Thu, Mar 0810:00 – 10:45 Beginning Pro Customization and Extensibility A 03 - A 04

15:00 – 16:00 Road Ahead C 01

Thank You to Our Sponsors