Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  .NET Newbie  »  A Simple Photo Browser  »  Creating a Thumbnail Control - Properties and Events
 »  Home  »  Windows Development  »  A Simple Photo Browser  »  Creating a Thumbnail Control - Properties and Events
 »  Home  »  Windows Development  »  Win Forms  »  A Simple Photo Browser  »  Creating a Thumbnail Control - Properties and Events
A Simple Photo Browser
by Chris Mills | Published  04/14/2006 | .NET Newbie Windows Development Win Forms | Rating:
Creating a Thumbnail Control - Properties and Events
Properties and Events

To be able to use our thumbnail control effectively we need to add properties and events.  Fortunately, properties like the control's size are all managed by the UserControl base class.  We only need to add any extra ones we want.  We'll add one property to our control to allow the user to get or set the filename of the thumbnail to be displayed.  This is shown below:

     Public Property FileName() As String
        Get
            Return strFileName
        End Get
        Set(ByVal Value As String)
            strFileName = Value
            DrawThumbnail()
        End Set
    End Property

This property will return the value of the string "strFileName" which is the private variable used to store the filename.  If a new filename is assigned to the property it will assign it to the variable strFileName then redraw and display the thumbnail, using the DrawThumbnail function.

Next we'll add a resize event handler so that our thumbnail will redraw its image to fit the available space after the control is resized.  Most of the work involved in resizing our thumbnail control will be handled automatically because we assigned Dock properties to all the constituent controls.  However when the control is resized, it would be a good idea to regenerate the thumbnail to ensure it still fills the PictureBox nicely.  You can add an event handler to a custom control in the same way as you would a form; I set up my resize event handler as shown below:

    Private Sub Thumbnail_Resize(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Resize
        DrawThumbnail()
    End Sub

For our control to be useful, it must be able to respond to actions like being clicked on.  The UserControl base class has an extensive set of built in events.  However these events are only raised if they happen to the UserControl and not any controls which happen to be added to it.  As our control is entirely filled with controls, some of these built in events, like the "OnClick" event, will never fire.  To get around this we're going to add our own events to the control.  I added three which I named "ThumbnailMouseDown", "ThumbnailClick" and "ThumbNailDoubleClick".  For ease of use these events have the same parameters as the events raised by the built in .NET controls.  To define these events add the following declarations at class level to your code.

    Public Event ThumbnailMouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs)
    Public Event ThumbnailDoubleClick(ByVal sender As Object, ByVal e As System.EventArgs)
    Public Event ThumbnailClick(ByVal sender As Object, ByVal e As System.EventArgs)

To raise the events we have just defined we'll add event handlers to our control to respond to click, double click and mouse down events on either the Label or PictureBox.  These event handlers will in turn raise one the events we have just defined.  One of the nice features of Visual Basic.NET is that it allows one event handler to handle the events raised by more than one control.  We can use this to create one event handler that will handle the events raised by both the Label and PictureBox.  The Click and double click event handlers are added as shown below.

Private Sub Control_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lblFileName.Click, picThumbnail.Click
        RaiseEvent ThumbnailClick(Me, e)
    End Sub

    Private Sub Control_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles lblFileName.DoubleClick, picThumbnail.DoubleClick
        RaiseEvent ThumbnailDoubleClick(Me, e)
    End Sub

We pass "Me" - which represents the instance of the control that raised the event - to the event handler functions as the sender so that the user of the control can identify the control which raised the event.  We are also passing System.EventArgs generated by the constituent controls; this may seem unnecessary but by making our event have the same parameters as all the standard .NET controls it will allow the user of the control to use the one event handler to handle events from our thumbnail control and any other standard .NET control.

The MouseDown event is a little trickier.  MouseDown events are commonly used to get the position over a control where the mouse was clicked, typically so a popup menu can be displayed.  For our control's MouseDown event to behave as expected the event handler must be passed the coordinates of the mouse relative to the entire thumbnail control, not the constituent controls (i.e. the PictureBox or Label).  We get around this problem by adding the position of the control on which the MouseDown event occurred to the coordinates received by the event handler before raising the ThumbnailMouseDown event, as shown below:

    Private Sub Control_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles lblFileName.MouseDown, Panel1.MouseDown
        Dim eNew As System.Windows.Forms.MouseEventArgs
        ' Convert the sender to a Control so we can access its position
        Dim c As Control = DirectCast(sender, Control)
        'Create the new MouseEventArgs
        eNew = New System.Windows.Forms.MouseEventArgs(e.Button, e.Clicks, e.X + c.Top, e.Y + c.Left, e.Delta)
        RaiseEvent ThumbnailMouseDown(Me, eNew)
    End Sub

Overloading the Constructor

Finally we'll overload the constructor of our control so we can pass in the filename of the thumbnail to be displayed.  An object's constructor is the code that is run when an object is created and are used to initialise the object.  We will overload the constructor of our control so that we can specify the filename for our thumbnail to draw when it is created - this will save coding when we start using our control later.  Add the following function:

    Public Sub New(ByVal strFN As String)
        MyBase.New()
        'This call is required by the Windows Form Designer.
        InitializeComponent()
        'Initialize our thumbnail control
        strFileName = strFN ' assign the filename for the thumbnail
        DrawThumbnail() ' draw it
    End Sub

The "MyBase.New" and InitializeComponent() calls are required because we are using the UserControl base class, then we simply assign "strFileName" to the filename passed in and draw the thumbnail.  That is the control ready for use! 

Using the Completed Thumbnail Control

You can use this control in any of your projects by adding the Thumbnail control source code to it.  Alternatively you can create a UserControl project that contains the finished thumbnail control and compile it to a DLL.  You may then either add the compiled user control to any of your projects as a reference or add it to your toolbox and use it in the Visual Studio IDE.

Sponsored Links