How to build a custom Internet Explorer (IE) toolbar.
Add button, menu item in C#, VB.NET, C++ for IE6 & IE7.

Add-in Express Home > Add-in Express for Internet Explorer > Online Guide > Creating custom IE toolbars

Develop IE toolbar with custom buttons and menu items

Internet Explorer 6 allows adding custom items to the Tools and Help menus. In addition, Internet Explorer 7 allows adding custom buttons to its toolbar:

Terminology

A command is a button on the Internet Explorer toolbar and / or a corresponding menu item on either of two IE menus: Tools and Help.

To create a new command, you use the Commands property of the add-in module: click the design surface of the module, then choose the Commands property and finally, click the property editor button:

Now, in the property editor dialog, you add a new item and specify its properties. Below we describe two aspects of the newly added item that may be an Internet Explorer toolbar button and / or a menu item.

Adding a custom button to IE toolbar

To add a custom button to the Internet Explorer toolbar (IE 7 only), make sure that the ShowInToolbar property is set to true. The toolbar button must have two icon sets that provide large (20x20 256-color) and normal (16x16 16-color) icons for the active and the default (inactive) button states. When the user's mouse is over a button, it is in the active state. At other times, the button is in the default state.

Note that Add-in Express creates a new project with two sample images. You can think of them as of placeholders. That is, you need to add your images to the resource file and specify them in appropriate properties of a command item.

 
Use the DefaultVisible property to make the toolbar button appear on the Internet Explorer toolbar by default. If the user has customized the IE toolbar, the button will not appear on the toolbar automatically. The toolbar button will be added to the choices in the Customize Toolbar dialog box and will appear if the IE toolbar is reset. See also a short video about how to add a button to IE toolbar.

Adding an IE custom menu item

You can choose any combination of the ShowInToolbar and ShowInMenu property values to test the Internet Explorer UI changes. It is not possible to show an icon for the menu item. The HelpText property specifies a string shown in the Status Bar when the mouse is over the custom menu item. See also a video showing how to add a custom menu item to IE toolbar.

Creating custom Internet Explorer toolbars

To create a custom IE toolbar, you start with adding a toolbar class to your project: choose Project | Add New Item in the menu and find the class template in the Add-in Express Items / Internet Explorer branch.

 
This adds an empty toolbar component to your project:

 
The toolbar is a descendant of UserControl. Additionally, it provides a complete set of Internet Explorer events such as BeforeNavigate2 and DownloadComplete as well as toolbar-related events such as OnBeforeShow and OnBeforeDestroy. The IE module is available via the Module property of the toolbar.

To finish binding the toolbar to your IE add-on, choose the Toolbars property of the IE module, add an item, and set the item's properties.

 
The properties allow you to specify whether the gripper should be shown, the initial position of the IE toolbar, the toolbar title, the text of the menu item bound to the toolbar, as well as the toolbar control itself. A resulting custom Internet Explorer toolbar may have the following look:

 
For the settings shown above, the menu item bound to the toolbar looks like this:

Back to Add-in Express for Internet Explorer homepage