OfficeTalk: Customizing the Word 2007 Fluent Ribbon is as Easy as 1-2-3 (Part 2 of 2)

  • Article

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.

Summary: Explore scenarios using the free Custom UI Editor in part two of this two-part series. The Custom UI Editor is a must-have for developers creating custom user interfaces in the 2007 release of Microsoft Office.

Frank Rice, Microsoft Corporation

May 2008

Updated: March 2010

Applies to: Microsoft Office Word 2007

Contents

  • Adding Images to the Ribbon

  • Adding Templates to the Custom UI Editor

  • Conclusion

  • Additional Resources

In part one of this series of columns you saw how easy it is to create a customized Microsoft Office Fluent Ribbon (hereafter known as the Ribbon) with the Custom UI Editor. In this segment, you will see that adding images to the controls on the Ribbon with the Custom UI Editor is just as easy. Additionally, you can simplify the customization process by adding templates to the editor.

Adding Images to the Ribbon

The Custom UI Editor also makes it very easy to add images to a customized Ribbon. There are two types of image attributes that you use to add images to controls on the Ribbon: the imageMso attribute is used to add icons that are built into Microsoft Office; the image attribute is used to add custom images to the Ribbon. In the following procedures, you add both types of images.

Note

In the following procedures, you import an image of your choice into the Custom UI Editor. As a rule of thumb, images should be either 16 X 16 for small controls, or 32 X 32 for large controls, both with 96dpi. These images can be one of the following formats: PNG, BMP, ICO, WMF, JPG, and GIF.

Add images to the Ribbon controls

  1. In the Custom UI Editor, open the document that you have been working with thus far.

  2. In the Custom UI tab, replace the code there with the following XML.

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
  <ribbon startFromScratch="false">
    <tabs>
      <tab id="customTab" label="My Tab">
        <group id="sampleGroup" label="Sample Group">
          <button id="button1" label="Click Me" 
           size="normal" imageMso="HappyFace" 
           onAction="myButtonMacro" />
          <button id="button2" label="Click M Too" 
           size="normal" image="myImage" 
           onAction="myButtonMacro" />
        </group >
      </tab>
    </tabs>
  </ribbon>
</customUI>

  3. Make sure that you haven't made any mistakes in your code by clicking the Validate button on the toolbar.

  4. Now import a custom image named myImage by clicking the Insert Icons button on the toolbar. Notice that the image file is imported into the Custom UI Editor without a file extension.

    Looking at the XML, notice that button1 uses the imageMso attribute to specify an image. Any attributes that end in Mso refer to built-in functionality. In this case, the HappyFace icon is an image built into Microsoft Office.

    Next, button2 uses the image attribute. This attribute is used to refer to a custom image; in this case, the image that you imported into the Custom UI Editor.

  5. To see the results of your actions, click the Save icon on the toolbar and then close the Custom UI Editor.

  6. Open the Word 2007 document. On the My Tab tab, the images for the two buttons should look similar to those shown in Figure 1, with the exception of the custom image that you used.

Figure 1. The two buttons now have a built-in and custom icon

Adding Templates to the Custom UI Editor

There are times that you use the same basic structure of XML in different documents. For example, the XML for the <customUI> element and the <ribbon> element are the same for all Microsoft Office applications that support the Ribbon. It can be tiresome to have to type in the same information for each use. To eliminate this need, you can use the Custom UI Editor to store and access custom templates.

Add a custom template to the Custom UI Editor

  1. To start, use Notepad to create a text file and add the following code into it.

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
  <ribbon startFromScratch="false">
    <tabs>
       <!-- Your tabs and controls go here -->
    </tabs>
  </ribbon>
</customUI>

  2. Save the file in the folder C:\Program Files\CustomUIEditor\Samples with the filename RibbonTemplate.xml.

  3. Finally, open the Custom UI Editor, click the Insert menu, and then point to Sample XML. Assuming that the file is in the correct location, the new template is displayed and available for you to use as shown in Figure 2.

  4. Click it and it is displayed in the Custom UI tab, ready for you to customize.

Figure 2. The custom template is available on the Insert menu

Conclusion

The information presented in this column showcases some of the options available win the Custom UI Editor. Even if you do not use the editor to customize the Ribbon in a Microsoft Office application, you can still use it to validate your XML and to generate the correct callback signatures. In any case, the Custom UI Editor makes customizing the Ribbon very easy and is a must for any developer who wants to create easy-to-use applications in the 2007 release of Microsoft Office.

Additional Resources

You can learn more about the topics discussed in this column and download the Custom UI Editor at the following locations.