Visual Basic Graphics | Lesson 1

This lesson and most other lessons assume that you know how to create a project and set the various properties for forms and controls. If you were a complete novice you probably wouldn't have found this site.

Objective: Create a form using Visual Basic.net in order to display photos that you have in a folder.

Create a new project and name it anything you like. After the project loads resize your form to a size large enough to handle your photos. I like to display the photos in a picture box that is 640x480. This normally is large enough to give plenty of detail to your photos even if they are larger than this.

Place a picturebox control on the form.
Place 2 buttons on the form.

You may change the name property for these controls to whatever you like. I use pxb and btn as prefixes for pictureboxes and buttons respectively. I would recommend pxbPhoto, btnNext, and btnPrevious. 

Set the text properties for each button to Next and Previous so that the user will see these names on the buttons.

Next set the following properties for the Picture Box Control:
Size: 640,480
SizeMode: StretchImage

The StretchImage value will resize the image to the size of the Picture Box. Make sure that you set the Size of the picturebox to a ratio of the picture size. Such as 2:1, 3:1 etc.

After you complete this lesson experiment with changing the sizemode values to see what happens.

Double click on the FolderBrowserDialog control in the Toolbox. I don't normally rename this control because I usually place just one of them on a form.

Add the following import statements to the top of the code page, above the Class Name:

Imports System.IO
Imports System.Drawing

Put the following statements after the Class Name but before the first routine:

Dim PhotostoView As New SortedList
Dim NextPhotoNumber As Integer

These two statements will initialize the variables for global use in the program.

Add the following code to the forms load event:
 
Me.FillPhotoList(Me.GetPhotostoView)
Me.NextPhotoNumber = -1

The first statement will attempt to call the FillPhotoList routine by first going to the GetPhotostoView routine in order to pass the PhotoFilePath to the FillPhotoList.
It will then set the NextPhotoNumber to 0.

Add the following sub-routine to your code.:

Private Sub FillPhotoList(ByVal PhotoFilePath As String)

     Dim items() As String items = Directory.GetFiles(PhotoFilePath, "*.jpg")

     For Each item As String In items
          Me.PhotostoView.Add(item, item)
     Next

End Sub

PhotoFilePath is a value that is set when you select the folder in the FolderBrowserDialog and is passed to the sub-routine when it is called.

Dim items() as string tells the designer that you want items() to hold multiple items. You can change items() to anything you like.

The next line of code will search the folder that is selected from the folder browser dialog and add them to the items() variable. This code assumes that your photos all have the .jpg extension.

The for each statement will go through each item and add them to the sorted list and prepare it for use by the picture box and buttons in order to display your photos. The sorted list keeps items in order based on the key. The first 'item' the statement .Add(item,item) is the key that is being add to the sorted list. This keeps the photos in order. The second 'item' is the actual value that is being added.

Next add the following function to the code designer:

Public Function GetPhotostoView() As String

     Me.FolderBrowserDialog1.Description = "Select Folder of the Photos you wish to view."
     Me.FolderBrowserDialog1.ShowDialog()
     Return Me.FolderBrowserDialog1.SelectedPath

End Function

The first line sets the text on the FolderBrowserDialog.
The second line shows the dialog box so that you are able to select the folder that your photos are in.
The third line returns the selected path to the calling routine.

Double click on the Next button on the form and insert the following code into its click event handler:

 

Me.NextPhotoNumber += 1

If Me.NextPhotoNumber > Me.PhotostoView.Count - 1 Then
     Me.NextPhotoNumber = Me.PhotostoView.Count - 1
End If

Me.DisplayImage()

The first line sets the NextPhotoNumber.
The If-Then statement checks the NextPhotoNumber to make sure that it is in the range of available photos in the sorted list.
The last line will call the routine to display the Photo.

Double click the Previous button and enter the following code in the buttons click event handler.

Me.NextPhotoNumber -= 1
If Me.NextPhotoNumber < 0 Then
     Me.NextPhotoNumber = 0
End If

Me.DisplayImage()

Finally add the following routine to your code:

Private Sub DisplayImage()

Dim img As Image = Image.FromFile(Me.PhotostoView.GetByIndex(Me.NextPhotoNumber)) Me.PictureBox1.Image = img

End Sub

The first line of code will initialize an Image variable and set its value based on the next photo in the sorted list.
The next line will display the selected image in the picturebox.

After you have completed this lesson you will have a functioning Photo Viewer.

Do you have a small business that needs custom software to operate efficiently and at a reasonable price? If so then contact develop@kalzar.com.


Search the Web

Home
Forms
Controls
Files
Graphics
Printing


Search the Web