Patterns and Best Practices for Building gApplications with the ArcGIS API for Microsoft Silverlight/WPF

Art Haddad @ajhaddadRex Hansen @rex hansen@ _Morten Nielsen @sharpgis

AgendaAgendaAgendaAgenda

•• IntroductionsIntroductions•• OverviewOverview•• Deep DiveDeep Dive•• Deep DiveDeep Dive

–– BehaviorsBehaviors–– API ExtensibilityAPI Extensibility–– TemplatesTemplates–– Graphics Performance Graphics Performance

Tips/TricksTips/Tricks–– Custom SymbolsCustom Symbols–– Using WCFUsing WCF

ArcGIS API for Silverlight/WPF V2ArcGIS API for Silverlight/WPF V2

OVERVIEWOVERVIEWArcGIS API for Silverlight/WPF V2ArcGIS API for Silverlight/WPF V2

What is theWhat is the ArcGISArcGIS API for Microsoft Silverlight/WPF?API for Microsoft Silverlight/WPF?What is the What is the ArcGISArcGIS API for Microsoft Silverlight/WPF?API for Microsoft Silverlight/WPF?

•• Powerful Web and Desktop Mapping API Powerful Web and Desktop Mapping API •• Designed for the Silverlight and WPF PlatformsDesigned for the Silverlight and WPF Platforms•• UtilizeUtilize ArcGISArcGIS Server Bing Maps servicesServer Bing Maps services•• Utilize Utilize ArcGISArcGIS Server, Bing Maps servicesServer, Bing Maps services

•• Silverlight provides cross browser supportSilverlight provides cross browser support•• WPF supports native 64 bit (x64) platformsWPF supports native 64 bit (x64) platforms

I i h Mi f d l iI i h Mi f d l i•• Integrates with Microsoft development environmentsIntegrates with Microsoft development environments

BehaviorsBehaviors

DEEP DIVEDEEP DIVEBehaviorsBehaviors

BehaviorsBehaviorsBehaviorsBehaviors

•• What are they?What are they?–– Behaviors are selfBehaviors are self--contained, recontained, re--usable snippets of usable snippets of

interactivity that can be assigned interactively to art board interactivity that can be assigned interactively to art board contentcontent

•• What problems do they solve?What problems do they solve?•• What problems do they solve?What problems do they solve?–– Makes development simplerMakes development simpler–– Functionality is cleanly Functionality is cleanly encapsulated and encapsulated and reusablereusable

•• What’s the value to me?What’s the value to me?Code ReCode Re use anduse and XAMLifyXAMLify–– Code ReCode Re--use and use and XAMLifyXAMLify

Behavior in XAMLBehavior in XAMLBehavior in XAMLBehavior in XAML

<<i:Interaction.Behaviorsi:Interaction.Behaviors>><<esriBehaviors:ShowCoordinatesBehavioresriBehaviors:ShowCoordinatesBehavior/>/><<esriBehaviors:ShowCoordinatesBehavioresriBehaviors:ShowCoordinatesBehavior/>/>

</</i:Interaction.Behaviorsi:Interaction.Behaviors>>

Behaviors: ActionsBehaviors: ActionsBehaviors: ActionsBehaviors: Actions

•• Provide Provide functionality to do functionality to do somethingsomething

•• NOTE: Aren’t particularly useful on their ownNOTE: Aren’t particularly useful on their own•• NOTE: Aren t particularly useful on their ownNOTE: Aren t particularly useful on their own–– No way to No way to activate that functionality. activate that functionality.

•• Invoking actions requires a Invoking actions requires a triggertrigger. .

Behaviors:Behaviors: TriggersTriggersBehaviors: Behaviors: TriggersTriggers

•• Objects Objects that contain one or more actions and invoke those that contain one or more actions and invoke those actions in response to some stimulus. actions in response to some stimulus.

•• One One very common trigger is very common trigger is an an EventTriggerEventTrigger. .

OthOth ll•• Other Other examples examples –– might might include a trigger that fires on a timer, or a trigger that include a trigger that fires on a timer, or a trigger that

fires when an unhandled exception is thrown. fires when an unhandled exception is thrown.

Expression BlendExpression Blend

DEMO DEMO –– USING BEHAVIORSUSING BEHAVIORSExpression BlendExpression Blend

BehaviorsBehaviors –– Being practicalBeing practicalBehaviors Behaviors Being practicalBeing practical

•• Not a Magic bulletNot a Magic bullet•• Built as part of the Expression Blend Interactivity SDKBuilt as part of the Expression Blend Interactivity SDK

