Developing Interfaces in Outlook 2007

This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This page may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

Summary: Learn how to customize the Microsoft Office Outlook 2007 user interface using Microsoft Visual Studio Tools for Office 3.0. (23 printed pages)

Ryan Bedell, Dakota Technology Group

Steve Hansen, Dakota Technology Group

November 2008

Applies to: Microsoft Office Outlook 2007, Microsoft Visual Studio Tools for Office 3.0

Contents

• Introduction to Developing User Interfaces in Outlook 2007

• Outlook User Interface Elements

• Customizing Outlook UI Elements with Visual Studio Tools for Office 3.0

• Using Custom Task Panes

• Using Windows Forms

• Using Command Bars

• Customizing the Office Fluent Ribbon

• Developing Custom Form Regions

• Conclusion

• Additional Resources

Introduction to Developing User Interfaces in Outlook 2007

From a development perspective, Microsoft Office Outlook 2007 is unique compared to Microsoft Office Word 2007 or Microsoft Office Excel 2007. Whereas Word 2007 and Excel 2007 are document-centric applications, Office Outlook 2007 does not have a single standard document type. Instead, Outlook 2007 is designed to work with multiple types of items that allow people to organize the details of their day-to-day routine and communicate with others. As a result, the Outlook 2007 user interface presents distinct challenges for programmers seeking to customize the Outlook 2007 user experience.

Outlook User Interface Elements

Before you can understand how to customize the Outlook 2007 user interface, you must have a basic understanding of its components. The purpose of this section is to introduce the elements of the Outlook 2007 user interface. If you are familiar with these elements, skip directly to the Customizing Outlook UI Elements with Visual Studio Tools for Office 3.0 section.

Explorer Window

The Explorer window is displayed when Outlook 2007 is opened. The primary purpose of an Explorer window is to organize, and provide quick access to, user Outlook data (mail items, contacts, tasks, and so on).

Depending on the user preferences, an Explorer window may consist of up to four panes: a Navigation Pane, an All Mail Folders pane, a Reading Pane, and the To-Do Bar. Outlook 2007 add-ins may also display one or more custom task panes. Figure 1 shows the default Explorer window in Outlook 2007. Notice that the Explorer window uses Command Bar menus, rather than the Microsoft Office Fluent Ribbon common throughout the 2007 Microsoft Office System interface.

Note
The display of the Explorer window is dependent on the currently selected folder. The view described in this article represents a folder that contains mail items. The following figure shows the default Explorer window view in Outlook 2007. Figure 1 shows (from right to left) the Navigation Pane, All Mail Folders pane, Reading Pane, and the To-Do Bar.

Figure 1. Default Explorer window view in Microsoft Outlook 2007

The Navigation Pane displays a navigational view of the mailbox and associated components which include Mail folders, Calendar, Contacts, and Tasks. Mail folders are displayed in a tree view, while, by default, the Calendar, Contacts, and Tasks components are displayed as groups of folders. However, you can use the Folder List view to view all Outlook data in a single tree view. New components cannot be added to the Navigation Pane, but folders and views within it can be customized.

The Folder View displays the contents of the folder or component selected in the Navigation Pane. Based on the selected component, the folder view will present the Table, Timeline, Card, Business Card, Day/Week/Month, or Icon view type. Items in the folder view can be filtered and sorted for quick search.

The Reading Pane displays a read-only view of the selected item from the Folder view. The primary use of the Reading Pane is for reading Mail items and doing work within the Explorer window itself, rather than opening a new Inspector window. The Reading Pane can be customized using custom form regions.

The To-Do Bar, a new feature in Outlook 2007, displays a summary of tasks and upcoming calendar events. The To-Do Bar displays items added to your calendar, e-mail messages flagged for follow-up, or open tasks.

Inspector Window

While Explorer windows are used to organize and view collections of Outlook items, the Inspector window is used to work with an individual Outlook item. Mail items, Calendar items, and Contact items are primary examples of items displayed in the Inspector window. Multiple Inspector windows can be open simultaneously for multitasking (although it is not as common, it is also possible to have multiple Explorer windows open simultaneously). Figure 2 shows an Inspector window for a Mail item. Notice that Inspector windows use the Office Fluent Ribbon rather than Command Bars.

Figure 2. Inspector window for a Mail item

An Inspector window can be customized using custom form regions or task panes. In addition, the Office Fluent Ribbon can also be customized.

Custom Form Regions

