Visual C++ .Net Controls: Image Lists

Introduction

A bitmap is a computer picture that is used to display a graphic object in an application.

  1. Start Microsoft Visual Studio .NET
  2. On the Start Page, click New Project (alternatively, on the main menu, you can click File -> New -> Project...)
  3. On the New Project dialog box, in the Project Types tree list, click Visual C++ Projects
  4. In the Templates list, click Managed C++ Empty Project
  5. In the Name edit box, replace the <Enter name> content with Bitmap Design and Nothing Else
  6. In the Location combo box, accept the suggestion or type your own. If you don't have any, type C:\Programs\MSVC.NET
  7. Click OK

Bitmap Design
  1. To create an icon, on the main menu, click Project -> Add Resource...
  2. In the Add Resource dialog box, click Bitmap:
     
  3. Click New
  4. While the new icon is still selected, on the Properties window, click Height and type 32
  5. Click Width and type 32
  6. Click Filename, type Belgium and press Enter. Notice that an extension was added to the file name.
     
    If the Image Editor toolbar is not displaying, on the main menu, click View -> Toolbars -> Image Editor
     

     
    If the Colors window is not displaying, on the main menu, click Image -> Show Colors Window
     
  7. On the Image Editor toolbar, click the Rectangle Tool button.
  8. On the Colors window, click the silver button (2nd column, 2nd row)
  9. On the drawing area, draw a rectangle as follows:
     
  10. On the Image Editor toolbar, click the Fill Tool button
  11. On the Colors window, click the red color (3rd column, 2nd row)
  12. Click inside of the drawn rectangle
  13. On the Image Editor toolbar, click the Filled Rectangle Tool button.
  14. On the Colors window, click the yellow color (4th column, 2nd row).
  15. Draw a rectangle as follows (if you make a mistake, to modify the color of one of the areas, change the color using the Colors window):
     
  16. On the Colors window, click the black color (1st column, 1st row)
  17. Draw a rectangle as follows:
     
  18. To create an equivalent smaller bitmap, on the main menu, click Project -> Add Resource...
  19. On the Add Resource dialog box, double-click Bitmap.
  20. On the Properties window, click Filename and type Belgium16
  21. Click Height and type 16
  22. Click Width and type 15
  23. On the Image Editor toolbar, click the arrow of the Magnification Tool and click 8x
  24. On the Image Editor toolbar, click the Filled Rectangle button.
  25. On the Colors window, click the red color.
  26. Using the Filled Rectangle Tool, draw the new flag as follows:
     
  27. To save the bitmap, click the Save All button
  28. To create a new bitmap, on the main menu, click Project -> Add Resource...
  29. In the Add Resource dialog box, double-click Bitmap.
  30. On the Properties window, click Filename. Type Diamond and press Enter
  31. Click Height and type 31
  32. Click Width and type 31
  33. On the Image Editor toolbar, click the arrow of the Magnification Tool and click 8x
  34. On the Image Editor toolbar, click the Line Tool button 
  35. In the Colors window, click the blue color (7th column, 2nd row)
  36. In the drawing area, , click the top middle pixel and drag right and down for an angle of 45˚ for 7 boxes. Release the mouse
  37. Click the same top blue box and drag left and down at 45˚ for 7 boxes:
     
  38. Still using the Line Tool, draw a diamond under the first one as follows:
     
  39. On the Colors window, click the red color (3rd column, 2nd row).
  40. Draw a red figure as follows:
     
  41. Using the blue and the red colors, design the other diamonds as follows:
     
  42. On the Image Editor toolbar, click the Fill Tool button .
  43. Using the red and blue colors, fill the areas of the bitmap as follows:
     
  44. Save the bitmap
  45. To create a new bitmap, on the main menu, click Project -> Add Resource…
  46. Double-click Bitmap and zoom for 8x ratio
  47. Save the bitmap as Feather and change its dimensions to 32 x 32
  48. On the Colors window, click the navy color (5th column - 1st row)
  49. On the Image Editor toolbar, click the Curve Tool.
  50. In the drawing area, position your mouse on the top right corner 3 pixels from the right border and one pixel from top.
  51. Click and drag down and left to draw a diagonal line to stop at 3 pixels from the left border and 1 pixel from the bottom border:
     
  52. While the curve is still selected, click the 3rd pixel from left and 1st from top as follows:
     
  53. As the curve is still continuing, to smooth the curved line, click somewhere in the middle left section as follows:
     
  54. With the Curve Tool still selected, draw the same diagonal line you drew earlier:
     
  55. Click the 3rd pixel from right and the bottom borders:
     
  56. Click somewhere in the middle center of the icon:
     
  57. While the Curve tool is selected, draw one more diagonal line similar to the previous ones:
     
  58. To make the line curved, click somewhere in the middle top section of the icon:
      
  59. Click somewhere in the Center left section of the icon to complete the curved middle line:
     
  60. To decorate the bitmap, use the Line Tool and draw a few short lines from both borders of the bitmap
     
  61. Using the Fill Tool, add a green background to the icon:
     
  62. Save All
 
Home Copyright © 2002-2004 FunctionX, Inc.