Imagelist Toolbar

New Page 1

Page 1 of 11

ImageList Introduction The Image List control allows you to add images to your program, which you can use in the other Common Controls (Toolbar, TreeView, ListView etc). To add the ImageList control to your VB project, click Project|Components, and check the box next to Microsoft Windows Common Controls x.x where x is the version of Visual Basic you are using.

Build ImageList


Display the first form. In the Toolbox, click ImageList and click the form




In the Properties window, change its name to imgLarge Change the ImageSize to 32, 32 Click the ellipsis button of the Images field on Property





New Page 1


















Page 2 of 11

In Image Collection Editor, click Add Locate the folder that contains the current project and display it in the Look In combo box Select Babies.ico and click Open In the same way, add the other pictures in the following order: Teens.ico, Women.ico, Men.ico, and Misc.ico Click OK In the Toolbox, click ImageList and click the form In the Properties window, change its name to imgSmall In the Properties window, click the ellipsis button of the Images field In Image Collection Editor, click Add Select Babies.ico, Teens.ico, Women.ico, Men.ico, and Misc.ico Click OK

Using ImageList: get picture from ImageList by Index

Practical Learning 1: display pictur from ImagelIst Build 1 form with Pictue box Picture1 and ImageList ImageList1 Write code on button Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

New Page 1

Page 3 of 11

PictureBox1.Image = ImageList1.Images(0) End Sub

Practical Learning 2: Using Imagelist to store flag Image

Practical Learning 3: Use an ImageList control to animate a series Diplay a rorating moon with 8 icons from library:

Create your icon picture 1. To create an icon, on the main menu, click Project . Add New Item... In the Add dialog box, click Icon and click New 2. In the Properties window, change the Filename to Babies.ico and design the icon as follows:

New Page 1

Page 4 of 11

3. Right-click a white area in the main window and click New Item Type... In the New Icon Image Type dialog box, make sure 16x16, 16 colors is selected and click OK

4. 5. Design the icon as follows:

New Page 1

Page 5 of 11

6. To create another icon, on the main menu, click Project . Add Resource...In the Add Resource dialog box, click Icon and click New 7. In the Properties window, change the Filename to Teens.ico and design it as follows:

8. As done above, display the New Icon Image dialog box and select 16x16, 16 colors 9. Design the icon as follows:

10. To create another icon, on the main menu, click Project . Add Resource...In the Add Resource dialog box, click Icon and click New 11. In the Properties window, change the Filename to Women.ico and design it as follows:

New Page 1

Page 6 of 11

12. As done above, display the New Icon Image dialog box and select 16x16, 16 colors 13. Design the icon as follows:

14. In the Properties window, change the Filename to Men.ico and design it as follows:

15. As done above, display the New Icon Image dialog box and select 16x16, 16 colors 16. Design the icon as follows:

New Page 1

Page 7 of 11

17. In the Properties window, change the Filename to Misc.ico and design it as follows:

18. As done above, display the New Icon Image dialog box and select 16x16, 16 colors 19. Design the icon as follows:

.NET Controls: The Toolbar Overview of the Toolbar Introduction

New Page 1

Page 8 of 11

The toolbar is a very popular and much-used addition to a programme. It's difficult to think of a piece of software that doesn't make use of them. VB.NET lets you add toolbars to your forms, and the process is quite straightforward. Let's see how it's done:

Adding a Toolbar Either start a new Windows project, if your prefer (or have just joined us), or keep the one you currently have from the previous section. To add a toolbar to the top of your form, expand the Toolbox and locate the Toolbar control (you may have to scroll down to see it.) Double click the Toolbar control, and it will be added to the top of your form. However, there's not much to see, at the moment. Toolbars work by adding buttons and images to them. The button is then clicked, and an action performed. Click on your Toolbar to select it. In the property box for the Toolbar, you'll notice that it has the default Name of ToolBar1. We'll keep this Name. But locate the Buttons (Collection) property, and click the button with the three dots in it. This brings up the ToolBarButton Collection Editor. To add a new button to your toolbar, click the Add button:

New Page 1

Page 9 of 11

Each button on the toolbar has it's own properties and methods. The button you have just added has a default Name of ToolBarButton1. This is not terribly descriptive. What we're going to do is add three toolbar buttons: one to create a new file, one to open a file, and one to save a file. So,







Click the Name property and change it to tbrFileNew Click Add to create a second button Change the Name of this to tbrFileOpen Add a third button and change the Name property to tbrFileSave Then click OK Your toolbar will look like this:

The buttons, however, might look a bit small. You can change the height and width of them by clicking the Toolbar control to select it. Then locate the ButtonSize property in the properties box.

Adding Images to your Toolbar Buttons

New Page 1

Page 10 of 11

Setting from Image property

Adding other controls to your Toolbar Buttons From dropdownlist

Coding for your Toolbar Buttons The same to menu coding

Practical Learning 1: write a flag application.

New Page 1

Page 11 of 11