Programmatically Customizing the 2007 Office Fluent User Interface

  • Article

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:  The 2007 Microsoft Office Fluent user interface (UI) replaces the current system of layered menus, toolbars, and task panes with a simpler system optimized for efficiency and discoverability.

Office Visual How To

Applies to:  2007 Microsoft Office System, Microsoft Office Excel 2007, Microsoft Office PowerPoint 2007

Frank Rice, Microsoft Corporation

March 2007

Overview

The Microsoft 2007 Office Fluent user interface (UI) replaces the current system of layered menus, toolbars, and task panes with a simpler system optimized for efficiency and discoverability. The Ribbon is a part of the Office Fluent interface as are context (right-click) menus, the Quick Access Toolbar, and the Microsoft Office button. You add components to the Ribbon with XML markup elements and set properties on those components by using attributes. You assign functionality to the components by using any programming language supported by Microsoft Visual Studio 2005, such as Microsoft Visual Basic.NET, and C#, as well as Microsoft Visual Basic for Applications (VBA), Microsoft Visual C++, and Microsoft Visual Basic 6.0.

NoteNote
Some of the resources provided in the Explore It section of this page present a "bottom-up" approach to customizing the Ribbon. They require you to manually create the files and write the code necessary to develop the Ribbon. While this allows you to see and understand the process, it is also time-consuming. The Visual Studio 2005 Tools for the 2007 Microsoft Office System Second Edition (VSTO 2005 SE) is a free, fully-supported add-on that enables you to create application-level add-ins including support for creating custom Ribbons. VSTO 2005 SE automates many of the details for you and gives you generic components that you can use as a starting point to modify the Ribbon. You can find more information about VSTO 2005 SE on the Visual Studio Tools for Office Developer Portal.
See It Presentation intro slide

Watch the Video

Length: 10:17 | Size: 6.47 MB | Type: WMV file

Code It | Read It | Explore It

Code It

Whether you want to make additions to the existing Ribbon or create a Ribbon, you use a combination of XML and programming code.

Adding Controls with XML

XML provides a hierarchical, declarative model of the Ribbon. Ribbon customization XML consists of a customUI element that contains a single ribbon element; the ribbon element is a container for the tabs element; the tabs element is the container for tab elements; tab elements are the container for group elements; and group elements are containers for commands and controls. You assign property values to the Ribbon commands and components by using attributes. Examine the following sample:

<?xml version="1.0" encoding="utf-8" ?>
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" loadImage="LoadImage" >
    <ribbon startFromScratch="false">
        <tabs>
             <tab id="tab1" label="Button Demo" keytip="z" >
                <group id="group1" label="Demo Group">
                    <button id="button1"
                        enabled="true"
                        getLabel="GetLabel"
                        keytip="A1"
                        getScreentip="GetScreentip"
                        supertip="This is a supertip for the button."
                        getShowLabel="GetShowLabel"
                        getShowImage="GetShowImage"
                        getSize="GetSize"
                        visible="true"
                        image="camera.bmp"
                        onAction="OnAction" />
                    <button id="button2"
                        getLabel="GetLabel"
                        getShowLabel="GetShowLabel"
                        size="normal"
                        keytip="A2"
                        imageMso="TableDrawTable"
                        onAction="OnAction" />
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

This sample adds a custom tab titled Button Demo to the Ribbon by assigning text to the tab element's label attribute. This tab contains the Demo Group group, which contains a custom button titled Insert Text. The ribbon element has a startFromScratch attribute that is assigned the Boolean value: True. This hides the built-in Ribbon tabs so that the only tab displayed is the custom tab. The following figure shows the result of applying this XML to the Ribbon in Microsoft Office Excel 2007:

Figure 1. A sample modified Ribbon in Office Excel 2007

Sample modified Ribbon

