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