Custom Internet Explorer bars and IE context menu
developed for IE8, IE7 and IE6 in VB.NET, C# or C++

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

Add-in Express Home > Add-in Express for Internet Explorer > Online Guide > Building Explorer bars and context menus

Custom Explorer bars

How to create Explorer bar - Flash video

Add-in Express for Internet Explorer makes it easy to build custom Explorer bars and to create custom menu items, or commands for the Internet Explorer context menu for IE8, IE7 and IE6. You can develop in VB.NET, C#, C++ and Delphi Prism and your IE bar may look like this:

Custom Explorer bar

The newly created IE bar has the command button (unavailable in IE6) and / or menu item; the user shows / hides the bar by clicking on either of them.

The ideology of creating custom Explorer bars is similar to that of IE toolbars. With Add-in Express for Internet Explorer, a custom Explorer bar is built in two easy steps: first, you add a special component derived from UserControl to your project, then you add an item to a collection of the IE module and bind the component to the item.

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 Explorer bar

Let's start: choose Project | Add New Item in the menu and find the corresponding class template in the Add-in Express Items / Internet Explorer branch.

Adding a new Explorer bar to your IE add-on project

This adds a descendant of ADXIEBar representing an Internet Explorer bar to your project.

Now you add an item to the Bars collection of the IE module and specify its properties. The most important one is BarType; it binds a bar component to the bar item (ADXIEBarItem). The absolute minimum of properties required for your ExplorerBar to show up also includes Title and MenuText; these properties specify the IE bar title and the caption of the menu item shown in the View | Explorer Bar menu. You can also choose whether to show the bar vertically or horizontally and specify the maximal width or height of vertical and horizontal bars respectively. The properties having "ToolButton" in their names, such as AddToolButton and ToolButtonDefaultVisible, control the visibility and other aspects of the button that shows / hides the Explorer bar; the button is added to the Command Bar toolbar of IE.

Adding a new item to the Explorer Bars collection and specifying its properties

Here are ADXIEBar events listed in the order corresponding to the life-cycle of the Explorer bar: 

  • OnConnect
  • OnBeforeShow
  • OnBeforeShowEx – allows you to prevent the Explorer bar from being shown
  • OnActivate
  • OnDeactivate
  • OnBeforeHide
  • OnBeforeHideEx – allows you to cancel hiding the IE bar
  • OnDisconnect

Because ADXIEBar is a descendant of UserControl, you can react to, say, resizing of the Explorer bar.

ADXIEBarItem provides the following properties:

  • AddToolButton - if true, shows a button in the built-in IE toolbar; the button is associated with the Explorer bar.
  • BarType - it's the most important property, it binds an ADXIEBar to its item; just select one from the list.
  • DockPosition - the available positions are vertical (at the left of the IE window) and horizontal (at the bottom).
  • HelpText - it is displayed in the status bar when the user moves the mouse over the View | Explorer Bar | %MenuText% item in the IE menu.
  • LoadAtStartUp - when false, the Explorer bar is not visible; the user has to check the View | Explorer Bar | %MenuText% item in the IE menu.
  • MaxSize -specifies the maximal size of the bar; the default value, which is -1, means "no restrictions".
  • MenuText - the caption of the menu item corresponding to the bar.
  • MinSize - specifies the minimal size of the Explorer bar; the default value, which is -1, means "no restrictions".
  • Title -the text to be shown in the bar caption.
  • ToolButtonActiveIcon - this property is obligatory when AddToolButton is true; the icon must be located in the Resources folder of your Internet Explorer add-on project.
  • ToolButtonDefaultVisible - when true, the button is visible at the IE add-on startup; when false, the user has to add the corresponding button via Customize Command Bar | Add or Remove Commands.
  • ToolButtonInactiveIcon - this property is obligatory when AddToolButton is true; the icon must be located in the Resources folder of your IE add-on project.

Also note that the AddinExpress.IE.ADXIEToolBar provides all Internet Explorer events, see a complete list of available Internet Explorer events.

Custom IE context menu commands

To create a custom context menu item, add an item to the ContextMenu collection of the IEModule and specify the item's properties: caption and contexts available for the context menu item.

Creating a new IE context menu command

Naturally, you need to handle the Click event of the context menu item. Pay attention to the Contexts and ExtendedContexts properties of top-level context menu items; you can use these properties for refining the context-sensitivity of your context menu items. Say, if you choose Anchor in the Contexts property, you will be able to choose Anchor and Link in ExtendedContexts. In the same fashion, you can limit your context menu items to any given HTML control type(s).

When IE creates its context menu for the first time, the OnCreateContextMenu event of the IE module is raised; you can use this event for any sort of initialization. Before a given context menu item is created, it receives the OnCreateContextMenuItem event; at this moment you can change its visibility, caption, position, etc.

More about creating custom IE context menu items. See also a video sample about how to create an IE context menu item.  

Adding a custom item to IE main menu <<

>> IE add-on: tabs, windows, threads, instances and messages

Back to Add-in Express for Internet Explorer homepage
See Also