---

The ImageViewer class supports Rich built-in and fully customizable and extensible user-interface interaction support for panning, zooming, magnify glass, rubber banding and many more. Support for both mouse and touch input.

To use an interactive mode, create an instance of one of types derived from ImageViewerInteractiveMode and add it to the ImageViewer.InteractiveModes collection. For example:

             // Create an instance of Pan/Zoom interactive mode
             ImageViewerPanZoomInteractiveMode mode = new ImageViewerPanZoomInteractiveMode();
             // Add it to the viewer
             imageViewer.InteractiveModes.Add(mode);
             

With the viewer is setup like the example above, clicking and dragging with the mouse on the viewer surface will pan the image. CTRL-clicking and dragging will zoom the image in and out. Similarly on devices that support touch input, pressed down and dragging will pan the image while dragging with two fingers will zoom in and out.

ImageViewer supports the following built in and fully functional interactive modes:

Interactive Mode	Description
ImageViewerPanZoomInteractiveMode	Provides interactive pan and zoom user interface functionality to an ImageViewer
ImageViewerZoomToInteractiveMode	Zooms to the image rectangle created by the user using mouse or touch
ImageViewerMagnifyGlassInteractiveMode	Magnifies portion of the image under the mouse or touch
ImageViewerSpyGlassInteractiveMode	Generic spy glass interactive mode
ImageViewerCenterAtInteractiveMode	Centers (and optionally zooms) the image around the user mouse click or touch tap
ImageViewerZoomAtInteractiveMode	Zooms the image around the user mouse click or touch tap
ImageViewerRubberBandInteractiveMode	Draws a temporary rectangle on top of the image using the mouse or touch. Can be used to perform any extra functionality such as drawing a region of interest for a user-defined operation
ImageViewerNoneInteractiveMode	Empty interactive mode
ImageViewerAutoPanInteractiveMode	Automatically pans the image to a direction when the user is dragging near the edge of the viewer
ImageViewerActiveItemInteractiveMode	Changes the active item upon user mouse click or touch tap
ImageViewerAddRegionInteractiveMode	Adds a region to the image
ImageViewerFloaterInteractiveMode	Support for dragging and resizing the floater of an image using mouse or touch input
ImageViewerPagerInteractiveMode	Flips the pages of multi-page image when the user drags on the viewer surface
ImageViewerSelectItemsInteractiveMode	Provides single and multi-selection support using mouse or touch input

These interactive modes have extra functionality to further customize the behavior as well as being fully extensible for further detailed operations.

The ImageViewer.InteractiveModes property is a collection, hence, you can add as many modes to the viewer as desired. This allows you to:

• Add all the interactive modes needed by the application once. Then enable only the mode for the current application state.

• Some interactive modes can be combined together to add further functionality

The following example will be used by all the code snippets below to demonstrate how to use this collection.

             // Create a new image viewer instance using the default constructor
             ImageViewer imageViewer = new ImageViewer();
             // Set some properties
             imageViewer.Dock = DockStyle.Fill;
             // Add it to the form
             this.Controls.Add(imageViewer);
             // Load an image into it
             using (RasterCodecs codecs = new RasterCodecs())
                imageViewer.Image = codecs.Load(@"C:\Users\Public\Documents\LEADTOOLS Images\Ocr1.tif", 1);
             

Which mode handles the input action depends on the following:

The order of the modes in the collection

The mode at the top of the collection (at index 0) will have first chance of handling the action. If this mode does not handle the action, then it will be passed to the next mode in the list (if any).

Add the following code to the example above:

             // Add Pan/Zoom mode first
             ImageViewerPanZoomInteractiveMode panZoomMode = new ImageViewerPanZoomInteractiveMode();
             imageViewer.InteractiveModes.Add(panZoomMode);
             // And Rubber Band mode second
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             imageViewer.InteractiveModes.Add(rubberBandMode);
             

