2010年8月07日_周六_HoverExpandExtender control

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 .      

HoverExpandExtender控件被设计为增强目标web adf 控件 在运行状态下的使用能力，这个主要体现在两个方面。 第一：当光标悬停在目标控件上面的时候，她能够全面的改变目标控件的透明度。 第二：
当别针图像后，目标控件可以伸展和收缩。HoverExpandExtender控件继承于ExtenderControlBase类，这个类包括在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.
HoverExpandExtender需要页面中有一个ScriptManager 控件来使其运运行。 因此确保ScriptManager控件是页面中的第一个控件。
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.    
向页面中添加一个HoverExpandExtender 控件，一个MapResourceManager 控件 和一个地图控件。 向MapResourceManager 控件中添加一个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.     
在地图中添加一个可以悬停以及展开的控件。在这个例子中，我们将使用OverviewMap控件。向页面中添加一个OverviewMap 控件，并设置地图起要展示的地图以及地图资源。

Set the HoverExpandExtender control properties 

设置HoverExpandExtender 控件的属性：
Select the HoverExpandExtender control.  In the Properties page:

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.    

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.   

 选择HoverExpandExtender控件，打开属性窗口：

设置TargetControlId的ID为你想要实现展开，悬停等动作的控件。这里我们使用在前面加载的鹰眼图控件的ID。

配置悬停动作：设置MouseOutOpacity 和MouseOverOpacity 属性的值为0—100之间的数字。当鼠标悬停在目标控件的时候，整个目标控件使用MouseOverOpacity的值来设置它的透明度。当鼠标离开了目标控件，她及会重新使用MouseOutOpacity的值来重新设置控件的透明度。

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.  

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
配置展开行为。 设置PinnedImageUrl, UnpinnedImageUrl, ThumbnailImageUrl属性，将它指向到一个图片的URL。 如果别针固定，那么控件将会一直保持展开的状态，而不管鼠标在控件中的位置，并且PinnedImageUrl指向的图像将会定位到目标控件右上角的位置。如果没有别针，那么只有当控件悬停在控件上方的时候，控件才会展开。并且别针也会显示在控件的右上角，。 当鼠标移出到目标控件的边缘的外部，目标控件将会搜索起来。ThumbnailImageUrl 指向的别针图像将会展现在控件的位置。

设置Pinned 属性，默认情况下，Pinned属性为true。 你可以调整这个属性来设置目标控件初始化的时候展开的状态。

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

运行状态下，目标控件（鹰眼图）是展开的（pinned）。随着鼠标移动到目标控件上方，控件的透明度也随着改变。


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.  

单击目标控件右上角的pinned图像将会 固定或者非固定控件。当不unpinned的时候，当鼠标移动到目标控件边缘外部的时候，控件将会收缩，直到光标再一次悬停在目标控件的上方。

 

Members

Properties 

  The following table provides a list of properties of interest.  For complete reference information, see the HoverExpandExtender control in the library reference section.

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.