–– Designed as part of Expression BlendDesigned as part of Expression BlendDesigned as part of Expression BlendDesigned as part of Expression Blend•• Some things are simpler by using a button with simple Some things are simpler by using a button with simple

code behindcode behind–– Not a replacement for custom controlsNot a replacement for custom controls

Extensibility (Rex Hansen)Extensibility (Rex Hansen)

DEEP DIVEDEEP DIVEExtensibility (Rex Hansen)Extensibility (Rex Hansen)

Creating custom layersCreating custom layersCreating custom layersCreating custom layers

LayerLayer

Til dM S i LTil dM S i L D i LD i L G hi LG hi LTiledMapServiceLayerTiledMapServiceLayer DynamicLayerDynamicLayer GraphicsLayerGraphicsLayer

ArcGISArcGIS Server (Map)Server (Map) F t L

DynamicMapServiceLayerDynamicMapServiceLayer

ArcGISArcGIS Server (Map)Server (Map)BingBing

Open Open StreetMapStreetMapGoogleGoogle

ArcGISArcGIS Server (Map, Feature)Server (Map, Feature)Spatial Data ServiceSpatial Data Service

FeatureLayer

GoogleGoogleYahooYahoo

MapQuestMapQuest……

ArcGISArcGIS Server (Map, Image)Server (Map, Image)

WMSWMSA IMSA IMS

WFSWFSGeoRSSGeoRSS

……ArcIMSArcIMS

……* Included

DemoDemo

CUSTOM TILED MAP SERVICE LAYERCUSTOM TILED MAP SERVICE LAYERDemoDemo

Templates (Morten Nielsen)Templates (Morten Nielsen)

DEEP DIVEDEEP DIVETemplates (Morten Nielsen)Templates (Morten Nielsen)

Two outTwo out--ofof--thethe--box templatesbox templatesTwo outTwo out--ofof--thethe--box templatesbox templates(maybe more to come…)(maybe more to come…)

Standard TemplateStandard Template Showcase TemplateShowcase Template

Customizing the templatesCustomizing the templatesCustomizing the templatesCustomizing the templates

1.1. Add your own data to the map.Add your own data to the map.2.2. Modify shared resources for quick update of titles, color Modify shared resources for quick update of titles, color

scheme etc.scheme etc.scheme etc. scheme etc. 3.3. Add more items/buttons to the menu.Add more items/buttons to the menu.4.4. Reuse application’s actions and userReuse application’s actions and user--controls like controls like

draggabledraggable windows to create new toolbars, views etc.windows to create new toolbars, views etc.5.5. Add more ESRI and 3Add more ESRI and 3rdrd party controls.party controls.66 Write custom application codeWrite custom application code6.6. Write custom application code.Write custom application code.7.7. Keep on extending…Keep on extending…

DemoDemo

CUSTOMIZING THE TEMPLATECUSTOMIZING THE TEMPLATEDemoDemo

Custom SymbolsCustom Symbols

DEEP DIVEDEEP DIVECustom SymbolsCustom Symbols

Symbol HierarchySymbol HierarchySymbol HierarchySymbol Hierarchy

SymbolSymbol

MarkerSymbolMarkerSymbol LineSymbolLineSymbol FillSymbolFillSymbolCustom Symbols

Si l M k S b lSi l M k S b l Si l Li S b lSi l Li S b l Si l FillS b lSi l FillS b l

Symbols

SimpleMarkerSymbolSimpleMarkerSymbol

TextSymbolTextSymbol

SimpleLineSymbolSimpleLineSymbol

CartographicLineSymbolCartographicLineSymbol

SimpleFillSymbolSimpleFillSymbol

PictureFillSymbolPictureFillSymbolTextSymbolTextSymbol

PictureMarkerSymbolPictureMarkerSymbol

CartographicLineSymbolCartographicLineSymbol PictureFillSymbolPictureFillSymbol

SealedClassAbstract

ControlTemplateControlTemplateControlTemplateControlTemplate

Template defines the UI Elements inside symbol.Template defines the UI Elements inside symbol.

•• MarkerSymbolMarkerSymbol: : –– Can be any Can be any UIElementUIElement

•• Fill and Fill and LineSymbolLineSymbol: : Only: <Path x:Name="Element" /> onlyOnly: <Path x:Name="Element" /> only–– Only: <Path x:Name= Element /> onlyOnly: <Path x:Name= Element /> only

MarkerSymbol ControlTemplateMarkerSymbol ControlTemplateMarkerSymbol.ControlTemplateMarkerSymbol.ControlTemplate

<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>>

<Ellipse Width="10"<Ellipse Width="10"Height="10"Height="10"Fill="Red" />Fill="Red" />

</</ControlTemplateControlTemplate>>// iS b l k S b l C l liS b l k S b l C l l</</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>