Run the example and notice that only pan/zoom is usable, rubber-band does not work. Now change code like this:

             // And Rubber band mode first
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             imageViewer.InteractiveModes.Add(rubberBandMode);
             // Add Pan/Zoom mode second
             ImageViewerPanZoomInteractiveMode panZoomMode = new ImageViewerPanZoomInteractiveMode();
             imageViewer.InteractiveModes.Add(panZoomMode);
             

Run the example and notice now that you can draw rubber bands but cannot pan/zoom anymore.

You can also change the order by using the collection to add/remove and insert items in different locations.

The value of ImageViewerInteractiveMode.IsEnabled

Modes that are disabled will never run and ignore all events. IsEnabled is true by default.

Change the code in the example as follows:

             // And Rubber band first
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             // But disable it
             rubberBandMode.IsEnabled = false;
             imageViewer.InteractiveModes.Add(rubberBandMode);
             // Add Pan/Zoom mode second
             ImageViewerPanZoomInteractiveMode panZoomMode = new ImageViewerPanZoomInteractiveMode();
             imageViewer.InteractiveModes.Add(panZoomMode);
             

Run the example and even though rubber band is the first mode; it is not usable, pan zoom is.

This is handled by each mode through the use of the InteractiveEventArgs.IsHandled property.

The value of ImageViewerInteractiveMode.MouseButtons

Used when the device supports mouse input. This value is MouseButtons.Left, but you can change it to attach an interactive mode to a different button.

Change the code in the example as follows:

             // And Rubber band first
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             // Assign it to left mouse button (this is the default)
             rubberBandMode.MouseButtons = MouseButtons.Left;
             imageViewer.InteractiveModes.Add(rubberBandMode);
             // Add Pan/Zoom mode second
             ImageViewerPanZoomInteractiveMode panZoomMode = new ImageViewerPanZoomInteractiveMode();
             // Assign to the right mouse button
             panZoomMode.MouseButtons = MouseButtons.Right;
             imageViewer.InteractiveModes.Add(panZoomMode);
             

Run the example. Now using the left mouse button will draw a rubber band while using the right mouse button will pan and zoom.

The order of the modes and the state of IsEnabled still applies when multiple modes are attached to the same mouse button.

Note that in touch devices that do not support a mouse. The touch input is treated as a left mouse button. Attaching a mode to any other mouse button will have no effect. However, if the application is designed to support both mouse and touch events (for example, a web application) then you can assign modes to left and right mouse buttons for extra functionality when the application is running in a desktop browser that supports mouse or both mouse and touch.

You can also set an interactive mode MouseButtons property to a combination of values. For example MouseButtons.Left | MouseButtons.Right. This will instruct the mode to run when either mouse button is pressed.

Some interactive modes can run when the value of MouseButtons is MouseButtons.None. For example:

             // Add auto-pan attached to left mouse button
             ImageViewerAutoPanInteractiveMode autoPanMode = new ImageViewerAutoPanInteractiveMode();
             autoPanMode.MouseButtons = MouseButtons.Left;
             imageViewer.InteractiveModes.Add(autoPanMode);
             

Run the example and click and move the mouse to the edge of the viewer and see how it pans the image to that direction. Now change as follows:

             // Add auto-pan, not attached to any button
             ImageViewerAutoPanInteractiveMode autoPanMode = new ImageViewerAutoPanInteractiveMode();
             autoPanMode.MouseButtons = MouseButtons.None;
             imageViewer.InteractiveModes.Add(autoPanMode);
             

Run the example and see how auto-pan works now when no mouse buttons is pressed.

The value of ImageViewerInteractiveMode.CanStartWork

This virtual method is called by the base class to check the standard conditions (such as the IsEnabled and MouseButtons property described above) as well as any further custom condition such as the value of WorkOnBounds, Item, ItemPart.

