HoverExpandExtender control

The HoverExpandExtender control is designed to enhance usability of a target Web control at runtime through two behaviors. First, it enables the overall opacity of a control to change as the cursor hovers over the target control. And second, the target control can be collapsed and expanded by clicking on a pin image. The HoverExpandExtender control builds on the ExtenderControlBase class included with the ASP.NET AJAX Control Toolkit .

Assembly: ESRI.ArcGIS.ADF.UI.WebControls.dll
Class: ESRI.ArcGIS.ADF.UI.WebControls.HoverExpandExtender

Using the HoverExpandExtender control

Add the controls to the page

The HoverExpandExtender control requires a ScriptManager in the page to function. Make sure the ScriptManager is the first control in the page.

Add a HoverExpandExtender, MapResourceManager, and a Map control to the page. Add a valid map resource item to the MapResourceManager and buddy it with the Map.

Add a control to enable hover and expand within the Map. In this example, and OverviewMap control will be used. Add an OverviewMap control to the page and set the Map and map resource item it will display.
Set the HoverExpandExtender control properties

Select the HoverExpandExtender control. In the Properties page:
1. Set the TargetControlId property to the id of the control you want to enable hover and expand behavior on. Use the id of the OverviewMap control added earlier.
2. Configure the hover behavior. Set the MouseOutOpacity and MouseOverOpacity properties to a value between 0.0 (transparent) to 1.0 (opaque). When the mouse cursor hovers over the target control, the entire control is rendered using the MouseOverOpacity value. When the mouse cursor leaves the target control, it is rendered using the the MouseOutOpacity value.
3. Configure the expand behavior. Set the PinnedImageUrl, UnpinnedImageUrl, and ThumbnailImageUrl properties to a url referencing an image (preferably different images). If pinned, the control will remain open regardless of the mouse cursor location and the PinnedImageUrl will display in the upper right corner of the target control. If unpinned, the target control will be expanded when the mouse cursor hovers over the control and the UnpinnedImageUrl will display in the upper right corner of the target control. When the mouse cursor moves outside the bounds of the target control, the control will collapse and display the ThumbnailImageUrl will display where the control is located.
4. Set the Pinned property. By default, the Pinned property is true. You can adjust this value to set the initial expanded state of the target control.
Runtime use

At runtime, the target control (OverviewMap) is expanded (pinned). As the mouse cursor moves over the target control, the opacity values change:

Clicking on the pinned image in the upper right corner of the target control will pin or unpin the control. If unpinned and the mouse cursor moves outside the bounds of the target control, the control will collapse until the mouse cursor hovers over it again.

Property Name	Type	Description
MouseOutOpacity	double	The opacity of the target control when the mouse cursor leaves the control boundary. 0.0 is completely transparent, 1.0 is complete opaque.
MouseOverOpacity	double	The opacity of the target control when the mouse cursor is within the control boundary. 0.0 is completely transparent, 1.0 is complete opaque.
Pinned	bool	Sets where the the target control is expanded (pinned) or collapsed (unpinned).
PinnedImageUrl	string	The url to an image shown in the upper right corner of the target control when the control is pinned.
TargetControlId	string	The control on which the HoverExpandExtender control will operate.
ThumbnailImageUrl	string	The url to an image shown when the target control is collapsed.
UnpinnedImageUrl	string	The url to an image shows in the upper right corner of the target control when the control is unpinned.