Develop custom IE toolbar for IE6 - IE8 . Add
Internet Explorer button, menu item in C#, VB.NET, C++.
Add-in Express™ |
|
Provider
|
IE 6 |
IE 7 |
IE 8 |
Other aspects |
|
No |
Yes |
Yes |
You can add a button and/or menu item. No dropdowns, toggle buttons |
|
No |
Yes |
The controls are mapped to the Tools menu |
Buttons, dropdowns, toggle buttons |
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:
With Add-in Express for Internet Explprer, you can create a custom IE6, IE7 and IE8 toolbar button and menu item in VB .NET, C# and managed C++.
See the most recent video sample on Add-in Express blog:
How to create an add-on for IE6, IE&, IE8 in one project: custom toolbar and buttons
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:
To create a new command, in the Properties window for the IE module, use the collection designer of the Commands property of the IE module. Note that Internet Explorer 6 supports adding custom items to the Tools and Help menus only.
Before we start, you may want to download an example of IE add-on in C# and VB.NET with source code.
Adding a custom button to IE toolbar
In the Commands property editor, you add an item and specify its properties. Note that every item allows creating a button and / or menu item for the Help or Tools menu at the same time. To create a custom toolbar button (IE7 and IE8 only), make sure that the ShowInToolbar property is set to true.
The IE toolbar button must refer to two .ico files providing large and normal images for the active and default (inactive) button states (see Toolbar Button Style Guide on MSDN). Note that Add-in Express for Internet Explorer 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. The DefaultVisible property specifies if your custom button appears on the Internet Explorer toolbar by default. If the user has customized the IE toolbar, your custom button will not appear on the toolbar automatically. The IE toolbar button will be added to the choices in the Customize Toolbar dialog box and will appear if the toolbar is reset. See also a short video about how to add a button to IE toolbar.
Adding custom controls onto the standard IE toolbar
IE7 and IE8 allow adding buttons only on the Command Bar toolbar. Add-in Express enables IE7 developers to show buttons, toggle buttons and dropdowns on the toolbar (for IE8, see the note below). You choose the Add Commands command of the IE module in the context menu of its designer surface. This adds an ADXIECommands component to the module; you add your controls to the editor of its Controls collection.
You specify two ImageLists (just drop them onto the module) in the LargeImages and NormalImages properties of the ADXIECommands component. You can use any image formats in these ImageLists; normal images must be 16x16, large ones must be 20x20. The transparency color of the images is the color of the bottom left pixel.
Note. In IE8, the top level items specified in the ADXIECommands component are mapped to appropriate items in the Tools 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.
This adds an empty toolbar component, a descendant of UserControl, to your project. Additionally, the component provides a complete set of IE events such as BeforeNavigate2 as well as toolbar-related events such as OnBeforeShow.
To bind the toolbar to your add-on, choose the Toolbars property of the IE module, and add an item:
The properties of the item (ADXIEToolbarItem) allow you to specify whether the gripper (see Creating an Internet Explorer-style Toolbar at MSDN) should be shown, the initial position of the IE toolbar, toolbar title, 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:
The ADXIEToolbar class, an ancestor of all toolbars, provides the following events listed in the order reflecting the life-cycle of the toolbar:
- OnConnect
- OnBeforeShow
- OnBeforeShowEx – allows you to prevent the IE bar from being shown
- OnActivate
- OnDeactivate
- OnBeforeHide
- OnBeforeHideEx – allows you to cancel hiding the IE bar
- OnDisconnect In addition, ADXIEToolbar provides the OnHeightAdjust event.
