Visual Elements
- 3 minutes to read
This topic lists the ASPxImageZoom and ASPxImageZoomNavigator elements that are displayed on-screen. Each section contains a screenshot that outlines the element and a brief overview of the element’s function.
The control displays the modal expand window when users click the preview image.
The following visual elements are available.
Expand Window
The control displays the modal expand window when users click the preview image.
The table below lists the main members that affect element appearance and functionality.
| Characteristics | Members |
|---|---|
| Availability | ASPxImageZoom.EnableExpandMode |
| Style | ASPxImageZoom.StylesExpandWindow |
| Text | ASPxImageZoom.ExpandWindowText |
| Close Button Image | ImageZoomExpandWindowImages.CloseButton |
| Close Button Style | ImageZoomExpandWindowStyles.CloseButton |
| Load Mode | ASPxImageZoom.LargeImageLoadMode |
Hint
A preview image displays a hint when a mouse pointer does not hover over it. The hint element consists of an image and text.
The table below lists the main members that affect element appearance and functionality.
| Characteristics | Members |
|---|---|
| Text | ASPxImageZoom.HintText |
| Text Visibility | ASPxImageZoom.ShowHintText |
| Image | ImageZoomImages.Hint |
| Hint Visibility | ASPxImageZoom.ShowHint |
Mouse Box
The mouse box is an area displayed around the mouse pointer when it hovers over a preview image. This also invokes a zoom window, which displays a larger image of the mouse box area.
You can use the ImageZoomZoomModeSettings.MouseBoxOpacityMode property to specify the mouse box opacity mode.
| Inside | Outside |
|---|---|
 |
 |
The mouse box size is calculated automatically based on the zoom window size and large image size.
Navigation Buttons
Navigation buttons allow an end user to navigate through thumbnails.
The table below lists the main members that affect element appearance and functionality.
Preview Image
The preview image is the main ASPxImageZoom control element that displays an image. You can use control level properties to customize the element’s style settings.
You can display a hint in the top left corner of the window when the mouse pointer does not hover over the preview image.
When the mouse pointer hovers over the preview image, the control displays a mouse box around the mouse pointer. This also invokes a zoom window, which displays a larger image of the mouse box area.
Thumbnail
A thumbnail is an image that allows end users to navigate through image zoom navigator images. The preview image displays a larger version of the currently selected thumbnail image.
The table below lists the main members that affect element appearance and functionality.
| Characteristics | Members |
|---|---|
| Sizes | ImageZoomNavigatorAutoGeneratedImagesSettings.ThumbnailHeight, ImageZoomNavigatorAutoGeneratedImagesSettings.ThumbnailWidth |
| Style | ImageZoomNavigatorStyles.Thumbnail |
| Item Spacing | ASPxImageZoomNavigator.ItemSpacing |
| Item Count | ASPxImageZoomNavigator.VisibleItemCount |
| Orientation | ASPxImageZoomNavigator.Orientation |
Zoom Window
The Image Zoom control displays a zoom window when a user hovers the mouse pointer over a preview image. The zoom window shows a larger image of the mouse box area.
The table below lists the main members that affect element appearance and functionality.
| Characteristics | Members |
|---|---|
| Availability | ASPxImageZoom.EnableZoomMode |
| Text | ASPxImageZoom.ZoomWindowText |
| Sizes | ImageZoomZoomModeSettings.ZoomWindowHeight, ImageZoomZoomModeSettings.ZoomWindowWidth |
| Position | ImageZoomZoomModeSettings.ZoomWindowPosition |
| Offset | ImageZoomZoomModeSettings.ZoomWindowOffset |
| Style | ASPxImageZoom.StylesZoomWindow |
| Load Mode | ASPxImageZoom.LargeImageLoadMode |