ImageViewerActiveItemInteractiveMode Object


Allows you to change the current active item in the viewer using a keyboard, mouse, touch screen, or multi-touch device.


JavaScript Syntax
function lt.Controls.ImageViewerActiveItemInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode 
TypeScript Syntax
class lt.Controls.ImageViewerActiveItemInteractiveMode() 
	extends lt.Controls.ImageViewerInteractiveMode 


The ImageViewerActiveItemInteractiveMode object derives from the ImageViewerInteractiveMode object and subscribes to the following events of the InteractiveService object:

The ImageViewerActiveItemInteractiveMode object changes the current ActiveItem under the following conditions:

  • If the user clicks an item, it will become the new ActiveItem.

  • If the IsKeyboardEnabled property is set to true, then moving using the navigation keys (the arrow keys, page up/down keys, home key and end key) will also set the ActiveItem. This works as a "grid" using the current ViewLayout. For example, pressing the down arrow key makes the item below the current active item (if any) the new active item. Pressing the left arrow key makes the item to the left of the current item the new active item and so forth.

  • If the IsHoverEnabled property is set to true, then moving the mouse over an item will change its IsHovered property to true, and moving the mouse away from the item sets it back to false. Items can have different styles when the mouse is hovering over it. For more information, refer to Image Viewer Appearance.

When a new active item is set, the InteractiveEventArgs.IsHandled property is set to true.

For more information, refer to Image Viewer Interactive Modes.


JavaScript Example
example: function ImageViewerActiveItemInteractiveMode$Example() { 
   var myImageViewerInteractivMode = new MyImageViewerInteractivMode(); 
   myImageViewerInteractivMode.isHoverEnabled = true, 
   myImageViewerInteractivMode.isKeyboardEnabled = true 
var _this = null; 
MyImageViewerInteractivMode = function MyImageViewerInteractivMode() { 
   _this = this; 
MyImageViewerInteractivMode.prototype = { 
   name: function MyImageViewerInteractivMode$name() { 
      return "MyImageViewerInteractivMode"; 
   id: function MyImageViewerInteractivMode$id() { 
      return lt.Controls.ImageViewerInteractiveMode.userModeId; 
   start: function MyImageViewerInteractivMode$start(imageViewer) { 
      MyImageViewerInteractivMode.callBaseMethod(this, "start", [imageViewer]); 
      var service = MyImageViewerInteractivMode.callBaseMethod(this, "get_interactiveService"); 
   stop: function MyImageViewerInteractivMode$stop(imageViewer) { 
      if (this.isStarted) { 
         var service = MyImageViewerInteractivMode.callBaseMethod(this, "get_interactiveService"); 
         MyImageViewerInteractivMode.callBaseMethod(this, "stop", [imageViewer]); 
   service_Tap: function MyImageViewerInteractivMode$_service_DragStarted(sender, e) { 
      if (_this.canStartWork(e)) { 
         e.IsHandled = true; 
         var imageViewer = _this.imageViewer; 
         // ... 
         // ... 
         // ... 
         // set your render code here 
         // ... 
         // ... 
         // ... 
// MyImageViewerInteractivMode class, derives from lt.Controls.ImageViewerInteractiveMode 
MyImageViewerInteractivMode.registerClass("MyImageViewerInteractivMode", lt.Controls.ImageViewerActiveItemInteractiveMode); 


Target Platforms

Help Version 19.0.2017.10.27
Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly