Select to view content in your preferred language

Simple TabbedRibbon template Mod - improve template by adding tools

735
3
09-29-2010 05:25 AM
BrianPangtay
Regular Contributor
The goal of this thread is to serve as a learning tool for ESRI's Silverlight API by incorporating tools into the default Simple Tabbed Ribbon template.

One can find the default ESRI templates at: http://help.arcgis.com/en/webapi/silverlight/samples/TemplateGalleryWeb/start.htm

The template being used here is the Simple Tabbed Ribbon template which is attached to this thread. I like this template because it allows one to add functionality by simply adding another tab to the interface. The template provides basic functionality such as controlling visible layers, map navigation and feature selection.

I'll create a new reply to this thread as I add new functionality to the template and attach a revised template incorporating the modification. I'm in the process of learning Silverlight so I'm hoping I can get help from the community with problems I encounter as I attempt to incorporate the functionality. I'll be using Visual Studio 2010 with Expression Blend 4. The coding language will be C#.

Hopefully, we'll also learn best practice design patterns when incorporating additional functionality. I'll be using publicly available ESRI services so anyone should be able to download the template and run it.

By the time this thread comes to an end, one should end up with a powerful template that incorporates the most useful tools available in the Silverlight API.
0 Kudos
3 Replies
BrianPangtay
Regular Contributor
Goal: implement spatial query to behave like the interactive sample

Comparing the default Simple TabbedRibbon template
(see http://help.arcgis.com/en/webapi/silverlight/samples/TemplateGalleryWeb/start.htm) vs. the spatial query sample
(see http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#SpatialQuery), the template is missing a very helpful enhancement provided by the sample code.

What is missing is the behavior to highlight both the selected map feature (in this case, a state in the US) and its associated attribute data in the datagrid when the mouse cursor hovers over either the map feature or the related row in the datagrid. This is a simple and effective interface to quickly identify both the feature and related row vs. the equivalent interface in ArcMap.

Implementation:

1. Add a symbology style to distinguish between unselected states vs. selected states vs. state containing the mouse cursor in the map and the datagrid.
2. Add events in the map and the datagrid that call functions when the mouse hovers over the state feature or the datagrid row.
3. Add the functions that change the symbology of the state or row over which the mouse is hovering over.

Try to implement it on your own. The resulting code is attached. Reply to this thread if you have any questions or to suggest improvements to the attached code.

Proposed future mods will add the following functionality:

1. Perform an attribute query in response to an URL parameter.
2. Display XY coordinates for current mouse cursor location.
3. Measure line.
4. Measure polygon area and perimeter.
5. Change selection from a simple Spatial Query to a Layer Selection.

If you have any particular tools or interface enhancement you would like to see added to the template, reply to the thread describing the functionality desired.
0 Kudos
BrianPangtay
Regular Contributor
Goal: When a URL parameter is passed to the page, execute the appropriate attribute query.

Since I also create web sites that are not GIS centric, I needed a generic mapping web site to provide basic mapping functions. I preferred to have the mapping functions be provided by a separate web page in a loosely coupled fashion so that updates to either web page can occur independently of each other and will allow the GIS application to be used by multiple non-GIS web applications. Hence, I'm using URL parameters to allow the GIS and the non-GIS web page to communicate with each other.

For this example, I am pretending that I have another web application that has attributes associated to a state in the US. In the non-GIS web application, if the user wants to view the location of the state, the related data row will contain a hyperlink that contains the URL for the GIS application passing the state desired as a URL parameter. Thus, if the data is related to Texas, the hyperlink will contain the following URL:

http://<GIS URL>?state=Texas

Clicking on the hyperlink will call the GIS application which will get the parameter that will be used to perform an attribute query to retrieve the GIS attributes for the feature desired and zoom into the feature and display that feature's attributes.

A byproduct of this mod is that an attribute query is fully defined with an interface and code behind.

The modification is based on the interactive sample for attribute query:

http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#AttributeQuery

Replaced the ComboBox with a Textbox to allow the user to type in the state desired instead because the type of parameters I need to pass will be less constrained. I was thinking of turning the label next to the textbox into a way for the user to specify what attribute to query but that will be a future mod. I also wrapped the attribute grid in a collapsible panel to reduce the footprint of the tools.

Implementation:

1. Define the datagrid that will display the requested feature attributes.
2. Create the function to retrieve the URL parameter.
3. Bind attribute query results to attribute datagrid.
4. Create the function to perform the attribute query and zoom in to feature upon query completion.

The modified code is attached. By the way, the code is cumulative so that the latest mod code incorporates all previous mods.
0 Kudos
BrianPangtay
Regular Contributor
Goal: Display XY coordinates of where the mouse cursor is hovering over.

The modification is based on the following sample:

http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#ShowCoordinatesBehavior

Implementation:

1. Modify Map to display XY coordinates by using interactive behavior.

The modified code is attached.
0 Kudos