As in the sample code, you specify built-in components differently than custom components. Some attributes have the Mso suffix and some do not. For example, looking at the sample, the id attribute does not have the Mso qualifier. This indicates to Office that the button is a custom control. In the imageMso attribute, the Mso suffix indicates it as a built-in image. Attributes with the Mso suffix refer to built-in controls, commands, and images. An example of this appears later in this article.

Assigning Functionality to Ribbon Components

In the previous XML sample, the button element has an OnAction attribute. When the button is clicked, the OnAction method, or callback procedure, is called. The code in the OnAction method gives the button its functionality. These procedures are called callbacks because when the button is clicked the action alerts the Microsoft Office application that the control needs its attention. The Office application then calls back to the method defined by the OnAction attribute and performs whatever action is contained in the method. The OnAction callback procedure might look like the following:

Public Sub OnAction(ByVal control As IRibbonControl)
    applicationObject.Range("A1").Value = "You clicked the Insert Text button."
End Sub

public void OnAction(IRibbonControl control)
{
    applicationObject.get_Range("A1:A1", missing).Value2 = "You clicked the Insert Text button.";
}

In this case, clicking the button inserts text into the A1 cell in the worksheet.

Read It

There are two ways to deploy a custom Ribbon:

  • Modify an Open XML Format file created by one of the Office applications that support the Office Fluent UI.

  • Use an add-in.

You can select the technique depending on the scope you need for the customized Ribbon. For example, modifying an Open XML file results in document-level customization where the customized Ribbon is associated with a particular document rather than the entire application. On the other hand, by using an add-in, you get application-level customization which means that the customized Ribbon applies to the entire application regardless of which document is open.

Creating a customized Ribbon by using an Open XML file can be a simple process.

  1. Open the document as a ZIP file by changing the file name extension.

  2. Add a folder containing the XML Ribbon customization code.

  3. Modify the document's relationship file to point to the custom folder.

  4. Rename the document's file extension.

  5. Open the document in the Office application.

  6. Add code to the document to give the custom Ribbon functionality.

Using an add-in to customize the Ribbon is equally straightforward. After creating the add-in project, you implement the IRibbonExtensibility interface, which is included in the Microsoft.Office.Core namespace. This interface contains one method called GetCustomUI. You use this method to return the XML Ribbon customization code to the Office Application. Then you add programming procedures that give the custom Ribbon its functionality.

Customizing the Ribbon

In the following procedure, you combine this information to create a custom tab containing a custom group and button to the Ribbon in Office Excel 2007. This button inserts text into the worksheet.

To create the add-in solution

To create the project, do the following steps.

  1. Start Visual Studio 2005.

  2. On the File menu, point to New, and then click Project.

  3. In the New Project dialog box, in the Project Types pane, expand Other Project Types, click Extensibility, and then select Shared Add-in.

  4. In the Name box, type RibbonDemo and then click OK to create the project.

  5. On the first page of the Shared Add-in Wizard, click Next.

  6. On the Select a Programming Language page, select either Visual C# or Visual Basic, and then click Next.

  7. On the Select an Application Host page, clear all of the selections except Microsoft Excel, and then click Next.

  8. On the Enter a Name and Description page, optionally, type a name for the project and a description, and then click Next.

  9. On the Choose Add-in Options page, select I would like my Add-in to load when the host application loads, click Next, and then click Finish.