Custom form regions provide a way to customize or replace the existing forms in Outlook 2007. Additional fields and features can be added within a form region, which you associate with specific types of Outlook items. They are useful for attaching data and features to existing forms. Custom form regions can be added to appointment, contact, distribution list, journal entry, mail message, post, RSS, and task forms. They can replace part of an existing form, replace all of an existing form, or be added to a form. Notice that using a form region to replace a built-in form only applies to custom message classes. You cannot use a replace all form region for standard message classes. Finally, multiple form regions can exist on the same form. Figure 3 shows an example of a "replace-all" custom form region displayed within an Inspector window.

Figure 3. Example of a "Replace-All" custom form region

Custom form regions can be designed in the Outlook form region designer or directly in the Microsoft Visual Studio Team System 2008 Team Suite. Using Windows Forms controls, you can design a user interface similar to the way you design a Windows Form or user control. Microsoft Visual Studio Tools for Office 3.0 builds the necessary code for you and associates your custom form regions with the appropriate Outlook message classes.

Office Fluent Ribbon and Command Bars

Outlook 2007 uses Command Bars in Explorer windows and the Office Fluent Ribbon in Inspector windows. Both Command Bars and the Office Fluent Ribbon can be customized using Visual Studio Tools for Office 3.0.

Command bars include the menu bar, toolbars, and context menus. New menu items or toolbars can be added through the Outlook object model with Visual Studio Tools for Office 3.0.

Custom Task Panes and Windows Forms

Custom task panes provide a way to add features to Explorer and Inspector windows. One benefit of using a custom task pane is that the custom feature is encapsulated in its own designated pane within Outlook 2007. A custom task pane appears just like a native Outlook pane. Unlike using a Windows Form, you can dock a custom task pane so that it will not float over the Outlook user interface.

Custom task panes are, initially, empty placeholders. The actual user interface for a custom task pane is a User Control, designed in Visual Studio Team System 2008 Team Suite that contains Windows Forms controls or Windows Presentation Foundation (WPF) controls.

Consider the limited amount of screen area when adding custom task panes. The default Explorer window view may have four task panes showing; adding another may clutter the interface. Also, other solutions running in Outlook may display their own task panes. Task panes can be docked to any edge of the parent window or float above the window. To enable a user to manage their screen area, consider adding a convenient way for users to turn custom task panes on or off.

Similar to custom task panes, Windows Forms can also be displayed within an Outlook add-in. They can be designed in Visual Studio Team System 2008 Team Suite with Windows Forms controls or WPF controls and displayed from both Explorer and Inspector windows. Using Windows Forms is a recommended option for displaying UI elements that require more screen area than can be reasonably encapsulated within a custom task pane.

Customizing Outlook UI Elements with Visual Studio Tools for Office 3.0

This section demonstrates basic Microsoft Outlook user interface customization techniques. To provide context for the examples, consider the task of building an Outlook add-in that provides a feature similar to the concept of a tag cloud. A concept that is similar to what is displayed on many Blogs. Figure 4 shows an example of a tag cloud. A tag cloud is a list of topics or tags used to categorize information. The sizes of individual items in the tag cloud provide some information about the number of items in a particular tag relative to the number of items in other tags.

Figure 4. Sample tag cloud

Outlook 2007 enables you to categorize Outlook items using one or more categories. By examining the number of items in each category, it is possible to build a tag cloud for Outlook. The remainder of this section discusses how to build this type of add-in.

Note
The focus of this article is Outlook 2007 user interface customization and does not discuss code that is related to the tag cloud. To build a simple tag cloud, use the RichTextBox control and loop through the various categories in the Session.Categories collection.

Using Custom Task Panes

Custom task panes provide a way to integrate the features of a solution directly in the Outlook 2007 user interface. Task panes can be added to both Explorer and Inspector windows and multiple task panes can be displayed simultaneously. Custom task panes operate like other task panes and can be docked to different sides of the parent window or can float above any location in the window.

To add a custom task pane to an Outlook 2007 solution

1. Add a new User Control to your Outlook Add-In project.

2. Design and add features to the User Control using Windows Forms controls.

3. Add a custom task pane to the CustomTaskPanes collection of ThisAddIn. When adding a custom task pane, pass in an instance of your User Control.

4. To show the custom task pane, set its Visible property to true.

The following example creates a simple User Control named TagCloud which displays a tag cloud based on Outlook 2007 categories. It contains a RichTextBox control that displays Outlook 2007 categories where the size of the font for each category term is relative to the number of items that are flagged with the respective category. Clicking a category term opens a search folder that contains the corresponding items.

The CustomTaskPane object is found in the Microsoft.Office.Tools namespace. To add a new custom task pane, open the ThisAddIn class in code view and add a reference at the top of the file to the Microsoft.Office.Tools namespace with the following code example.

Imports Tools = Microsoft.Office.Tools

