The PictureBox class (gb.qt4) implements a control element for displaying a picture → Chapter 23.4.3 Picture class.

Dim hPictureBox As PictureBox
hPictureBox = New PictureBox ( Parent As Container )  As "event name"

A new PictureBox is created. The Parent parameter specifies the container into which the PictureBox is inserted.

The following selected properties are interesting for the use of a PictureBox:

Table 23.4.4.2.1: Selected properties of the PictureBox class

An image is displayed in a PictureBox in the project. The paths of selected images are loaded from a data carrier in a dialogue (MulitSelect) and saved in an array.

Figure 23.4.4.3.1: Display of a loaded image in a PictureBox

Source code snippet:

[1] ' Gambas class file
[2]
[3] Private sImagePaths As String[]
[4] Private iPictureIndex As Integer
[5]
[6] Public Sub Form_Open()
[7]   FMain.Center()
[8]   FMain.Utility = True '-- Minimum window
[9]   FMain.Text = "Dialog.OpenFile(True)  Multi-Select"
[10]
[11]   PictureBoxD.W = 512 '-- Start value only for picture format 4:3
[12]   PictureBoxD.H = 384 '-- Start value only for picture format 4:3
[13]   PictureBoxD.Border = Border.Solid
[14]   PictureBoxD.Alignment = Align.Center
[15]   PictureBoxD.Stretch = True
[16]   PictureBoxD.Padding = 6
[17]   PictureBoxD.Background = &FFFFFF
[18]   PictureBoxD.Picture = Picture["Symbols/intro.jpg"]
[19]
[20]   SetEnabled()
[21] End
[22]
[23] Public Sub btnOpenFileImage_Click()
[24]   OpenFileImage()
[25] End
[26]
[27] Public Sub btnNext_Click()
[28]   GoNext()
[29] End
[30]
[31] Public Sub btnPrevious_Click()
[32]   GoPrevious()
[33] End
[34]
[35] Public Sub btnClose_Click()
[36]   PictureBoxD.Picture = Null
[37]   Wait 0.5 '-- For visual control only: Empty the PictureBox
[38]   FMain.Close()
[39] End
[40]
[41] '---------------------------------------------------------------------------------------------------
[42]
[43] Private Sub OpenFileImage()
[44]   Dim sMessage1, sMessage2 As String
[45]
[46]   Dialog.Title = "Select image files (image list)..."
[47]   Dialog.Filter = ["*.png;*.jpg;*.gif;*.jpeg;*.svg;*.ico", " Image files ", " * ", " All files"]
[48]   Dialog.ShowHidden = False
[49]   Dialog.Path = Application.Path &/ "Images"
[50]
[51] ' Select images on a data carrier (True -> Multiselect activated)
[52]   If Dialog.Openfile(True) Then
[53]      Return
[54]   Endif
[55]
[56]   SetEnabled()
[57]   sImagePaths = New String[] '-- New picture list
[58]   sImagePaths = Dialog.Paths '-- Save image list (navigation)
[59]   iPictureIndex = 0
[60]   PictureBoxD.Picture = Picture.Load(Dialog.Paths[0]) '-- Display of the first image
[61]
[62]   sMessage1 = "The image list contains exactly" & Dialog.Paths.Count & " Image"
[63]   sMessage2 = "The image list contains " & Dialog.Paths.Count & " Images"
[64]   FMain.Text = IIf(Dialog.Paths.Count = 1, sMessage1, sMessage2)
[65]
[66] ' Switch on image navigation if the image list contains more than one image
[67]   If Dialog.Paths.Count > 1 Then
[68]      btnNext.Enabled = True
[69]   Else
[70]      btnNext.Enabled = False
[71]   Endif
[72]
[73]   Catch
[74]     Message.Info(Error.Text)
[75] End
[76]
[77] Private Sub GoNext()
[78]   If iPictureIndex < sImagePaths.Count
[79]      Inc iPictureIndex
[80]      If iPictureIndex = 1 Then btnPrevious.Enabled = True
[81]      If iPictureIndex = sImagePaths.Max Then
[82]         PictureBoxD.Picture = Picture.Load(sImagePaths[iPictureIndex])
[83]         btnNext.Enabled = False
[84]         Return
[85]      Endif
[86]      PictureBoxD.Picture = Picture.Load(sImagePaths[iPictureIndex])
[87]    Endif
[88] End
[89]
[90] Private Sub GoPrevious()
[91]   If iPictureIndex < sImagePaths.Count
[92]      Dec iPictureIndex
[93]      If iPictureIndex = sImagePaths.Max - 1 Then btnNext.Enabled = True
[94]      If iPictureIndex = 0 Then
[95]         PictureBoxD.Picture = Picture.Load(sImagePaths[iPictureIndex])
[96]         btnPrevious.Enabled = False
[97]         Return
[98]      Endif
[99]      PictureBoxD.Picture = Picture.Load(sImagePaths[iPictureIndex])
[100]    Endif
[101] End
[102]
[103] Private Sub SetEnabled()
[104]   btnPrevious.Enabled = False
[105]   btnNext.Enabled = False
[106] End

Comment:

• In line 8, the utility property of Form is set to True. This ensures that the window does not have smaller dimensions than the form in the Gambas IDE.
• Tested properties for the PictureBoxD are defined in lines 11 to 18.
• With PictureBoxD.Alignment = Align.Center and PictureBoxD.Stretch = True, the image to be displayed is adjusted from the centre to the width and height of the PictureBoxD and displayed. Attention: The stretching is not true to scale!
• With the properties PictureBoxD.Padding = 6 and PictureBoxD.Background = &FFFFFF a narrow white border is placed around the picture to be displayed.
• Formats for the images (PNG, JPEG, JPG, GIF, ICO, SVG, BMP and XPM) that can be safely converted into a picture can also be seen in the dialogue filter in line 46. Animated GIF images, for example, are not displayed animated. This is only possible in a MovieBox → Chapter 23.4.5 MovieBox.
• Before displaying, the current image is loaded from the data carrier and assigned to the PictureBoxD.Picture property → lines 60, 82, 86, 95 and 99.
• So that no white area is displayed in the PictureBoxD when the programme starts, a discreet start image is inserted → line 18:

Figure 23.4.4.3.2: Start image (intro.jpg)

The Picture property of PictureBox only returns a copy of the internal picture. This means that

PictureBox.Picture

is a different Picture object than the one displayed in the PictureBox - but with the same content. If you clear the copy with your Clear() method, this has no effect on the Picture in the PictureBox. This means that the instruction

PictureBox.Picture.Clear()

is not sufficient to clear the PictureBox. You can do this with :

PictureBox.Picture = NULL