RibbonX Control Type Tour, Part 1

Today’s Guest Writer: Savraj Dhanjal

Savraj is a Program Manager on the Office User Experience team focused on user interface extensibility for Office developers.

This week, we’ll look at the different types of buttons you can create with RibbonX. The Ribbon is a two-dimensional UI space, and as you can see from our built-in groups, there’s a fair amount of variety in controls and control arrangement. The extensibility model exposes much of the richness and flexibility available in the different Ribbon control types, and buttons are no exception. I’ve included some code snippets that you can paste inside the following wrapper, to get valid customUI markup.

Ribbon extensibility, at its core, is about how developers can make a custom button show up in the Ribbon. Profound, isn’t it? 🙂 Anyway, A button can be small or large, and it can show or hide its label. It can also have a tooltip or a super tooltip. Like all custom controls in RibbonX that have images, you can copy the image for this button from a built-in control, using the imageMso property.

Four custom buttons. Each button snags its image from a built-in control.

The canonical example of a toggleButton is the Bold button. You can create your own toggleButtons, and you can make them behave just like the bold button by writing callbacks. By tweaking the XML from the first example, we get a pair of toggleButtons.

There are a few interesting things going on in the image above. First, you might notice that the menu items are large, and each item is displaying its description. You get this visual when you set your menu’s itemSize to large — we call this a “rich menu.” You’ll also notice that the HappyFace icon is a bit blurry. Wondering why? We didn’t create, for Office 2007, a 32×32 version of this icon, because none of the applications use it. Office is scaling up the built-in 16×16 icon. (We could probably write a separate blog entry about the origins of the built-in HappyFace icon.) By the same token, if your add-in only has a large icon, and it needs to display the icon on a small button, Office will scale it down.

Button Arrangement

So you can have big and small buttons, and you can set properties like visibility, enabled state, and the label dynamically. What else can you do? Well you’ve probably noticed the fancy runs of buttons on some of the tabs in the Ribbon applications. You can create your own buttonGroups in RibbonX as well. Just wrap your buttons in this tag, and you get that neat visual style, a throwback to the days of toolbars. For the example below I also grabbed a couple built-in Office controls, using idMso, and these buttons work as you would expect.

Matching the toolbar-esque visual style. The last six buttons are in buttonGroups.

If you’re an icon buff, you’ll be excited to know that RibbonX now supports icon images with 32-bits — 8 bits for red, green, and blue, and 8 bits for an alpha (transparency) channel. The “M” below is a 24-bit PNG with transparency. The soft edge of the shadow is preserved, thanks to the alpha channel. When you hover over the buttons, or when you click on them, you get all of the visual effects of the Ribbon for free.

In the sample above, my C# callback, getM, grabs the PNG file, converts it to an IPictureDisp, and returns it to Office. In CommandBars, transparency was governed by the mask property — which allowed to you “mask off” pixels in your button’s picture property. Before picture and mask, we had copyFace and pasteFace, which are currently deprecated, because calls to these functions overwrite the user’s clipboard.

So that’s a quick preview of a few things you can do with buttons in the Ribbon. Stay posted for more exciting control types.

The list of IDs for the build-in controls as well as images is in the ‘customizing Office UI with RibbonX" document (its on the beta/connect website). Hopefully with Beta 2, its published online so anyone can access it.

I think we need a post dedicated to the strange things that are in office like the HappyFace and bowling ball, oh.. and the Word pinball machine and Excel moonscape.. who knows what’s getting hidden in 2007? 😉

I apologize if this is the wrong place for this, but it’s somewhat related. Is there any blogs on the Office system and it’s programability? I’m interested in what’s new with the macros and VBA and such.

I’m curious why they didn’t reuse the already designed and tested XUL that Mozilla produced. I doubt it would cover all scenarios, but it would seem like a suitable starting point.

At the very least, using XHTML for the pre-existing elements would probably be a good choice. Starting out from scratch to produce a completely new method is not only redundant, but wasteful of developer’s time and resources. Every new system has a learning curve, so using a pre-existing system would help everyone.