Writing the Code
|Figure 6. Action: You have a lot of choices for customizing your MenuStrip control using the Actions tag. |
Now that you have a good idea of how the EnhancedIE application works, let's get to work. First, create a new Windows application using Visual Studio 2005 (beta 1 was used for this article) and name the project EnhancedIE. In the default Form1, change the Text property of the form to "Enhanced Internet Explorer."
In the Toolbox, double-click on the MenuStrip control to add a menu bar to the form. If you click on the Actions arrow on the right of the control, you will see a list of commonly used properties and shortcuts (see Figure 6).
Set the following properties for the MenuStrip control:
|Figure 7. Menu: The completed menu bar is shown. |
Click on the "Insert Standard Items" link in the Actions menu to insert a list of commonly available menu items. To add your own item to the menu, click on the Edit Items... link. I added the View and Favorites menus (see Figure 7
Note in Figure 7
that the Add Live Bookmark…menu item has a star icon next to it. You can add an icon to a menu item by clicking on the blue column next to the menu item. You will then be asked to supply a resource (image) to use for that menu item.
Creating the ToolStrips
The next step is to create the toolbar. While a menu is used to group related options in an organized format, a toolbar provides shortcuts to commonly used tasks. In the Toolbox, double-click on the ToolStrip control. Like with the MenuStrip control, you can insert a list of commonly available toolbar items on the ToolStrip (see Figure 8).
|Figure 8. Adding Tools: As in Figure 6, adding items to a ToolStrip control is easy using the Actions tag. |
For simplicity, I will just show some standard Office icons on the ToolStrip, rather than an IE-specific toolbar. But this shows how easily you can offer commonly used items to your ToolStrip. You can add more using the "Edit Items..." link.
I'd like to add a second ToolStrip control to the form. Using separate ToolStrips lets you group tasks so that related items can be moved together. This second ToolStrip will house the address textbox as well as the Go button. Add the following controls to the ToolStrip (use the "Edit Items…" link on the Actions tag):
Set the "Stretch" property of the second ToolStrip control to true. This will cause it to fill up the entire width of the window. Set the Alignment property of the Go button to "Tail" (so that it will be right-justified). The form now looks like Figure 9
|Figure 9. Two ToolStrips: The completed address bar is shown underneath the first "standard" ToolStrip.|
|Figure 10. Three ToolStrips: The live bookmarks ToolStrip completes the control bar for the browser. |
The address bar is a ComboBox control named cbbURL. Set its properties as follows:
- AutoCompleteMode to SuggestAppend
- AutoCompleteSource to HistoryList
This will cause the ComboBox control to automatically fill in the textbox as you type (with information stored in IE's history list).
Add a third ToolStrip control to the form and to it add a ToolStripLabel control. This third ToolStrip will display the live bookmarks. Set the text of the ToolStripLabel control to "Live Bookmarks," and again set the "Stretch" property of the ToolStrip to "true" (see Figure 10).
Creating the StatusStrip
Once the ToolStrip controls are added, the next step is to add the StatusStrip control to the bottom of the form. The StatusStrip control appears at the bottom of the window and is commonly used to display information pertaining to the current operation. In the Toolbox, double-click on the StatusStrip control and add a StatusStripPanel to the control. The StatusStripPanel represents a panel in a StatusStrip control. You display status information within a StatusStripPanel control.
Adding the TabControl
Now we can get down to the fun part. A TabControl will handle the tab switching functionality that is the hallmark of this browser. In the Toolbox, double-click on the TabControl control. In the Actions page, click on the "Dock in parent container" link to fill up the form with the control (see Figure 11).
Figure 11. Adding Tabs: Here is the new TabControl as it looks when newly added to the form.
Figure 12. Close Tab: To allow users to close a tab, use a ContextMenuStrip.
By default, there are two TabPage controls in the control, but this application will create its own tabs dynamically during runtime, therefore you don't need them at design time. Click on the "Remove Tab" link twice to remove them.
Adding the ContextMenuStrip
Users will need a control that allows them to close a tab page when they right-click on one. We'll add this functionality with a ContextMenuStrip control. In the Toolbox, double-click on the ContextMenuStrip control, and add a ToolStripMenuItem to it. Set the text property of the ToolStripMenuItem to "Close Tab." The form now looks like Figure 12. Set the ContextMenuStrip property of the TabControl to "ContextMenuStrip1." This step is required so that when the user right-clicks on a tab control, the context menu is displayed. It is used to associate a context menu with a control.