The 2007 Microsoft Office Fluent user interface (UI) replaces the current system of layered menus, toolbars, and task panes with a simpler system that is optimized for efficiency and discoverability. The Office Fluent Ribbon, shortcut menus, the Quick Access Toolbar, and the Microsoft Office check box are all parts of the Office Fluent UI. There are a number of custom and built-in controls, such as buttons, check boxes, and combo boxes, that you can add to the Office Fluent Ribbon.
You add components to the Office Fluent 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 and Microsoft Visual C#, and also Microsoft Visual Basic for Applications (VBA), Microsoft Visual C++, and Microsoft Visual Basic 6.0.
You can use a combination of XML and programming code to add you own custom controls to the Office Fluent Ribbon or perform other actions on the Ribbon.
Adding Controls Using XML
XML provides a hierarchical, declarative model of the Office Fluent Ribbon. Add controls, such as toggle buttons and tabs, to the Ribbon by using XML elements to specify the type of component. For example, you can add a single toggle button by using the toggleButton element. You assign property values to the control by using attributes such as the label attribute. The following is a sample.
<command idMso="FileSave" onAction="mySave" />
<tab id="tab1" label="Repurpose Command Demo" >
<group id="group1" label="Demo Group">
This sample creates a reference to the save file functionality in Microsoft Office by using the command element. You can determine that this component includes a reference functionality built into Microsoft Office through its use of the idMso attribute. Attribute names that include the Mso suffix always point to functionality contained in the Microsoft Office product.
Next, the XML adds a custom tab named Repurpose Command Demo to the Office Fluent Ribbon by using the id attribute and adding text to the tab element's label attribute. You can verify that this is a custom control because of the use of the id attribute instead of the idMso attribute. This tab contains the Demo Group group, which contains a toggle button control named togglebutton1. The togglebutton1 control has properties that are defined by using attributes such as imageMso, onAction, and label. You can assign these properties explicitly by setting the attribute equal to a string or indirectly by pointing to a programming code procedure. In addition to the label property, the toggle button also defines the imageMso attribute that points to a built-in image.
Next is the onAction attribute. This attribute points to programming code called callback procedures. Callback procedures are discussed in more detail in the "Assigning Functionality to Office Fluent Ribbon Components" section.
Finally, I already mentioned the command element that points to the FileSave feature of the Microsoft Office product. By creating a reference to the command, you now have access to all the built-in functionality and can use it for your own purposes. So, in this example, I override the functionality of the command by using the onAction attribute to point to a callback procedure. You will see how this works shortly.
Assigning Functionality to Office Fluent Ribbon Components
In the XML sample, the onAction attribute points to a callback procedure. When the toggle button is clicked, Microsoft Office calls the changeRepurpose method, or callback procedure. The code in the changeRepurpose method gives the toggle button its functionality. Likewise, the onAction attribute of the command element overrides the built-in functionality by pointing to a custom callback procedure. These procedures are called callbacks because when the button is clicked, the action alerts Microsoft Office that the control needs attention. Microsoft Office then calls back to the method defined by the onAction attribute and performs whatever action is contained in the method. The following paragraphs describe these callback procedures in more detail.
The onAction attribute calls the changeRepurpose callback procedure.
Private myRibbon As IRibbonUI
Private repurposing As Boolean = False
Public Sub OnLoad(ByVal ribbon As IRibbonUI)
myRibbon = ribbon
Public Sub changeRepurpose(ByVal control As IRibbonControl, ByVal pressed As Boolean)
repurposing = pressed
When the Office Fluent Ribbon is loaded, the OnLoad method is triggered and a reference to the Office Fluent Ribbon is created and assigned to the myRibbon variable. In addition, a variable named repurposing is declared. This variable is used to determine whether the Save command should be repurposed. When Microsoft Office calls the changeRepurpose procedure, an IRibbonControl object representing the toggle button is passed in. In addition, a Boolean value representing the pressed state of the toggle button is passed to the procedure. The procedure assigns the pressed state of the toggle button to the repurposing variable and then calls the Invalidate method of the Office Fluent Ribbon. You will see the significance of these actions shortly.
When Microsoft Office is started and the Office Fluent Ribbon is loaded, the mySave procedure is also loaded. When the Invalidate command of the Office Fluent Ribbon is called, Microsoft Office checks to see whether the built-in functionality of the various Office Fluent UI commands and controls are overridden by custom code. In this case, the file save functionality is overridden so that the mySave method is called when you click either the Save button or Save menu item on the Microsoft Office Button.
Public Sub mySave(ByVal control As IRibbonControl, ByRef cancelDefault As Boolean)
If (repurposing) Then
MessageBox.Show("The Save button has been temporarily repurposed.")
cancelDefault = False
cancelDefault = False
In the mySave callback procedure, the repurposing variable, which represents the pressed state of the toggle button, is tested. If it is set to True, meaning that the button was pressed, a dialog box is displayed. After execution is resumed by dismissing the dialog box, the cancelDefault variable is set to False, which resets the file save functionality.
To summarize, when the pressed state of the toggle button is True, meaning the button is displayed as depressed, the Save command uses the custom procedure to determine its functionality. Otherwise the Save command uses its default functionality.
There are two ways to deploy a custom Ribbon:
You can select the technique depending on the scope you need for the customized Office Fluent Ribbon. For example, modifying an Office Open XML Format–based file results in document-level customization where the customized Office Fluent Ribbon is associated with a particular document instead of the entire application. Alternatively, by using an add-in, you get application-level customization. This means that the customized Ribbon applies to the entire application regardless of which document is open.
Creating a customized Ribbon by using an Office Open XML Formats file is not complicated.
To create a customized Ribbon using an Office Open XML Formats file
Open the document as a .zip file by changing the file name extension.
Add a folder containing the XML Ribbon customization code.
Modify the document's relationship file to point to the custom folder.
Rename the document's file name extension.
Open the document in the Microsoft Office application.
Add code to the document to give the custom Ribbon functionality.
Using an add-in to customize the Ribbon is equally simple. After creating the add-in project, you implement the IRibbonExtensibility interface, which is included in the Microsoft.Office.Core namespace. This interface contains a method called GetCustomUI. Use this method to return the XML Ribbon customization code to Office. Then add programming procedures that give the custom Ribbon its functionality.
Repurposing the Built-In Save Functionality
In the following procedure, you combine this information to create a custom tab that contains a custom group and toggle button that override the built-in functionality of the Save command in Office Excel 2007.
Creating the Add-In Solution
To create the project, there are nine steps.
To create the add-in solution adding custom buttons to the Ribbon
Start Visual Studio 2005.
On the File menu, point to New, and then click Project.
In the New Project dialog box, in the Project Types pane, expand Other Project Types, click Extensibility, and then select Shared Add-in.
In the Name box, type RibbonDemo, and then click OK to create the project.
On the first page of the Shared Add-in Wizard, click Next.
On the Select a Programming Language page, select either Visual C# or Visual Basic, and then click Next.
On the Select an Application Host page, clear all the selections except Microsoft Excel, and then click Next.
On the Enter a Name and Description page, optionally, type a name and description for the project, and then click Next.
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.
Adding References to the Project
To interact with Microsoft Office Excel 2007 and the Office Fluent Ribbon object model, add a reference to the Microsoft Office Core type library.
To add a reference to the project
In Solution Explorer, expand the References folder.
If you do not see the References folder, on the Project menu, click Show All Files.
Delete the Microsoft.Office.Core reference.
Right-click the References folder and then click Add Reference.
Click the COM tab, select Microsoft Office 12.0 Object Library, and then click OK.
At the top of the open code file, add the following statements to the project.
Imports Excel = Microsoft.Office.Interop.Excel
using Excel = Microsoft.Office.Interop.Excel;
Creating the Ribbon Customization XML File
Create the file that adds the components and sets the property for those components.
To create the Ribbon customization XML file
On the Project menu, click Add New Item.
In the Add New Item dialog box, select XML File. Name the new file Ribbon.xml, and then click Add.
In the new XML file, add the XML markup in the section titled "Adding Controls with XML."
Adding the XML File as an Embedded Resource
For best results, use the XML file as a resource within the project's resource file.
To add the XML file as an embedded resource
In Solution Explorer, select Ribbon.xml.
In the Properties window, select the Build Action property, and then select Embedded Resource in the list of options.
On the Project menu, click RibbonDemo Properties.
Click the Resources tab.
In 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.
Close the Resources window. When prompted, click Yes to save the resources.
Accessing the Host Application and Working with the Ribbon
Next, you create an instance of Excel and add the Ribbon interface.
To access the host applications and work with the Ribbon
In Solution Explorer, right-click Connect.cs or Connect.vb, and then click View Code.
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;
Modify the existing first line of the OnConnection method, which creates an instance of the Excel.Application object.
applicationObject = DirectCast(application, Excel.Application)
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
If you are coding in C#, at the end of the public class Connect : statement, add a comma, and then type the following interface name.
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.
Modify the GetCustomUI method so that it looks like the following code.
Public Function GetCustomUI(ByVal RibbonID As String) As String _
string IRibbonExtensibility.GetCustomUI(string RibbonID)
Add the variable declarations and procedures in the section "Assigning Functionality to the Office Fluent Ribbon Components" according to the programming language.
Testing the Project
Now you are ready to run the project.
To test the project
On the File menu, click Save All.
Exit Excel 2007 if it is running.
On the Build menu, click Build Solution.
In Solution Explorer, right-click RibbonDemoSetup, and then click Build.
Right-click RibbonDemoInSetup, and then click Install.
The RibbonDemo Setup Wizard appears.
Click Next on each page, and then click Close on the last page.
The Repurpose Command Demo tab appears. You see the Group Demo group that contains the toggle button. You also see that the toggle button is not depressed, as shown in Figure 1, meaning that its pressed state is False.
Figure 1. Initial state of the toggle button
Now click either the Save button on the Quick Access Toolbar or the Save command on the Microsoft Office Button. The Save (or Save As) dialog box appears.
Next, click the toggle button, and then click the Save button or command. Instead of the Save dialog box appearing, the custom dialog box appears, as shown in Figure 2.
Figure 2. Result of overriding the Save command
Click OK to close the dialog box. The built-in Save dialog box now appears.
In Visual Studio, in Solution Explorer, right-click RibbonDemoSetup, and then click Uninstall.
Watch the Video
Length: 7:30 | Size: 4.52 MB | Type: WMV
There are a number of resources on customizing the Office Fluent user interface.