Visual Studio creates a solution that contains two projects—the add-in itself, and a Setup project. (The Setup project enables you to install the add-in on other users' computers, and it makes it easier for you, at design time, to install and uninstall the add-in.)

To add references to the project

To interact with Excel 2007 and the Ribbon object model, add references to a type library.

  1. In Solution Explorer, expand the References folder.

    If you do not see the References folder, on the Project menu, click Show All Files.

  2. Delete the Microsoft.Office.Core reference.

  3. Right-click the References folder and then click Add Reference.

  4. Click the COM tab, select Microsoft Office 12.0 Object Library, and then click OK.

  5. At the top of the open code file, add the following statements to the project.

    Imports Microsoft.Office.Core
Imports Excel = Microsoft.Office.Interop.Excel

    using Microsoft.Office.Core;
using Excel = Microsoft.Office.Interop.Excel;

To create the Ribbon customization XML file

Create the file that adds the components and sets the property for those components.

  1. On the Project menu, click Add New Item.

  2. In the Add New Item dialog box, select XML File. Name the new file Ribbon.xml, and then click Add.

  3. In the new XML file, add the XML markup in the section titled Adding Controls with XML.

To add the XML file as an embedded resource

For best results, use the XML file as a resource within the project's resource file.

  1. In Solution Explorer, select Ribbon.xml.

  2. In the Properties window, select the Build Action property, and then select Embedded Resource in the list of options.

  3. On the Project menu, click RibbonDemo Properties.

  4. Click the Resources tab.

  5. From Solution Explorer, drag Ribbon.xml onto the Resources design surface.

    This action creates a file-based resource. From now on, the Ribbon.xml file is automatically stored as an application resource, and you can retrieve this content by using Visual Basic or Visual C# language features.

  6. Close the Resources window. When prompted, click Yes to save the resources.

To access the host application and work with the Ribbon

You need to create an instance of Excel and add the Ribbon interface.

  1. In Solution Explorer, right-click Connect.cs or Connect.vb, and then click View Code.

  2. Find the existing declaration for the applicationObject variable, and modify it so that it refers to an Excel.Application object. That is, modify the declaration so that it looks like the following code.

    Private applicationObject As Excel.Application

    private Excel.Application applicationObject;

  3. Modify the existing first line of the OnConnection method, which creates an instance of the Excel.Application object.

    applicationObject = DirectCast(application, Excel.Application)

    applicationObject =(Excel.Application)application;

  4. In Visual Basic, modify the line of code, near the top of the class that starts with Implements, adding support for implementing the IRibbonExtensibility namespace. Visual Basic inserts the GetCustomUI procedure automatically.

    Implements Extensibility.IDTExtensibility2, IRibbonExtensibility

  5. If coding in C#, at the end of the public class Connect : statement, add a comma and then type the following interface name.

    IRibbonExtensibility

  6. Continuing in C#, right-click the interface you just added, click Implement Interface, and then click Implement Interface Explicitly. This adds a stub for the only IRibbonExtensibility interface member: GetCustomUI.

  7. Modify the GetCustomUI method so that it looks like the following code.

    Public Function GetCustomUI(ByVal RibbonID As String) As String _
   Implements Microsoft.Office.Core.IRibbonExtensibility.GetCustomUI
   Return My.Resources.Ribbon
End Function

    string IRibbonExtensibility.GetCustomUI(string RibbonID)
{
  Return Properties.Resources.Ribbon;
}

  8. Add the code in the section Assigning Functionality to Ribbon Components in this article depending on the programming language. This method inserts text into the worksheet at cell A1.

To test the project

Now you are ready to run the project.

  1. On the File menu, click Save All.

  2. Exit Excel 2007 if it is running.

  3. On the Build menu, click Build Solution.

  4. In Solution Explorer, right-click RibbonDemoSetup, and then click Build.

  5. Right-click RibbonDemoInSetup, and then click Install.

    The RibbonDemo Setup Wizard appears.

  6. Click Next on each of the pages, and then click Close on the last screen.

  7. Start Excel.

    The Button Demo tab appears as the only tab. All other tabs are hidden because you set the startFromScratch attribute to True. You also see the Group Demo group. Also, notice the built-in image for the button.

  8. Click the Insert Text button.

    Excel inserts the text into the worksheet at cell A1 as displayed in Figure 2.

    Figure 2. Click the Insert Text button to insert text at cell A1

    Insert Test button

  9. Exit Excel.

  10. In Visual Studio, in Solution Explorer, right-click RibbonDemoSetup, and then click Uninstall.

Explore It

There are a number of resources on customizing the Office Fluent user interface.