Customizing the BuiltIn Ribbon

Rather than create your own tab, you might instead want to customize an existing built-in tab. Remember that just because you can do something, it doesn't mean that you should! There are some things to keep in mind as you customize the Ribbon. Although you can hide tabs and groups, you should avoid doing so. Other installed add-ins might rely on these built-in items that you've hidden.

You cannot add buttons to a built-in group. This is unfortunate because in some situations it would make sense to add a new button to an existing group. For example, in Chapter 6 you learned how to create a new button called BoldItalic and place on the same toolbar as the built-in Bold button. This is not possible in Office 2007. You could hide the existing Format tab and then re-create your own, reusing the built-in controls and adding your own controls, but this approach is not recommended (although many people will probably take this approach to place controls logically on the Ribbon). Instead, you can add a new group to a built-in tab and then customize your new group.

In this section, you'll create a Word add-in and use the Ribbon item to add a new group to the Home tab. You'll add two buttons that use existing functionality not currently found on the Ribbon, and you'll add a custom BoldItalic button to this new group.

1. Create a new Word 2007 add-in project using VSTO 2005 SE.

2. Right-click the project, point to Add, and then click New Item.

3. In the New Item dialog box, select Ribbon support.

4. Leave the default name Ribbon1, and click Add. This action adds the Ribbon1.vb code file and the Ribbon1.xml file to your solution.

5. In Solution Explorer, right-click Ribbonl.xml and click Open.

6. Replace the code in Ribbonl.xml with the code in Listing 14.3.

Listing 14.3. Adding XML markup to Ribbonl.xml

<customUI xmlns=

"" onLoad="OnLoad"> <ribbon> <tabs>

<tab idMso="TabHome">

<group id="NewFont" insertAfterMso="GroupFont" label="More Fonts"> <toggleButton idMso="TextAllCaps" /> <toggleButton idMso="UnderlineDouble" /> </group> </tab> </tabs> </ribbon> </customUI>

This XML markup adds a new group labeled "More Fonts" right after the built-in group named GroupFont on the built-in tab named TabHome. On the new group, two toggle buttons are added: one for changing the selected text to all caps, and the other for adding double underlines to the selected text. When you run this code, the new group appears in the Home tab, and it displays the All Caps and Double Underline buttons, as shown in Figure 14.18.

The label for the Double Underline button is quite long, and you can make further revisions to the XML file to modify it. Additionally, Figure 14.19 shows that if you place your cursor over these buttons, the labels are displayed, but no descriptions appear. You can add the descriptions to the control's supertip attribute.

Change the attributes of the toggle buttons, as shown in Listing 14.4, and then press F5 to run the code.

Home Insert Page Layout References Mailings Review View

Paste .


a^ All Caps ê Double Underline

Calibri (Body) - 11 A* a' ft

:= * !

B I U ik X, fifia - ¿

m ■

Clipboard ^

Font !»

More Fonts

Figure 14.18. New group added to the Home tab

Home Insert Page Layout References Mailings Review View

Paste +


All Caps

Calibri (Body) - 11 - A' a'

^ Double Underline

B I U at* x2 X1 fln.3 - ^

More Fonts

m m m i

Clipboard **

Font fä


J Double Underline [Ctrl+Shift* D) [

J Double Underline [Ctrl+Shift* D) [

Figure 14.19. Label for the Double Underline button

Listing 14.4. Adding descriptions to controls

<toggleButton idMso="TextAllCaps" supertip="Make the selected text all caps." /> <toggleButton idMso="UnderlineDouble" label="Dbl Underline" supertip="Double underline the selected text."/>

This time, when you place your cursor over the control, a description is displayed, as shown in Figure 14.20.

Figure 14.20. Descriptions added to controls

Next, you'll add a new toggle button to the More Fonts group and add a custom icon to the button.

1. Create a bitmap to represent the BoldItalic button, as you did in Chapter 8. Name the file BoldItalic.bmp.

2. In Solution Explorer, right-click the solution (e.g. WordAddin1) and select Properties.

3. Click the Resources tab, and then click Add Existing File from the Add Resource drop-down.

4. Navigate to the BoldItalic.bmp file to add it to your project.

5. In Solution Explorer, select the BoldItalic.bmp file and set the Build property to Embedded Resource, as shown in Figure 14.21.

Next, add the code in Listing 14.5 to the end of the Ribbon1.vb code file, after End Class. This action adds a new class to your project that converts bitmaps to a picture type (IPictureDisp) that the Ribbon understands.

Figure 14.21. Bolditalic bitmap

Listing 14.5. Adding the BitmapToIPicture class

Public Class BitmapToIPicture

Inherits System.Windows.Forms.AxHost

Public Sub New()

MyBase.New(Nothing) End Sub

Public Shared Function Convert(ByVal _

Image As System.Drawing.Image) As stdole.IPictureDisp

Convert = GetIPictureFromPicture(Image)

End Function End Class

0 0

Post a comment