DevCity.NET :: A Simple Photo Browser. Page 4

There are a number of ways in which the thumbnail control we have created could be used. For our Photo Browser Application, we want to be able view thumbnails for all the photos in a specified location; this means we will have to create -instances of our thumbnail control, add event handlers and clear the thumbnails we have created when required - all at runtime.

Adding controls to an application at run-time is pretty straightforward using Visual Basic .NET and can be a very useful technique. All controls in the .NET Framework, including Forms, are derived from the "Control" base class. The Control class contains a "Controls" collection, this collection contains all controls to be displayerd on the control. If you wish to add a control to your application at runtime you create a new instance of the required control and add it to the Controls collection of the relevent control - the process is not unlike populating a TreeView or ListView at runtime except you have to specify the position of your new control manually.

Arranging Thumbnails on a Panel

Before we write any functions add the necessary Imports statements above your form code to give us easy access to the functions we will be using. Add the following at the top of your forms code:

Imports System.IO
Imports System.Drawing

We need access to the file functions and classes in the System.IO namespace and the classes used to define location are in the "System.Drawing".

First, add set of constants to define the size and spacing of the thumbnails when displayed on the controls. By default all control sizes and locations in the .NET framework are defined in pixels, so we will also use pixels to define the layout of our thumbnails. Add the following at class level to your forms code.

    ' Constants to define the size and spacing of our thumbnails
    Const iTNWidth As Integer = 120
    Const iTNHeight As Integer = 120
    Const iHPadding As Integer = 5
    Const iVPadding As Integer = 5

The constants iTHWidth and iTNHeight will be used to define the size of the thumbnails, and iHPadding and iVPadding are used to define the spacing between our thumbnails. Using constants means these values cannot be changed once the application is running and they also make it is easy change how our thumbnails are arranged on the form by simply changing the values in these constants.

The first function we'll add is to set the position of a thumbnail with in a specified scrollable control (a form or panel). We'll pass into the function a reference to the Thumbnail control to be positioned, a reference to the control it is to be positioned on and the number of thumbnails already positioned - we'll use this to calculate the position of the specified thumbnail. By creating our function in this way it will make it easier to reuse this function in any future applications. Add the following function:

Private Sub SetThumbnailPosition(ByRef tnThumbnail As Thumbnail, ByRef cntlThumbnailContainer As ScrollableControl, ByVal iThumbNailNo As Integer)

Dim iColumns As Integer, iRow As Integer, iCol As Integer
Dim iLeft As Integer, iTop As Integer

        ' Calculate the number of thumbnails we can fit across the control
        iColumns = (cntlThumbnailContainer.Width - 30) \ (iTNWidth + iHPadding)
        ' If the number if less then 1, set it to 1 so the thumbnails will always be displayed
        If iColumns < 1 Then iColumns = 1

        ' Calculate the position of our thumbnail in our control in terms of the
        ' row and column of grid of displayed thumbnails
        iRow = (iThumbNailNo \ iColumns) + 1
        iCol = (iThumbNailNo Mod iColumns) + 1

        ' Now calculate the position in Pixels. We use the defined constants to calculate the
        ' position of the thumbnail and add the AutoScrollPosition of the control we are
        ' going to be arranging it on - this is necessary to ensure that the thumbnails are
        ' displayed in the correct location if the control is not currently scrolled to the top
        ' of its available area.
        iLeft = (iCol * iHPadding) + ((iCol - 1) * iTNWidth)
        iLeft += cntlThumbnailContainer.AutoScrollPosition.X()
        iTop = (iRow * iVPadding) + ((iRow - 1) * iTNWidth)
        iTop += cntlThumbnailContainer.AutoScrollPosition.Y()

        ' Set the thumbnails position
        tnThumbnail.Left = iLeft
        tnThumbnail.Top = iTop

End Sub

We will use this function in our application to set the position of any new thumbnail control created and later to rearrange the thumbnails displayed on a panel if it is resized.

Next add the function which we will later use to handle any Thumbnails "ThumbnailDoubleClick" event. Add the following to your code:

    Private Sub OnThumbnailDoubleClick(ByVal sender As System.Object, ByVal e As System.EventArgs)
        Dim tnThumbnail As Thumbnail
        If sender.GetType Is GetType(Thumbnail) Then
            tnThumbnail = DirectCast(sender, Thumbnail)
            picPhoto.Image = Bitmap.FromFile(tnThumbnail.FileName)
        End If
    End Sub

This function will first check if the sender is a Thumbnail control, and if it is load the file specified in the Thumbnails FileName property into the PictureBox on our form. We will use this to display the image represented by any thumbnail that is double clicked on in our PictureBox.