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

Add-in Express™
for Internet Explorer® and Microsoft® .net


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

How to create a custom IE toolbar - Flash videoInternet Explorer 6 allows adding custom items to the Tools and Help menus. In addition, Internet Explorer 7 allows adding custom buttons to its toolbar:

Custom toolbar in IE 7

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:

IE Module properties

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.

Setting the ActiveIcon property
 
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.

Customizing Internet Explorer command bar via a context menu

Customizing the Toolbar dialog

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.

 Custom command in the IE Help menu

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.

Custom Internet Explorer Toolbar item
 
This adds an empty toolbar component to your project:

IE Toolbar component descends from UserControl.
 
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.

Binding the IE Toolbar component to a Toolbar item - an item in the Toolbars collection of the IE module
 
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:

Custom IE toolbar in action
 
For the settings shown above, the menu item bound to the toolbar looks like this:

Hiding / showing the custom IE toolbar in the View | Toolbars menu
 

Programming Internet Explorer addons <<

>> Building Explorer bars and context menus

Back to Add-in Express for Internet Explorer homepage




Client login

 

Login 

Password 

 

Remember me

Forgot my password