Hiding Tabs on the Office Fluent Ribbon Using a Toggle Button

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:   Performing various actions on the 2007 Microsoft Office Fluent user interface (UI), such as hiding tabs, requires only a few lines of XML and programming code.

Office Visual How To

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

Frank Rice, Microsoft Corporation

May 2007

Overview

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 Ribbon, context (right-click) menus, the Quick Access Toolbar, and the Microsoft Office button are all parts of the Office Fluent interface. 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 .NET and Microsoft Visual C#, as well as Microsoft Visual Basic for Applications (VBA), Microsoft Visual C++, and Microsoft Visual Basic 6.0.

Code It

You can use a combination of XML and programming code to add your own custom controls to the Office Fluent Ribbon or perform actions on the Office Fluent Ribbon.

Adding Controls with XML

XML provides a hierarchical, declarative model of the Ribbon. You add controls, such as toggle buttons and tabs, to the Office Fluent 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. An example of the XML markup follows:

This sample adds a custom tab named Hide Built-In Tab Demo to the Office Fluent Ribbon by assigning text to the tab element's label attribute. This tab contains the Demo Group group, which contains a toggle button control named togglebutton1. The code includes another tab with the id of TabView. I'll discuss this tab in more detail shortly.

The togglebutton1 control has properties defined by using attributes such as imageMso, getPressed, 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 toggleButton also defines the imageMso attribute. This attribute points to an image built into Microsoft Office. You can determine this by the Mso suffix. Attributes with the Mso suffix always point to built-in functionality. To point to a custom image, you use the image attribute as in image="MyImage".

The onAction and getPressed attributes are next. These attributes point to programming code called callback procedures. Callback procedures are discussed in more detail in the "Assigning Functionality to Office Fluent Ribbon" section.

Finally, I already mentioned the TabView tab. Because the control uses the idMso attribute, you know that it is pointing to a built-in tab; in this instance, the View tab that you see on the Office Fluent Ribbon in Office Excel 2007. However, by explicitly defining the control this way, you have access to its functionality and can use it for your own purposes. So in this instance, I am overriding the visible property of the control by using the getVisible attribute to point to a callback procedure. You still have the functionality you normally see with the tab, meaning all of the controls and commands that you would normally see, but you can take over other properties of the control. You will see how this works shortly.

Assigning Functionality to Office Fluent Ribbon Components

In the previous XML sample, some of the attributes point to callback procedures. For example, the toggleButton element has an onAction attribute. When the button is clicked, the flipViewTab method, or callback procedure, is called. These procedures are called callbacks because when the button is clicked, the action alerts Microsoft Office that the control needs its attention. The code in the flipViewTab method gives the toggle button its functionality. When the button is clicked, Microsoft Office 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 flipViewTab callback procedure.

When the Office Fluent Ribbon is loaded, a reference to the Office Fluent Ribbon is created and assigned to the myRibbon variable. In addition, the showViewTabBool variable is created to trigger the visible state of the built-in tab. When the flipViewTab procedure is called by Microsoft Office, an IRibbonControl object representing the toggle button is passed in. In addition, a Boolean value representing the pressed state of the button is passed to the procedure. The procedure assigns the pressed state of the toggle button to the showViewTabBool variable and then calls the Invalidate method of the Office Fluent Ribbon to repaint the Ribbon.

At the same time that the flipTabView method is being called, the buttonPressed method for the toggle button is being called. The buttonPressed callback procedure returns a Boolean value to Microsoft Office that specifies the pressed state of the button. If the call resolves to True, the button is displayed as depressed. Returning False (the default value) specifies that the button's initial display state is not depressed.

Finally, the showViewTab callback procedure for the TabView tab is called. This method returns a Boolean value that determines the visible state of the tab. In this case, the procedure returns a value that is the opposite of the pressed state of the toggle button.

To summarize, when the pressed state of the toggle button is True, the visible state of the tab is False, the tab is hidden, and the button is displayed as depressed. When the toggle button is displayed as not depressed, the tab is visible.

Read It

There are two ways to deploy a custom Office Fluent Ribbon:

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

  • Use an add-in.

The technique you choose depends on the scope you need for the customized Office Fluent Ribbon. For example, modifying an Open XML file results in document-level customization where the customized Office Fluent 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 Office Fluent Ribbon applies to the entire application regardless of which document is open.

Creating a customized Office Fluent Ribbon using an Open XML file is not complicated.

To create a customized Office Fluent Ribbon using an Open XML file

  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 Microsoft Office application.

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

Using an add-in to customize the Office Fluent Ribbon is also 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 Microsoft Office. Then add programming procedures that give the custom Office Fluent Ribbon its functionality.

Hiding Tabs on the Office Fluent Ribbon

In the following procedure, you create a custom tab containing a custom group and toggle button that will hide or display the built-in View tab on the Ribbon in Office Excel 2007.

Creating the Add-In Solution

There are nine steps to create the project.

To create the add-in solution adding custom buttons to the Office Fluent Ribbon

  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.

Adding References to the Project

To interact with 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

  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.

    NoteNote
    A reference to the Excel 2007 object library was automatically created when you initially created the project and specified the host application.
  5. At the top of the open code file, add the following statements to the project.

  6. Insert the following code to create a reference to the Ribbon:

Creating the Office Fluent Ribbon Customization XML File

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

To create the Office Fluent Ribbon customization XML file

  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".

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

  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.

Accessing the Host Application and Working with the Ribbon

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

To access the host applications and work with the Office Fluent Ribbon

  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.

  3. Modify the existing first line of the OnConnection method to create an instance of the Excel.Application object.

  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.

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

  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.

  8. 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

  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 Hide Built-In Tab Demo tab appears. You also see the Group Demo group containing the toggle button. You also see that the toggle button is not depressed and that the View tab is visible.

    Figure 1. The initial state of the toggleButton and View tab


    Initial state of the toggle button

  8. Click the toggle button.

    Notice that the View tab is now hidden.

    Figure 2. Click the toggleButton to hide the View tab


    Click the toggle button to hide the view tab

  9. Exit Excel.

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

See It Hiding Tabs on the Office Fluent Ribbon

Watch the Video

Length: 5:10 | Size: 3.10 MB | Type: WMV

Explore It

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