User Tools

Site Tools


17.18 ImageView

The ImageView (gb.form) component implements an image viewer.


Figure 17.18.1: Image display in an ImageView.

  • If the image is larger than the display area in the ImageView, scroll bars are automatically displayed. You can move both scroll bars with the mouse. Only the vertical scroll bar reacts to the movements of the mouse wheel when the mouse is over the display area of an ImageView. Context menus exist for both the horizontal and vertical scroll bars of an ImageView.
  • If the UseMouse property is set to True (default), you can move the image in the ImageView by holding down the left mouse button to change the image section - provided that scroll bars are visible.
  • If the grid property has the value True and the zoom factor (data type Float) has an integer value greater than 2, then you will see a fine grid over the image or the image section:


Figure 17.18.1: Image section with grid shown ( zoom factor = 10 )

17.18.1 Properties

The following table describes selected properties of an ImageView:

ImageImageSets the image displayed in the ImageView or returns this image.
GridBooleanFor the value True, a grid is displayed or returned for an integer zoom level greater than 2.
UseMouseBooleanFor the value True the ImageView reacts to mouse events or returns the value.
ZoomFloatSets the zoom factor or returns the zoom factor. For example, the value 2 corresponds to twice the display size of the original image.

Table Properties of the ImageView component

17.18.2 Methods

EnsureVisible ( X As Integer, Y As Integer, W As Integer, H As Integer )Ensures that a specified area of the display area is visible.
ImageToView ( ImagePoint As Point ) As PointConverts an image point from image coordinates to ImageView coordinates.
ViewToImage ( ViewPoint As Point ) As PointConverts a point from ImageView coordinates to image coordinates.
Update ( [ Image As Image ] )Replaces the displayed image in the ImageView with an image passed as an optional argument. The zoom factor is not reset during the update.
ZoomFit ( )Adjusts the image to the size of the ImageView by setting the zoom level internally.

Table Overview of selected methods of the class ImageView

17.18.3 Project 1

In project 1, you are presented with a simple image viewer → Figure 17.18.1. An image in grey tones is displayed as the start image. Via a dialogue (MultiSelect) you can select one picture or several pictures (picture list) in a directory.

  • You can change the zoom factor in the interval from 0.1 to 10 with a step size of 0.1 or 10% with the slider.
  • With a toggle button next to it, you determine whether a grid is displayed or not for an integer value for the zoom factor greater than 2.
  • With a click on another button, the image is displayed completely in the ImageView (ZoomFit method).
  • With the button labelled 1 you can display the image in its original size. In both cases, the current zoom factor is synchronised with the zoom for the slider.
  • Use the two navigation buttons < and > to navigate through the images in the image list. The file name of the current image is displayed in the button box. Each newly displayed image is always shown in its original size.

17.18.4 Project 2

In the second project you can learn about the close relationship between the two components ImageView and ScrollArea:


Figure ScrollArea and ImageView


The website uses a temporary session cookie. This technically necessary cookie is deleted when the browser is closed. You can find information on cookies in our privacy policy.
k17/k17.18/start.txt · Last modified: 01.10.2023 by emma

Page Tools