Home

Icons

 

Introduction

An icon is used to display graphics on window objects. While a picture can have any dimension, the size of an icon is limited. This is because icons assume different roles on an application.

Icons are used to represent folders in Windows Explorer and My Computer:

Windows Explorer or My Computer
     

Creating Icons

To create an icon, you can use any application that has the capability. Normally, you can use Microsoft Visual Studio 2005 to create or design an icon. To do this, on the main menu, you can click Project -> Add New Item... In the Templates list, you can click Icon, give it a name, and click Add. You would then receive a platform to design an icon.

When you start designing an icon, you would be presented with a drawing area whose dimensions are 32 x 32 pixels. This is the size of the icon that displays as Large Icon. Here is an example from the New File dialog box of Microsoft Visual Studio 2005 in the Templates list:

Add New Item

In some cases, you may allow the user to display smaller icons, which are 16x16 pixels:

Add New Item

To make this possible, you can associate a second icon to the 32x32 one. The application you use to design your icon should make it simple for you to add this second icon. To do this in Microsoft Visual Studio 2005, while the icon is displaying:

  • On the main menu, you can click Image -> New Image Type...
  • You can right-click an empty area in the icon window and click New Image Type...

When the New Icon Image Type dialog box comes up, you can click 16x16, 16 colors and click OK. Whether you create only one or both versions of the icon, both are stored in a single file whose extension is .ico

Practical LearningPractical Learning: Introducing GDI+ Resources

  1. Start Microsoft Visual Basic and create a new Windows Application named Resources1
  2. On the main menu, click Project -> Add New Item...
  3. In the Templates list, click Icon File
  4. Set the name to diamond and click Add
  5. On the main menu, click File -> Save diamond.ico As...
  6. Locate and display the bin sub-folder of your project
  7. Double-click Debug to select that folder
  8. Click Save
  9. If the Colors window is not displaying, on the main menu, click Image -> Show Colors Window.
    On the Colors window, click the small green monitor Monitor
  10. On the Image Editor toolbar, click the Erase Tool Erase and wipe the whole drawing area
  11. On the Image Editor toolbar, click the Line button Line
  12. In the Colors Palette, click the blue color
  13. In the empty drawing area, count 15 small boxes from the top left to the right. In the 16th box, click and drag right and down for an angle of 45˚ for 7 boxes. Release the mouse
  14. Click the next small box on the right side of the top blue box then drag left and down at 45˚ for 7 boxes:
     
    Icon Design
  15. Using the tools of Image Editor toolbar, complete the design as follows:
     
    Icon Design
  16. To design the 16x16 pixel version of the icon, right-click a white area in the drawing section and click New Image Type
  17. In the New Icon Image Type dialog box, click 16x16, 16 Colors if necessary and click OK
     
    New Icon Type
  18. Design the icon as follows:
     
    Icon Design: Diamond
  19. Save the file

Using an Icon

To support icons, the GDI+ library provides the Icon class, which is defined in the System.Drawing namespace. To use an icon in your application, you can first declare a variable of type Icon using one of the class' constructors. If the icon is stored in a file, the simplest constructor to use has the following syntax:

Public Sub New(fileName As String)

With this constructor, the name of, or the path to, the icon file is passed as argument.

After creating the icon, if you want to use only one size version, you can use one the following constructors to declare the variable:

Public Sub New(original As Icon, size As Size)
Public Sub New(original As Icon, width As Integer, height As Integer)

After initializing an Icon variable, if you want to get its dimensions, you can access its Width and its Height properties, or its Size property.

As mentioned already, there are various ways an icon can be used. For example, you can display it in a control by drawing it. To do this, you can call the Graphics.DrawIcon() method which is overloaded with two versions whose syntaxes are:

Public Sub DrawIcon(icon As Icon, targetRect As Rectangle)
Public Sub DrawIcon(icon As Icon, x As Integer, y As Integer)

The first version allows you to specify the location and dimensions of the icon. Here is an example of calling it:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()

        End Sub

        Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim ico As System.Drawing.Icon = New Icon("sample.ico")
            Dim graph As Graphics = CreateGraphics()
            graph.DrawIcon(ico, New Rectangle(10, 10, 42, 42))

        End Sub
    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

The second version allows you to specify only the location of the icon.

Practical Learning Practical Learning: Using an Icon

  1. Display the form and double-click the middle of its body
  2. To display the icon in the title bar, implement the event as follows:
     
    Private Sub Form1_Load(ByVal sender As System.Object, _
                               ByVal e As System.EventArgs) _
                               Handles MyBase.Load
            Dim icoMain As Icon = New Icon("diamond.ico")
            Icon = icoMain
    End Sub
  3. Execute the application
     
    Icon
  4. Close the form and return to your programming environment
 

Home Copyright © 2008-2012 FunctionX