</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>

FillSymbol ControlTemplateFillSymbol ControlTemplateFillSymbol.ControlTemplateFillSymbol.ControlTemplate

<<esriSymbols:FillSymbolesriSymbols:FillSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:esriSymbols:FillFillSymbol.ControlTemplateSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>>

<Path x:Name="Element" Fill="Blue" <Path x:Name="Element" Fill="Blue" Stroke="Red"Stroke="Red"StrokeThicknessStrokeThickness="2.0" />="2.0" />

</</ControlTemplateControlTemplate>>//</</esriSymbols:esriSymbols:FillFillSymbol.ControlTemplateSymbol.ControlTemplate>>

</</esriSymbols:esriSymbols:FillFillSymbolSymbol>>

LineSymbol ControlTemplateLineSymbol ControlTemplateLineSymbol.ControlTemplateLineSymbol.ControlTemplate

<<esriSymbols:FillSymbolesriSymbols:FillSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:esriSymbols:FillFillSymbol.ControlTemplateSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>>

<Path x:Name="Element" <Path x:Name="Element" Fill="Blue"Fill="Blue"Stroke="Red"Stroke="Red"StrokeThicknessStrokeThickness="2.0" />="2.0" />

</</ControlTemplateControlTemplate>>//</</esriSymbols:esriSymbols:FillFillSymbol.ControlTemplateSymbol.ControlTemplate>>

</</esriSymbols:esriSymbols:FillFillSymbolSymbol>>

Binding to propertiesBinding to propertiesBinding to propertiesBinding to properties

public class public class MySymbolMySymbol : : MarkerSymbolMarkerSymbol {{public double Size { get; set; }public double Size { get; set; }

}}}}------<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>>

lli id h { i dilli id h { i di b l ib l i }}<<Ellipse Width="{Binding Ellipse Width="{Binding Symbol.SizeSymbol.Size}"}"HeightHeight="{Binding ="{Binding Symbol.SizeSymbol.Size}"}"Fill="{Binding Attributes[Color]}" />Fill="{Binding Attributes[Color]}" />Fill {Binding Attributes[Color]} />Fill {Binding Attributes[Color]} />

</</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>

</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>

Visual StatesVisual StatesVisual StatesVisual States

•• Defines visual appearance for a control’s stateDefines visual appearance for a control’s state•• Animation defines the transition from one state to another.Animation defines the transition from one state to another.

Symbols have two Visual State Groups:Symbols have two Visual State Groups:•• SelectionStatesSelectionStates: Selected, Unselected: Selected, Unselected•• CommonStatesCommonStates: Normal, : Normal, MouseOverMouseOver

Visual StatesVisual StatesVisual StatesVisual States

<Grid><Grid><<VisualStateManagerVisualStateManager>><<VisualStateGroupVisualStateGroup Name="Name="CommonStatesCommonStates">"><<VisualStateGroupVisualStateGroup Name=Name= CommonStatesCommonStates >><<VisualStateVisualState Name="Name="MouseOverMouseOver">"><<StoryBoardStoryBoard>>

<!<!----Animation goes hereAnimation goes here---->></</StoryBoardStoryBoard>>// i li l</</VisualStateVisualState>>

<<VisualStateVisualState Name="Normal" />Name="Normal" /></</VisualStateGroupVisualStateGroup>></</VisualStateGroupVisualStateGroup> > <<VisualStateGroupVisualStateGroup Name="Name="SelectionStatesSelectionStates" />" /></</VisualStateManagerVisualStateManager>></Grid></Grid>

Symbol TemplatesSymbol Templates

DEMODEMOSymbol TemplatesSymbol Templates

Graphics Performance Tips/TricksGraphics Performance Tips/Tricks(Morten Nielsen)(Morten Nielsen)

DEEP DIVEDEEP DIVE(Morten Nielsen)(Morten Nielsen)

How do I render a 1 000 000+ graphics on theHow do I render a 1 000 000+ graphics on theHow do I render a 1,000,000+ graphics on the How do I render a 1,000,000+ graphics on the client?client?

Would the user really want to see a million features at the Would the user really want to see a million features at the same time? same time? How long would it take to download that many features toHow long would it take to download that many features toHow long would it take to download that many features to How long would it take to download that many features to the client?the client?

f ff fTry and limit the number of features displayed.Try and limit the number of features displayed.–– Use Use MaximumResolutionMaximumResolution property to hide features when property to hide features when

zomedzomed out.out.–– Cluster features together to show fewer elements.Cluster features together to show fewer elements.–– Let the user select an area of interest and only show data for Let the user select an area of interest and only show data for

