Customize Office 2010 Ribbon UI programmatically

The Microsoft Office Ribbon is probably one component we all use in almost every MS Office add-in. In today’s post we’ll take a closer look at the Office 2010 Fluent Ribbon UI as well as various ways you can customize it to fit your needs. I am using Add-in Express 2010 for Office and net.

To get started, open Visual Studio and create a new ADX COM Add-in project.

Select your programming language of choice, Microsoft Office 2010 as the minimum version our add-in will support and Microsoft Outlook as the supported application.

Creating custom contextual Office 2010 ribbon tabs

Add a new ADXRibbonTab component to the AddinModule designer by clicking on its toolbar button. Before, we add controls to our new Ribbon, I would like to draw your attention to the tab’s Ribbons and Context properties. Setting the Ribbons property to OutlookMailRead and the Context property to OutlookItem.TabSetAttachments will cause your ribbon tab to only show when the user opens an e-mail and clicks on an attachment.

Add another ADXRibbonTab component, and set its Ribbons property to OutlookExplorer and its Context property to Outlook.TabSetAppointment. This will cause the tab to only show when the user selects an appointment in the Outlook calendar as illustrated in the following screenshot.

Adding various controls to a custom Office 2010 ribbon tab

Next, let’s look at the controls that can be added to a ribbon tab. Add another ADXRibbonTab component and set its Ribbons property to OutlookExplorer. Add a Ribbon Group to the ribbon tab. All ribbon tab controls have to be contained in a ribbon group. Setting the CenterVertically property of the ribbon group to True will cause all controls contained in the group to be vertically centred. If the property is set to False the controls will align to the top of the group.

By default, when adding new controls to an Office ribbon group the controls are added underneath each other. If you would like the controls to be added next to each other, add an ADXRibbonBox control to the group and set its BoxStyle property to Horizontal. By combining Boxes and changing their BoxStyle properties you can accomplish complex layouts. For our example we’ll add an Edit Box, which is similar to a textbox control but has a built-in label. Specify the label text by changing the Caption property and set the size of the edit box by entering a character string in the SizeString property e.g. 'wwwwwwwwwwww’ will cause the edit box to be 12 characters long.

Add a button to the group, and set its Size property to Large and Caption property to Connect… Finally, add a Ribbon Dialog Box Launcher control. This control gives you the ability to show your user any Windows Form. Use this for example when you want to show the user additional options or functionality that you cannot put on a ribbon. To add an event handler for the OnAction event of the Dialog Box Launcher control, double-click in the OnAction event in the controls’ Events list.

To show a Windows form when the user clicks on the control, add the following code:

private void connectionOptionsRibbonDialogBoxLauncher_OnAction(object sender,
	IRibbonControl control, bool pressed)
{
	using (frmConnectionDetails frmConnection = new frmConnectionDetails())
	{
		frmConnection.ShowDialog();
	}
}

At this stage, your Office 2010 ribbon tabs’ design should look similar to the following image:

Add another ribbon group and add an ADXRibbonButtonGroup to the new group. A Ribbon Button Group does exactly what the name implies; it provides you with a way to group ribbon buttons together. The following controls can be added to a ribbon button group in Office 2010 (you can add the same in Office 2007 except for a Ribbon separator):

• button
• split button
• gallery
• menu
• separator

Add a Ribbon Combobox and a Ribbon DropDown. The difference between these two controls are that you can only select existing values that are in the DropDown controls’ list whereas a ComboBox is a combination between a textbox and a dropdown, the user can either choose a value from the list or enter their own.

Another interesting control is the Ribbon Gallery control. By setting the controls’ Columns and Rows properties you can specify how the items in the controls’ items collection are displayed, in the following screenshot the Rows and Columns properties are set to 2 and the control has 4 Items.

Finally, add a menu to the ribbon group. The following controls can be added as child controls to a ribbon menu:

• button
• button
• checkbox
• gallery
• menu
• separator

Below is an image of how different controls can be combined to make up Office 2010 ribbon menu.

To further understand and see the possibilities of the Ribbon Tab, please have a look at the sample project.

Thank you for reading. Until next time, keep coding!

Available downloads:

This sample add-in was developed using Add-in Express for Office and .net:
C# sample add-in