In this topic
About the HoverExpandExtender control
The HoverExpandExtender control enhances the usability of a target Web control at runtime by doing the following:
- Enables the opacity of a control to change when the mouse pointer hovers over the target control.
- Collapses and expands the target control by clicking a pin image.
The HoverExpandExtender control builds on the ExtenderControlBase class included with the ASP.NET Asynchronous JavaScript and XML (AJAX) Control Toolkit. For more information, see Microsoft ASP.NET Web site's topic, ASP.NET AJAX Control Toolkit.
Using the control
Do the following to use the control:
- The HoverExpandExtender control requires a ScriptManager on the page. Add the ScriptManager as the first control on the page.
- Add a HoverExpandExtender, MapResourceManager, and Map control on the page.
- Add a map resource item to the MapResourceManager and buddy it with the map.
- Add a OverviewMap control to enable hover and expand functionality on the page, then set the map and map resource item it will show. See the following screen shot:
- Select the HoverExpandExtender control. Do the following on the Properties page:
- Set the TargetControlId property to the ID of the control to enable hover and expand functionality. Use the ID of the OverviewMap control previously added.
- To configure the hover behavior, set the MouseOutOpacity and MouseOverOpacity properties between 0.0 (transparent) to 1.0 (opaque). When the mouse cursor hovers over the target control, the control is rendered using the MouseOverOpacity value. When the mouse cursor leaves the target control, it is rendered using the MouseOutOpacity value.
- To configure the expand behavior, set the PinnedImageUrl, UnpinnedImageUrl, and ThumbnailImageUrl properties to a uniform resource locator (URL) referencing an image (use different images). If pinned, the control remains open regardless of the mouse cursor location and the PinnedImageUrl shows in the upper-right corner of the target control. If unpinned, the target control expands when the mouse cursor hovers over the control and the UnpinnedImageUrl shows in the upper right corner of the target control. When the mouse cursor moves outside the boundary of the target control, the control collapses and shows the ThumbnailImageUrl where the control is located.
- Set the Pinned property. By default, the Pinned property is set to true. This value can be adjusted to set the initial expanded state of the target control.
- At runtime, the target control (OverviewMap) is expanded (pinned). As the mouse cursor moves over the target control, the opacity values change. See the following screen shot:
Clicking the pinned image in the upper right corner of the target control pins or unpins the control. If unpinned, and the mouse cursor moves outside the boundaries of the target control, the control collapses until the mouse cursor hovers over it again. See the following screen shot:
Members
The following table shows a list of properties related to the HoverExpandExtender control. For more information, see the HoverExpandExtender control in the Library Reference section.
|
Property name
|
Type
|
Description
|
|
MouseOutOpacity
|
double
|
Opacity of the target control when the mouse cursor leaves the control's boundary. 0.0 is completely transparent and 1.0 is completely opaque.
|
|
MouseOverOpacity
|
double
|
Opacity of the target control when the mouse cursor is within the control's boundary. 0.0 is completely transparent and 1.0 is completely opaque.
|
|
Pinned
|
bool
|
Sets where the target control is expanded (pinned) or collapsed (unpinned).
|
|
PinnedImageUrl
|
string
|
URL to an image shown in the upper right corner of the target control when the control is pinned.
|
|
TargetControlId
|
string
|
Control on which the HoverExpandExtender control operates.
|
|
ThumbnailImageUrl
|
string
|
URL to an image shown when the target control collapses.
|
|
UnpinnedImageUrl
|
string
|
URL to an image shows in the upper right corner of the target control when the control is unpinned.
|
See Also:
Web controlsCustomizing the Web Mapping Application
To use the code in this topic, reference the following assemblies in your Visual Studio project. In the code files, you will need using (C#) or Imports (VB .NET) directives for the corresponding namespaces (given in parenthesis below if different from the assembly name):
ESRI.ArcGIS.ADF.UI.WebControls.dll