that area.that area.that area.that area.

Optimizing the symbolsOptimizing the symbolsOptimizing the symbolsOptimizing the symbols

•• Simpler symbol templates render faster than complex Simpler symbol templates render faster than complex ones!ones!

•• Share resources as often as possible (brushesShare resources as often as possible (brushes etcetc))Share resources as often as possible (brushes Share resources as often as possible (brushes etcetc))

Things that often hurt rendering performance:Things that often hurt rendering performance:•• BindingBinding•• Visual StatesVisual States•• Disable Hit Test (Disable Hit Test (IsHitTestVisibleIsHitTestVisible="False")="False")•• Disable Hit Test (Disable Hit Test (IsHitTestVisibleIsHitTestVisible="False")="False")

InefficientInefficient Marker symbol:Marker symbol:Inefficient Inefficient Marker symbol:Marker symbol:

<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>><Grid><Grid><Ellipse Width="{Binding <Ellipse Width="{Binding Symbol.SizeSymbol.Size}"}"

Height="{Height="{Binding Binding Symbol.SizeSymbol.Size}"}"Fill=Fill="{Binding "{Binding Symbol.BrushSymbol.Brush}"}"

///>/></Grid></Grid></</ControlTemplateControlTemplate>></</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>

</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>

Optimized MarkerOptimized Marker symbol:symbol:Optimized Marker Optimized Marker symbol:symbol:

<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>>

<Ellipse Width="10"<Ellipse Width="10"Height="10"Height="10"Fill="Red"Fill="Red"

///>/>

</</ControlTemplateControlTemplate>></</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>

</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>

InefficientInefficient Picture Marker symbol:Picture Marker symbol:Inefficient Inefficient Picture Marker symbol:Picture Marker symbol:

<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<Image Width="20" Height="20" Image Width="20" Height="20"

SourceSource="http="http://myserver/myimage png://myserver/myimage png" />" />SourceSource="http="http://myserver/myimage.png://myserver/myimage.png" />" /></</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>y y py y p</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>

Optimized Picture MarkerOptimized Picture Marker symbolsymbolOptimized Picture Marker Optimized Picture Marker symbolsymbol

<<ImageBrushImageBrush x:Key="MyImageBrush" x:Key="MyImageBrush" ImageSourceImageSource="http://...../myimage.png" />="http://...../myimage.png" />

<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><Rectangle Width="20" Height="20"<Rectangle Width="20" Height="20"

Fill="{Fill="{StaticResourceStaticResource MyImageBrushMyImageBrush}" />}" />Fill="{Fill="{StaticResourceStaticResource MyImageBrushMyImageBrush}" />}" /></</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>// y y py y p</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>

Using WCF (Rex Hansen)Using WCF (Rex Hansen)

DEEP DIVEDEEP DIVEUsing WCF (Rex Hansen)Using WCF (Rex Hansen)

What is WCF?What is WCF?What is WCF?What is WCF?

•• Windows Communication FoundationWindows Communication Foundation–– .NET communication architecture.NET communication architecture–– Fundamentals:Fundamentals:Fundamentals:Fundamentals:

•• Host and client agree on a contractHost and client agree on a contract•• Host provides an endpoint with binding, address, contractHost provides an endpoint with binding, address, contract•• Client uses proxy tied to the endpoint thus contractClient uses proxy tied to the endpoint thus contract•• Client uses proxy tied to the endpoint, thus contractClient uses proxy tied to the endpoint, thus contract

–– DeserializationDeserialization handled for youhandled for you•• Types must beTypes must be serializableserializable•• Types must be Types must be serializableserializable

•• You get to focus on functionality, not communication!You get to focus on functionality, not communication!

DemoDemo

SENDING GEOMETRY TO THE SERVER WITH SENDING GEOMETRY TO THE SERVER WITH WCFWCFDemoDemo

Questions ?Questions ?Questions ?Questions ?

Please fill out the session surveysPlease fill out the session surveysyy

Links and resources:Links and resources:Links and resources:Links and resources:•• Resource Center: Resource Center: http://http://esriurl.com/slesriurl.com/sl•• SDK Samples:SDK Samples: http://http://esriurl.com/slsdkesriurl.com/slsdk•• API Reference:API Reference: http://esriurl com/slrefhttp://esriurl com/slref•• API Reference: API Reference: http://esriurl.com/slrefhttp://esriurl.com/slref•• Silverlight/WPF Blog: Silverlight/WPF Blog: http://esriurl.com/slbloghttp://esriurl.com/slblog

T ittT ittTwitter:Twitter:•• @@ajhaddadajhaddad @@rex_hansenrex_hansen @@sharpgissharpgis