using Tools = Microsoft.Office.Tools;

A reference to the new custom task pane should be stored as a class-wide variable. This will prevent it from being removed by the garbage collection operation. Create a variable that represents the task pane by adding the following code example above the ThisAddIn_Startup method.

Dim ctp As Tools.CustomTaskPane

Tools.CustomTaskPane ctp;

Next, create a CustomTaskPane by passing a TagCloud UserControl and a title to the CustomTaskPanes collection with the Add function. This returns a new custom task pane.

Finally, display the custom task pane in Outlook 2007 by setting its Visible property to true. The following ThisAddIn_Startup method code example shows how to add the task pane to the main Outlook Explorer window.

Private Sub ThisAddIn_Startup(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Startup
    ctp = Me.CustomTaskPanes.Add(New TagCloud(), _
        "Outlook Tag Cloud")
    ctp.Visible = True
End Sub

private void ThisAddIn_Startup(object sender, System.EventArgs e)
{
   ctp = this.CustomTaskPanes.Add(
       new TagCloud(), "Outlook Tag Cloud");   
   ctp.Visible = true;
}

Run the Outlook 2007 add-in solution and the custom task pane should appear on the right side of the Explorer window. To dock the task pane to other locations in the window, drag the task pane to the desired location. Figure 5 shows an example of the tag cloud custom task pane.

Figure 5. Example custom task pane that displays a tag cloud

Related Links:

Custom Task Panes Overview

How to: Add a Custom Task Pane to an Application

Walkthrough: Automating an Application from a Custom Task Pane

Walkthrough: Displaying Custom Task Panes with E-Mail Messages in Outlook

Creating Custom Task Panes in the 2007 Office System

Using Windows Forms

The alternative to using a custom task pane is to use a Windows Form. In addition to the limited screen area space issue (task panes are generally more constrained), one of the biggest considerations in making this choice is how you expect the user to interact with the user interface. Generally, Windows Forms are best for situations in which the user performs some action on the form that is not dependent on any other items that may be displayed in the Outlook user interface. The interaction is independent and discrete. Alternately, custom task panes are recommended for situations in which the user may want to view the UI in context with everything else displayed on the screen.

The following code example adds a new Windows Form named TagCloudForm to the project. Depending on your requirements, you may, or may not, keep a reference of the windows form; if you do, add a class level variable in the ThisAddIn class.

Dim form As TagCloudForm

TagCloudForm form;

For the Tag Cloud solution, this form will be loaded from a custom menu and toolbar buttons within Outlook (discussed in the next section). To display the form, add the code for the click event handler for the respective command bar button that includes the following code example.

Dim form As TagCloudForm
form = new TagCloudForm()
form.Show()

TagCloudForm form;
form = new TagCloudForm();
form.Show(); 

Using Command Bars

Command bars are found in the Outlook Explorer window. Command bars are also used for context menus which appear in Explorer and Inspector windows. Command bars include the menu bar, toolbars, and context menus.

The following code example shows how to add a new menu item, a toolbar, and a context menu. CommandBar objects are part of the Office.Core namespace and different objects represent specific menu elements. In the ThisAddIn class, add the following class variables to track new menus.

Private menuBar As Office.CommandBar
Private menu As Office.CommandBarPopup
Private menuItem1 As Office.CommandBarButton

Office.CommandBar menuBar;
Office.CommandBarPopup menu;
Office.CommandBarButton menuItem1;

To create a new menu that appears on the menu bar of the Explorer window, add the following code example and call this method from the ThisAddIn_Startup method.

Private Sub AddMenuBar()
    ' Get the menu bar in the Explorer window.
    menuBar = Me.Application.ActiveExplorer() _
        .CommandBars.ActiveMenuBar()
    ' Verify that the menu does not exist
    ' and remove it if it does.
    Dim newMenu As Office.CommandBarPopup = _
        Me.Application.ActiveExplorer.CommandBars _
        .ActiveMenuBar.FindControl( _
        Office.MsoControlType.msoControlPopup, , _
        "Tag Cloud", True, True)
    If newMenu IsNot Nothing Then
        newMenu.Delete(True)
    End If
    ' Add a new menu.
    menu = menuBar.Controls.Add( _
        Office.MsoControlType.msoControlPopup, _
        Temporary:=False)
    If menu IsNot Nothing Then
        ' Edit the menu properties.
        menu.Caption = "Tag Cloud"
        menu.Tag = "Tag Cloud"
        ' Add a submenu to the menu and
        ' set its properties.
        menuItem1 = menu.Controls.Add( _
            Office.MsoControlType.msoControlButton, _
            Before:=1, Temporary:=True)
        With menuItem1
            .Style = Office.MsoButtonStyle _
                .msoButtonIconAndCaption
            .Caption = "Add New Tag"
            .FaceId = 65
            .Tag = "Tag Cloud Submenu"
        End With
        ' Add an event handler to the menu item.
        AddHandler menuItem1.Click, _
            AddressOf MenuItem1_Click
        ' Display the new menu.
        menu.Visible = True
    End If
End Sub

private void AddMenuBar()
{
    // Get the menu bar in the Explorer window.
    menuBar = this.Application.ActiveExplorer()
        .CommandBars.ActiveMenuBar;
    // Verify that the menu does not exist 
    // and remove the item if it does.
    Office.CommandBarPopup newMenu = 
        (Office.CommandBarPopup)this.Application
        .ActiveExplorer().CommandBars.ActiveMenuBar
        .FindControl(Office.MsoControlType.msoControlPopup, 
        missing, "Tag Cloud", true, true);
    if (newMenu != null)
        newMenu.Delete(true);
    // Add a new menu.
    menu = (Office.CommandBarPopup)menuBar.Controls
        .Add(Office.MsoControlType.msoControlPopup, 
        missing, missing, missing, true);
    if (menu != null)
    {
        // Edit the menu properties.
        menu.Caption = "Tag Cloud";
        menu.Tag = "Tag Cloud";
        // Add a submenu to the new menu 
        // and set its properties.
        menuItem1 = (Office.CommandBarButton)menu.Controls
            .Add(Office.MsoControlType.msoControlButton, 
            missing, missing, 1, true);
        menuItem1.Style = 
            Office.MsoButtonStyle.msoButtonIconAndCaption;
        menuItem1.Caption = "Add New Tag";
        menuItem1.FaceId = 65;
        menuItem1.Tag = "Tag Cloud Submenu";
        // Handle the click event of the new menu.
        menuItem1.Click += new Office
            ._CommandBarButtonEvents_ClickEventHandler(
            menuItem1_Click);        
        // Display the new menu.
        menu.Visible = true;
    }
}

For simplicity, the submenu, when clicked, displays a message box. To handle the Click event in the new menu, add the following code.

Public Sub MenuItem1_Click(ByVal buttonControl As Office. _
CommandBarButton, ByRef Cancel As Boolean)
    ' Handle the click event here.
    System.Windows.Forms.MessageBox.Show("Menu Clicked")
End Sub

void menuItem1_Click(Microsoft.Office.CommandBarButton Ctrl, 
ref bool CancelDefault)
{
    // Handle the click event here.
    System.Windows.Forms.MessageBox.Show("Menu Clicked");
}

The solution also adds a new toolbar to Outlook 2007, which will provide the same functionality as the menu. Adding a new toolbar is similar to adding a new menu.

Add a couple class variables to reference the new toolbar.

Dim toolBar As Office.CommandBar
Dim toolBarItem1 As Office.CommandBarButton

Office.CommandBar toolBar;
Office.CommandBarButton toolBarItem1;

To create a toolbar, add the following code and then call this method from the ThisAddIn_Startup method. Notice the similarities between adding a toolbar and a menu. This method adds a new CommandBar to the CommandBars collection of the Explorer window. Next, it adds a button to the new toolbar and sets appropriate properties. The click event handler is handled by the same event handler as the menu item.

Private Sub AddToolBar()
    ' Delete the existing instance, if applicable.
    Dim newToolBar As Office.CommandBar = _
        Me.Application.ActiveExplorer() _
        .CommandBars.FindControl(, , _
        "Cloud Tag Toolbar", True)
    If newToolBar IsNot Nothing Then
        newToolBar.Delete()
    End If
    ' Add a new toolbar to the CommandBars
    ' collection of the Explorer window.
    toolBar = Me.Application.ActiveExplorer() _
        .CommandBars.Add("Cloud Tag Toolbar", _
        Office.MsoBarPosition.msoBarTop, False, True)
    If toolBar IsNot Nothing Then
        ' Add a button to the new toolbar.
        toolBarItem1 = toolBar.Controls _
            .Add( _
            Office.MsoControlType.msoControlButton, _
            , , 1, True)
        toolBarItem1.Style = Office.MsoButtonStyle _
            .msoButtonIconAndCaption
        toolBarItem1.Caption = "Add New Tag"
        toolBarItem1.FaceId = 65
        toolBarItem1.Tag = "Tag Cloud ToolBar Item"
        ' Handle the click event of the toolbar button.
        ' Use the same event handler as the menu item.
        AddHandler toolBarItem1.Click, _
            AddressOf MenuItem1_Click
        ' Display the new toolbar.
        toolBar.Visible = True
    End If
End Sub

private void AddToolBar()
{
    // Delete the existing instance, if applicable.
    Office.CommandBar newToolBar = 
        (Office.CommandBar)this.Application.ActiveExplorer()
        .CommandBars.FindControl(missing, missing, 
        "Cloud Tag Toolbar", true);
    if (newToolBar != null)
        newToolBar.Delete();
    // Add a new toolbar to the CommandBars collection
    // of the Explorer window.
    toolBar = this.Application.ActiveExplorer()
        .CommandBars.Add("Cloud Tag Toolbar",
        Office.MsoBarPosition.msoBarTop, false, true);
    if (toolBar != null)
    {
        // Add a button to the new toolbar.
        toolBarItem1 = (Office.CommandBarButton)toolBar
            .Controls.Add(Office.MsoControlType.msoControlButton, 
            missing, missing, 1, true);
        toolBarItem1.Style = Office.MsoButtonStyle
            .msoButtonIconAndCaption;
        toolBarItem1.Caption = "Add New Tag";
        toolBarItem1.FaceId = 65;
        toolBarItem1.Tag = "Tag Cloud ToolBar Item";
        // Handle the click event of the toolbar button.
        // Use the same event handler as the menu item.
        toolBarItem1.Click += new Office
            ._CommandBarButtonEvents_ClickEventHandler(
            menuItem1_Click);
        // Display the new toolbar.
        toolBar.Visible = true;
    }
}

Running the project now yields a new custom menu item and toolbar in the main Explorer window. The Cloud Tag menu appears on the menu bar with a submenu item. The toolbar duplicates the functionality that appears under the menu bar as shown in Figure 6.

Figure 6. Custom menu item and toolbar in the main Explorer window

Context menus function in a different manner than other command bar types. Because context menus are displayed based on the type of item that is currently selected, they dynamically show the appropriate menu items. Solutions that use context menus must handle the ItemContextMenuDisplay event and add menu items that are appropriate for the selected item every time the context menu is displayed.

To track a context menu and the selected item, add the following class variables code to the ThisAddIn class.

Private item As Outlook.MailItem
Private button As Office.CommandBarButton
Private s As Outlook.Selection

private Outlook.MailItem item;
private Office.CommandBarButton button;
private Outlook.Selection selection;

The event Application.ItemContextMenuDisplay occurs when Outlook is about to display a context menu. Likewise, the event ContextMenuClose is triggered when a context menu closes. To handle these events, you must use the following code to add event handlers to the ThisAddIn_Startup event handler:

' Not applicable for Visual Basic.

    Application.ItemContextMenuDisplay += new Outlook
        .ApplicationEvents_11_ItemContextMenuDisplayEventHandler(
        Application_ItemContextMenuDisplay);
    Application.ContextMenuClose += new Outlook
        .ApplicationEvents_11_ContextMenuCloseEventHandler(
        Application_ContextMenuClose);

Next, add the following code to ThisAddIn_Shutdown so that Outlook 2007 no longer handles the custom context menu items after the add-in shuts down.

' Not applicable for Visual Basic.

    Application.ItemContextMenuDisplay -= new Outlook
        .ApplicationEvents_11_ItemContextMenuDisplayEventHandler(
        Application_ItemContextMenuDisplay);
    Application.ContextMenuClose -= new Outlook
        .ApplicationEvents_11_ContextMenuCloseEventHandler(
        Application_ContextMenuClose);

Now, implement the event handlers. The following code example includes an event handler that will determine the type of item that is selected and add a new context menu item if the current item is a mail note item (in the Folder View pane).

Private Sub Application_ItemContextMenuDisplay( _
ByVal CommandBar As Microsoft.Office.Core.CommandBar, _
ByVal Selection As Microsoft.Office.Interop.Outlook.Selection) _
Handles Application.ItemContextMenuDisplay
    s = Selection
    ' For simplicity, only show if one item is selected
    ' and it is a mail item.
    If GetMessageClass(Selection(1)) = "IPM.Note" _
    And Selection.Count = 1 Then
        item = CType(Selection(1), Outlook.MailItem)
        button = CommandBar.Controls.Add( _
            Office.MsoControlType.msoControlButton)
        button.Caption = "Tag This Item"
        button.Visible = True
        AddHandler button.Click, AddressOf button_click
    End If
End Sub
Private Function GetMessageClass(ByVal item As Object) As String
    Dim args As Object() = New Object() {}
    Dim t As Type = item.GetType()
    Return t.InvokeMember("messageClass", _
        Reflection.BindingFlags.Public _
        Or Reflection.BindingFlags.GetField _
        Or Reflection.BindingFlags.GetProperty, _
        Nothing, item, args).ToString()
End Function

void Application_ItemContextMenuDisplay(
Office.CommandBar CommandBar, Outlook.Selection Selection)
{
    // For simplicity, only show if one item is selected
    // and it is a mail item.
    selection = Selection;
    if (GetMessageClass(selection[1]) == "IPM.Note" 
        && selection.Count == 1)
    {
        item = (Outlook.MailItem)selection[1];
        button = (Office.CommandBarButton)CommandBar.Controls
            .Add(Office.MsoControlType.msoControlButton, 
            missing, missing, missing, missing);
        button.Caption = "Tag This Item";
        button.Visible = true;
        button.Click += new Office
            ._CommandBarButtonEvents_ClickEventHandler(
            menuItem1_Click);
    }
}
private string GetMessageClass(object item)
{
    object[] args = new Object[] { };
    Type t = item.GetType();
    return t.InvokeMember("messageClass",
        System.Reflection.BindingFlags.Public 
        | System.Reflection.BindingFlags.GetField 
        | System.Reflection.BindingFlags.GetProperty,
        null,item,args).ToString();
}

When the context menu is closed the event Application.ContextMenuClose is triggered. Solutions using context menus must handle this event to disassociate any context menu events from unneeded context menus.

Private Sub Application_ContextMenuClose _
(ByVal ContextMenu As  _
 Microsoft.Office.Interop.Outlook.OlContextMenu) _
 Handles Application.ContextMenuClose
    s = Nothing
    item = Nothing
    If button IsNot Nothing Then
        RemoveHandler button.Click, AddressOf button_click
    End If
    button = Nothing
End Sub

void Application_ContextMenuClose(
Outlook.OlContextMenu ContextMenu)
{
    selection = null;
    item = null;
    if (button != null)
    {
        button.Click -= new Office
            ._CommandBarButtonEvents_ClickEventHandler(
            menuItem1_Click);
    }
    button = null;
}

Now that the custom context menu item is implemented, if you right-click a mail item in the Folder View pane, the new context menu item appears. Adding custom items to the context menu provides users with a convenient way to customize the interface as shown in Figure 7.

Figure 7. Custom menu item "Tag This Item" on the context menu

Because the Office Fluent Ribbon has replaced command bars throughout much of the 2007 Office System, there is not as much current information about programming for command bars as there is about programming for the Office Fluent Ribbon. However, there is published information available that is specific to programming for command bars that includes Visual Basic for Applications (VBA) code examples.

Customizing the Office Fluent Ribbon

With the addition of a Visual Ribbon Designer in Visual Studio Team System 2008 Team Suite, Office Fluent Ribbon customization is designed to be a simple development task. Using the Visual Ribbon Designer, customizing the Office Fluent Ribbon is a drag-and-drop operation followed by adding code to various Office Fluent Ribbon event handlers. To add a few buttons or other controls to the Office Fluent Ribbon, this customization is designed to be simple. For example, to add buttons to the Office Fluent Ribbon displayed in a mail item Inspector window, use the following procedure in the Visual Studio Team System 2008 Team Suite.

To add buttons to the Office Fluent Ribbon displayed in a mail item Inspector window

1. Select Project then select Add New Item.

2. Select the Visual Ribbon Designer Ribbon template and click Add to display the Add New Item dialog box that is shown in Figure 8.

   Figure 8. Select the Visual Ribbon Designer Ribbon template to design a Office Fluent Ribbon visually

   

   Notice in Figure 9 that Visual Studio Team System 2008 Team Suite, by default, adds an empty group to the Add-Ins tab. You can then set the properties of the default Office Fluent Ribbon group─such as the Name and the Label.

   Figure 9. Custom group added to the Add-Ins tab using the Visual Ribbon Designer

   

3. Drag two Button controls from under the Office Ribbon Controls group in the toolbox onto the Visual Ribbon Designer.

4. Set the properties of the Button control, as required, as shown in Figure 10. Some common properties are listed in the following table.

Table 1. Button control properties

Property	Description
Name	The name used in code to identify the object.
ControlSize	Used to set the control size (Regular or Large)
Image	Used to set the image associated with the button.
ImageName	Used to set the image associated with the button.
OfficeImageID	Used to set the image associated with the button.
Label	The text that appears on the button.
ScreenTip	The text that appears when the user hovers over the button.

Figure 10. Modifying button properties on the Office Fluent Ribbon

To generate an event handler for a button, double-click it. The following code example shows a message box in the event handler for each button.

Private Sub ButtonAddTags_Click( _
ByVal sender As System.Object, _
ByVal e As Microsoft.Office.Tools _
    .Ribbon.RibbonControlEventArgs) _
Handles ButtonAddTags.Click
    System.Windows.Forms.MessageBox.Show( _
        "This is where you put functionality " & _
        "to add a tag.")
End Sub
Private Sub ButtonClearTags_Click( _
ByVal sender As System.Object, _
ByVal e As Microsoft.Office.Tools _
    .Ribbon.RibbonControlEventArgs) _
Handles ButtonClearTags.Click
    System.Windows.Forms.MessageBox.Show( _
        "This is where you put functionality " & _
        "to clear tags.")
       End Sub

private void buttonAddTags_Click(object sender, 
RibbonControlEventArgs e)
{
    System.Windows.Forms.MessageBox.Show(
        "This is where you put functionality " +
        "to add a tag.");
}
private void buttonClearTags_Click(object sender,
RibbonControlEventArgs e)
{
    System.Windows.Forms.MessageBox.Show(
        "This is where you put functionality " +
        "to clear tags.");
}

By default, the Office Fluent Ribbon customization will only appear in Mail item read-mode Inspector windows. To show the Office Fluent Ribbon customization in other Inspector windows, select the Office Fluent Ribbon in the Visual Ribbon Designer and then change the RibbonType property as shown in Figure 11.

Figure 11. Modify the RibbonType property to select which types of Inspector windows will display the Office Fluent Ribbon customization

Optionally, you can add items to the Office Button (the round button that appears in the upper-left corner of an Inspector window). To do this, click the small black triangle that appears on this button in the Visual Ribbon Designer and then drag controls onto the design surface that appears as shown in Figure 12.

Figure 12. Design surface

Customizing the Office Fluent Ribbon may now appear similar to programming for traditional Windows Forms or user control development. Use the Visual Ribbon Designer to layout the Office Fluent Ribbon, add the required controls, double-click the controls to generate event handler stubs, and then add code to implement the desired functionality.

Related Links:

Customizing the Ribbon in Outlook 2007

Customizing the 2007 Office Fluent Ribbon for Developers (Part 1 of 3)

Ribbon Overview

How to: Get Started Customizing the Ribbon

How to: Customize the Microsoft Office Menu

How to: Customize a Built-in Tab

Developing Custom Form Regions

Custom form regions are designed to be a simple way to customize or replace Outlook forms. There are four types of form regions. Adjoining form regions are docked at the bottom of the current form. Separate form regions add a new page to the default form for an item. Replacement form regions replace the default page of a form. Replace-all form regions replace the entire form to handle all functionality for a given form type. Remember that replacement and replace-all form regions are only applicable to non-standard message classes.

There are two methods to design custom form regions. First, you can design them in Outlook with the form region designer and, second, you can design them in Visual Studio Team System 2008 Team Suite. For both methods, you can use Visual Studio Tools for Office 3.0 to handle the functionality behind the custom form regions. If you do not need to use any Outlook-specific controls or bind to Outlook specific fields, it can be easier to create custom form regions directly in Visual Studio Team System 2008 Team Suite. If you must use Outlook-specific controls or if you are using Visual Studio 2005, you must create the form region in Outlook and then add code using Visual Studio Team System 2008 Team Suite.

To create a form region using the Outlook Form Region designer, use the following procedure. Notice that these steps can also be completed in Visual Studio Team System 2008 Team Suite.

To create a form region using the Outlook Form Region designer

1. Open a new mail item. Form regions are created in the Inspector windows.

2. Switch to the Developer tab. If the Developer tab is not visible, click the Office Button in the top left of the window and select Editor Options. On the Popular tab there is a check box to show the Developer tab in the Office Fluent Ribbon.

3. Click Design This Form in the Office Fluent Ribbon and then select New Form Region under the Form Region button as shown in Figure 13. This will open a new form region in the Outlook Form Region designer. Be sure that you are looking at the Form Region tab.

   Figure 13. Creating a new form region using the Outlook Form Region designer

   

4. Select the Control Toolbox button in the Tools group on the Office Fluent Ribbon to view the available controls.

5. Add a CommandButton to the form. Right-click the control to change its properties. Set the Name to btnAdd.

6. Under the Form Region button select Save Form Region As and save the form. Close the window and exit Outlook.

   The Tag Cloud solution has an additional TextBox and ComboBox control to aid the user in adding new tags to their tag cloud collection. A user can enter a tag name, select a color, and click the button to save the tag to their cloud. Meanwhile, the current mail item is automatically tagged with the new tag.

   After designing the form region in Outlook, the remainder of the process uses Visual Studio Team System 2008 Team Suite.

7. Open your Outlook add-in project in Visual Studio Team System 2008 Team Suite.

8. Select Project then select Add New Item from the menu and add a new Outlook Form Region to the project. Click OK.

9. Select Import from an Outlook Form Storage (.ofs) File and browse to the form region you created as shown in Figure 14. Click Next.

   Figure 14. Creating a form region based on an existing Outlook Form Storage file

   

10. Select Adjoining to have the form region appear at the bottom of the form. Notice that there are different types of form regions. Click Next.

11. Name the form region. This will appear as the form region header text. You can also select which mode the custom form region should appear (such as Compose or Read). Leave the defaults and click Next.

12. Check Mail Message (IPM.Note) as the message class. Notice that you can create custom form regions for many types of Outlook forms. Click Finish.

After adding a custom form in this manner, Visual Studio Team System 2008 Team Suite creates the appropriate code files. To complete the form region, add the custom code. Visual Studio Team System 2008 Team Suite is designed to recognize the controls on the custom form. This allows you to handle events and develop the functionality of your form as you would with a standard Windows Form.

For example, to create an event handler for a command button named btnAdd, add the following code to the TagCloudFormRegion_FormRegionShowing method.

AddHandler Me.btnAdd.Click, AddressOf btnAdd_Click

    this.btnAdd.Click += new Outlook
        .OlkCommandButtonEvents_ClickEventHandler(btnAdd_Click);

Then add the following code to have the button display a message box when clicked.

Private Sub btnAdd_Click()
    System.Windows.Forms.MessageBox.Show( _
        "Add the code here to create the new " & _
        "tag and tag the current item.")
End Sub

void btnAdd_Click()
{
    System.Windows.Forms.MessageBox.Show(
        "Add code here to create the new tag and
         tag the current item.");
}

Run the project and look at an e-mail message in the Reading Pane in the Explorer window (an example is shown in Figure 15). The new custom form region is docked to the bottom of the mail item. Click the button to test the functionality. Now, open a new mail item. Notice that the custom form region also appears docked at the bottom of the Inspector window. One benefit of using form regions is that you can add interactivity to the Reading Pane which is otherwise read-only.

Figure 15. Explorer window Reading Pane

Alternately, you can design custom form regions in Visual Studio Team System 2008 Team Suite by using the following procedure.

To design custom form regions in Visual Studio Team System 2008 Team Suite

1. Add a new Outlook Form Region to the project and give it a name. Click OK.

2. Select Design a new form region. Click Next.

3. Select Adjoining to have the form region appear at the bottom of the form. Click Next.

4. Name the form region. This will appear as the form region header text. You can also select in what mode the custom form region should appear. Leave the defaults and click Next.

5. Check Mail Message (IPM.Note) as the message class as shown in Figure 16. Click Finish.

To display a form region you must associated it with message class as shown in Figure 16.

Figure 16. Associate a form region with a message class

Now, you can design the custom form region with the designer and the usual Windows Forms controls as shown in Figure 17. All the code files and form functionality are created and connected for you. Again, you can add any custom code necessary for you solution and run the project to test it. Creating a form region in Visual Studio Team System 2008 Team Suite is like creating a user control or Windows form.

Figure 17. Creating a form region in Visual Studio Team System 2008 Team Suite

As shown, custom form regions are designed to be flexible and easy to create with Office 2007 and Visual Studio Tools for Office 3.0. Custom form regions can be used to add fields and functionality to many types of Outlook forms and can be customized to fit any solution.

Related Links:

How Do I: Create Outlook Form Regions Using Visual Studio 2008?

Creating Outlook Form Regions

How to: Add a Form Region to an Outlook Add-in Project

How to: Show the Developer Tab on the Ribbon

Conclusion

Microsoft Office Outlook 2007 presents developers with a great opportunity to create useful applications. Visual Studio Tools for Office 3.0 is designed to greatly simplify the Outlook user interface customization.

Additional Resources

For more information, see the following resources:

• Microsoft Office Developer Center

• Programming Applications for Microsoft Office Outlook 2007

About the Authors

Ryan Bedell is a Senior Office System Developer at Dakota Technology Group, a consulting firm specializing in Office System Development. Steve Hansen is an Office System Architect at Dakota Technology Group. Ryan and Steve have teamed up on numerous Office solutions over the past decade. In their free time, Steve and Ryan write VBA and VSTO tips for VBATips.com and VSTOTips.com. Steve has created numerous (50+) videos for Microsoft related to Visual Studio Tools for Office development. To view these videos, see How Do I Videos – Office on MSDN.

This article was developed in partnership with Dakota Technology Group.