How To Create ToolStrips With Icons
Most of the time, you will use a ToolStrip control for just one thing: Add a strip of buttons with icons. Here's an example of a home-coded editor with a ToolStrip just like that.
--------
Click Here to display the illustration
--------
The documentation at Microsoft tells you about lots of other stuff that is generally just confusing when this is all you want to do. This Quick Tip just gives you the information you need for that one goal.
The first thing you need is an icon. Actually, ToolStrip uses image files, but the conversion is done internally so most people will use an icon file anyway. VB.NET Express doesn't give you much help in creating them. (The default in VB.NET Express opens the really basic Windows Paint program. You can do much better than that.) VB.NET Standard and above include a fairly decent icon editor, but you can still do better. About.com has a full list of icon editors at this link. There's also a list of places where you can download icons at this link. If you need information about what icons are, here's a link to About.com's article about that. What is an ICON File?.
If you like, you can select any image, even a favorite photo, but since the icons in a Toolstrip are fairly small, large and detailed image files usually don't work well and they can add an incredible amount of bulk to the size of your finished program. Icon files aren't supported directly either, but they work well enough for this and they're the right size.
Once you have an icon ... we'll assume it's a file with the extension ".ico" ... you're ready to create a ToolStrip. Add the ToolStrip control to your form and check out the Properties. You'll see a Collection property called called Items there. That's where the individual buttons are added to the ToolStrip. You can add things like Comboboxes and Progress Bars too and the process is almost identical but we'll assume you're adding Buttons. You can also do all of this in code at run time rather than in VB.NET at design time as well. We'll assume that you want to do it at design time. This makes your program load faster but the icons themselves are saved as part of the program executable file.
Clicking the ellipsis in the Items property of the ToolStrip opens the Items Collection Editor. Click the Add button with Button selected in the dropdown and you have your first button added to the ToolStrip.
--------
Click Here to display the illustration
--------
The icons themselves are stored in the Image property of each element in the ToolStrip Items collection. There's another ellipsis button on that property that opens another tool, "Select Resource".
--------
Click Here to display the illustration
--------
A resource in VB.NET can be a lot of different things in addition to an icon image. For example, it could be a string or even an audio file. You can read more about resources in VB.NET at this link. In this article, we'll only cover image files.
The Resource Context can be a source of confusion. You have two choices: Local Resource or Project Resource File. In this example, this choice controls whether the icons are contained in a resource file (a .resx file) for the form or one for the whole project. You can also use resource files for a lot of other things and resources can also be linked or embedded. To keep things simple, use the Local Resource default. When you click the Import button, a file dialog opens that lets you browse to the file where your icons are stored so you can add the icon. To "see" icon files, you have to select "All Files" in the file type dropdown.
In this case, the icon is actually stored as an embedded resource in the form .resx file itself. It can help to understand what's going on to actually look at the resources in a resource file. The resource file itself is an XML file and an embedded resource is stored as a serialized string like this:
<data name="ToolStripButton1.Image" type="System.Drawing.Bitmap, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64"><value>iVBORw0KG ... entire value isn't shown ... SUVORK5CYII=</value></data>
This is probably the best option for ToolStrip icons because they simply become part of the code for the form.
If you add the resource to the Project Resource File, by default, the file is added to your project and a link is stored in the resource file. In this case, the link looks like this for an icon named print.ico.
<data name="print" type="System.Resources.ResXFileRef, System.Windows.Forms"><value>..\Resources\print.ico;System.Drawing.Bitmap, System.Drawing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a</value></data>
For project resources, you can edit them in the project Properties, Resources tab as well. For a ToolStrip in a form, you can get your project in an invalid state by editing them this way so it's best to stick to editing them using the form properties.