ImageViewerActiveItemInteractiveMode Object

Summary

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

Syntax

JavaScript Syntax

function lt.Controls.ImageViewerActiveItemInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode

TypeScript Syntax

class lt.Controls.ImageViewerActiveItemInteractiveMode() 
	extends lt.Controls.ImageViewerInteractiveMode

Remarks

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

DragStarted
Move (if the IsHoverEnabled property is true)
KeyDown (if the IsKeyboardEnabled property is true)

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.

Example

JavaScript Example

example: function ImageViewerActiveItemInteractiveMode$Example() { 
   this._imageViewer.interactiveModes.beginUpdate(); 
   var myImageViewerInteractivMode = new MyImageViewerInteractivMode(); 
   myImageViewerInteractivMode.isHoverEnabled = true, 
   myImageViewerInteractivMode.isKeyboardEnabled = true 
   this._imageViewer.interactiveModes.add(myImageViewerInteractivMode); 
   this._imageViewer.interactiveModes.endUpdate(); 
} 
 
var _this = null; 
MyImageViewerInteractivMode = function MyImageViewerInteractivMode() { 
   MyImageViewerInteractivMode.initializeBase(this); 
   _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"); 
 
      service.tap.add(this.service_Tap); 
   }, 
 
   stop: function MyImageViewerInteractivMode$stop(imageViewer) { 
      if (this.isStarted) { 
         var service = MyImageViewerInteractivMode.callBaseMethod(this, "get_interactiveService"); 
 
         service.tap.remove(this.service_Tap); 
 
         MyImageViewerInteractivMode.callBaseMethod(this, "stop", [imageViewer]); 
      } 
   }, 
 
   service_Tap: function MyImageViewerInteractivMode$_service_DragStarted(sender, e) { 
      if (_this.canStartWork(e)) { 
         e.IsHandled = true; 
         _this.onWorkStarted(lt.LeadEventArgs.empty); 
 
         var imageViewer = _this.imageViewer; 
 
         imageViewer.beginRender(); 
         // ... 
         // ... 
         // ... 
         // set your render code here 
         // ... 
         // ... 
         // ... 
         imageViewer.endRender(); 
 
         _this.onWorkCompleted(lt.LeadEventArgs.empty); 
      } 
   } 
} 
 
// MyImageViewerInteractivMode class, derives from lt.Controls.ImageViewerInteractiveMode 
MyImageViewerInteractivMode.registerClass("MyImageViewerInteractivMode", lt.Controls.ImageViewerActiveItemInteractiveMode);

Requirements

Target Platforms

Reference

ImageViewerActiveItemInteractiveMode Members

Leadtools.Controls Namespace

Help Version 19.0.2017.10.27

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies