---
title: "Using Navigators and Rubberbands (AJAX Controls)"
canonical: https://www.graphicsmill.com/docs/gm5/AjaxControlsUsingNavigatorsandRubberbands.htm
product: "Graphics Mill 5.5 for .NET"
---

This documentation is for the old version. [Go to the latest Graphics Mill docs](https://www.graphicsmill.com/docs/gm/)

# Using Navigators and Rubberbands (AJAX Controls)
 
[BitmapViewer](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_BitmapViewer.htm.md) control can be used not only to display the image at the screen. Using special controls it can process user input at the displayed image. For example, it can zoom an image at mouse click, pan it on mouse move, or select a portion of the image. These controls are called *controllers*. There are two kinds of controllers - navigators and rubberbands.
 
Navigator is a control which specifies user to navigate on the image (scroll, or zoom). For example, this control can zoom the image in by the mouse click ([ZoomInNavigator](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_ZoomInNavigator.htm.md)). To associate it with the BitmapViewer, you should use the [Navigator](https://www.graphicsmill.com/docs/gm5/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_Navigator.htm.md) property.
 
Rubberband is a geometric shape which can be added to the BitmapViewer, moved, or resized. Graphics Mill for .NET currently supports only the rectangle rubberband. To associate a rubberband with the BitmapViewer, use the [Rubberband](https://www.graphicsmill.com/docs/gm5/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_Rubberband.htm.md) property.
 
You can associate an user input controller to the BitmapViewer in design time in the following way:
 
1. Find necessary controller at the component toolbox (it should be near the BitmapViewer).
2. Drag it at the form.
3. Open properties of the BitmapViewer.
4. Change the property Navigator to the appropriate navigator control ID and the property Rubberband to the necessary rubberband control ID.

It should be looking similar to the following screenshots:
 
![Visual Studio screenshot](https://www.graphicsmill.com/docs/gm5/AjaxControlsNavigators.png)
 
![Visual Studio screenshot](https://www.graphicsmill.com/docs/gm5/AjaxControlsRubberband.png)
 
You can also modify these properties in the run-time. It is convenient when you are creating the toolbar.
 
Graphics Mill for .NET is shipped with the following controllers:
 
- [!\[PanNavigator icon\](https://www.graphicsmill.com/docs/gm5/PanNavigator.gif) **PanNavigator**](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_PanNavigator.htm.md) - this control is responsible for image panning when mouse left button is pressed and mouse moved.
- [!\[ZoomInNavigator icon\](https://www.graphicsmill.com/docs/gm5/ZoomInNavigator.gif) **ZoomInNavigator**](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_ZoomInNavigator.htm.md) - this control is responsible for zooming the image in when user clicks the mouse button at some image point. The portion of image user clicked at is centered.
- [!\[ZoomOutNavigator icon\](https://www.graphicsmill.com/docs/gm5/ZoomOutNavigator.gif) **ZoomOutNavigator**](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_ZoomOutNavigator.htm.md) - this control is responsible for zooming the image out when user clicks the mouse button at some image point. The portion of image user clicked at is centered.
- [!\[ZoomRectangleNavigator icon\](https://www.graphicsmill.com/docs/gm5/ZoomRectangleNavigator.gif) **ZoomRectangleNavigator**](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_ZoomRectangleNavigator.htm.md) - this control is a combination of the [RectangleRubberband](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_RectangleRubberband.htm.md) and the ZoomInNavigator. When user presses mouse button and start dragging, selection is drawn. When mouse button is released, the image is zoomed to display the selected image portion only.
- [!\[RectangleRubberband icon\](https://www.graphicsmill.com/docs/gm5/RectangleRubberband.gif) **RectangleRubberband**](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_RectangleRubberband.htm.md) - this control is responsible for drawing rectangular selection at the image. You can also edit the rectangle (move or resize). Rectangle resizing may be restricted by fixed proportions which is useful when it is used for cropping selection.
- [!\[VObjectsRubberband icon\](https://www.graphicsmill.com/docs/gm5/RectangleRubberband.gif) **VObjectsRubberband**](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_VObjectsRubberband.htm.md) - this control is responsible for adding vector objects to the image.

 ![Cropping selection screenshot](https://www.graphicsmill.com/docs/gm5/AjaxControlsUsingRubberbandsAndNavigators.png)