Change the code in the example to use multiple-items:

             // Create a new image viewer instance with a vertical layout
             ImageViewerViewLayout viewLayout = new ImageViewerVerticalViewLayout();
             ImageViewer imageViewer = new ImageViewer(viewLayout);
             // Set some properties
             imageViewer.Dock = DockStyle.Fill;
             imageViewer.BackColor = Color.Bisque;
             // Add a border (need some padding as well)
             imageViewer.ImageBorderThickness = 1;
             // Add some padding
             imageViewer.ItemPadding = new Padding(80);
             // Use a border around the items so we can see them
             imageViewer.ItemBackgroundColor = Color.Yellow;
             imageViewer.ItemBorderThickness = 1;
             // Add it to the form
             this.Controls.Add(imageViewer);
             imageViewer.BringToFront();
            
             // Add a couple of items
             imageViewer.Items.AddFromImageFile(@"C:\Users\Public\Documents\LEADTOOLS Images\sample1.png", 1);
             imageViewer.Items.AddFromImageFile(@"C:\Users\Public\Documents\LEADTOOLS Images\sample2.png", 1);
             

Now add the following interactive mode:

             ImageViewerRubberBandInteractiveMode mode = new ImageViewerRubberBandInteractiveMode();
             imageViewer.InteractiveModes.Add(mode);
             

Notice how if you try to draw a rubber band outside the yellow item boxes, the mode does not run. This is because the default value of ItemPart is Content and the default value of WorkOnBounds is true. Meaning: Only work on the content (inside the item) part of an item. The mode will perform hit-testing on the item and if the condition is not met, it will not run.

Change the code as follows:

             ImageViewerRubberBandInteractiveMode mode = new ImageViewerRubberBandInteractiveMode();         
             mode.WorkOnBounds = false;
             imageViewer.InteractiveModes.Add(mode);
             

Now even though the part is still Content, we instructed the mode to ignore this value and not erform hit-testing. Run the code and notice how you can pan/zoom on any part inside the viewer control.

To work on a specific part of the item, we need to:

• Make sure we will work on an item. So set AutoItemMode to ImageViewerAutoItemMode.AutoSet or ImageViewerAutoItemMode.AutoSetActive

• Set WorkOnBounds to true

• Finally, set ItemPart to the desired value

For example, this code will make sure rubber band will only work on the image part of an item.

             ImageViewerRubberBandInteractiveMode mode = new ImageViewerRubberBandInteractiveMode();
             mode.AutoItemMode = ImageViewerAutoItemMode.AutoSet;
             mode.ItemPart = ImageViewerItemPart.Image;
             mode.WorkOnBounds = true;
             imageViewer.InteractiveModes.Add(mode);
             

Finally. You can restrict the mode to work on a certain item. The following will allow rubber band to work on the second item (index of 1) only. Note that we set AutoItemMode to None so the mode does not change the Item property.

             ImageViewerRubberBandInteractiveMode mode = new ImageViewerRubberBandInteractiveMode();
             mode.AutoItemMode = ImageViewerAutoItemMode.None;
             mode.Item = imageViewer.Items[1];
             mode.ItemPart = ImageViewerItemPart.Image;
             mode.WorkOnBounds = true;
             imageViewer.InteractiveModes.Add(mode);
             

Run this example and notice that rubber band only works on the second item.

Combing Interactive Modes

Some interactive modes can be combined with others to provide extra functionality. For example, ImageViewerAutoPanInteractiveMode can be combined with any other mode to allow auto-panning the viewer while the other mode is running.

Change the code as follows:

             // Add auto-pan, also left button
             ImageViewerAutoPanInteractiveMode autoPanMode = new ImageViewerAutoPanInteractiveMode();
             autoPanMode.MouseButtons = MouseButtons.Left;
             imageViewer.InteractiveModes.Add(autoPanMode);
             // Add rubber-band, left button
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             rubberBandMode.MouseButtons = MouseButtons.Left;
             imageViewer.InteractiveModes.Add(rubberBandMode);
             

Run the example, and notice that when drawing a rubber band and moving towards the edge of the viewer, it will pan in that direction. This is the auto-pan performing extra functionality to rubber-band.

This is accomplished because auto-pan does not set the value of InteractiveEventArgs.IsHandled to true, hence the event will propagate to the next interactive mode in the list: the rubber-band.

Error processing SSI file