With a little experimentation with merging colors I have managed to update the Professional built-in palettes to generate Ribbon colors.

The Office 2007 built-in palettes for Blue, Silver and Black have a big advantage, unlike the Professional palettes, they used fixed colors. It does not matter what display settings you select they always use the same fixed values. This makes life easy as a developer. Just take a screen shot of the real Office 2007 applications and then hard code the RGB values you find using Paint Shop Pro.

Here we have the three fixed schemes.

The Professional 2003 palette is not so simple as it reacts to the display settings. So under XP it appears differently for each of the Blue, Silver and Olive themes. Without themes it acts the same way as the Professional System palette and uses the currently defined system colors.

The upshot is that you need to calculate the color used and this limits how nice I can make it look. I need to ensure the calculation gives a reasonable appearance under all possible system settings. So the algorithm ends up giving a reasonable appearance under all settings but not optimized for any one set. You can judge for yourself on the outcome with the following set of images.

Professional 2003 palette under the XP Blue (Luna) theme.

Professional System palette under XP themes

Professional System palette with the Windows Classic settings. This is how it will look under Windows 2000, Windows 2003 Server and XP/Vista with Classic display properties defined.

And just for fun this is the Slate settings.

As Office 2007 is the latest and greatest set of applications from Microsoft I would suggets most developers will use those built-in palettes. But for those supporting older machines or users that prefer other display settings, at least you know it will look reasonable.

It might have taken a while but the support for Vista Glass is well worth the effort. Although I am not sure how many developers are targetting Vista at the moment.

Here we have the custom chrome showing on XP

And now the same application running on Vista

The is the final actual coding feature of the Ribbon. Now onto updating the System/Professional 2003 palettes so they generate colors for use with the Ribbon.

One of the key selling points of user interface components is the fact they make your application look professional. So I need a new website design.

If you cannot create a professional looking website then why should a potential customer believe you can create professional looking components.

If you cannot be bothered to put the time and effort into creating a nice looking website then why should a potential customer believe you are putting time and effort into the design of the components themselves.

My current website was fine at the beginning when the free Tookit was the only offering. But with the Navigator and upcoming Ribbon release it no longer cuts the mustard. So we need to move the design up a notch.

I’ve been working with a designer to come up with a new website. The new site will not be finished and live until after the release of the Ribbon. Trying to do get a new site up at the same time as finalizing the release is just going to delay both and I really want to the Ribbon out of the door first.

In the mean time here is a little teaser. The company logo has been updated from this existing one….

To this new one…

Design comes down to personal opinion but I think the new one is much better.

The final touches have been made and the design time experience completed for the initial release.

For most of the ribbon elements you can use the left mouse click to select and edit the properties in the properties window. So if you left click a tab you can alter the tab properties as seen here.

This is true for the tab, group, group triple, group lines, group sepatator, cluster, button and label elements. Each of these also has a set of verbs. Verbs are the hyperlink style commands at the bottom of the properties window. They are useful for one click actions that alter the element.

For the above tab element it has entries for moving the tab left and right to change its ordering, for adding a new group inside the tab and for deleting the tab entirely.

There is however a quicker way to access the same set of verbs. Just right click the element and use the context menu that is displayed. Here is the context menu from right clicking a tab…

The context menus have additional options beyond the verbs. For the tab it has a Visible check item you can select to switch runtime visibility. If you right click a group…

A group has extra options for Visible, Allow Collapsed and Dialog Launcher. The Allow Collapsed determines if at runtime the group can be collapsed to just a button that shows a popup of the group contents. Dialog Launcher determines if the small button on the bottom right of the group is present for initiating a modal dialog box.

Here is a button element context menu…

Here you have Visible, Enabled, Checked and Type. The Checked property is only used by the button when the Type is defined as Check. Use the Type submenu to alter the button operation from the default of Push.

The combination of left click for selection, right click for context menus and helper elements for creating new objects should make the design time experience quick and simple.

The goal of the design time experience is to make it quick and easy to setup the ribbon. Here is my first attempt at making it simple to add new tabs, groups and items.

When you drag and drop a ribbon onto a form you get the a bare ribbon with no tabs. However, you do get a design time element on the tabs area called ‘Tab’ that can be pressed to add a new tab instance.

Press the ‘Tab’ element a couple of times and you get the following.

Inside each tab is a ‘Group’ element. Click it twice to get two groups.

Inside each group is a ‘New’ element. When pressed this presents a context menu so you can select the type of element to add into the group. Here you can see the three choices.

We select the ‘Triple’ which causes a new triple group container to be added and populated with three button instances.

I decided that it made sense to automatically populate the group containers with items rather than add them empty. You’re not going to add a container without then adding items inside so it makes sense to give you some to start with. You can always delete ones you don’t need.

For the second group we will select the ‘Lines’ option.

You will notice that the triple container does not have a design element inside it. This is because the triple container can only have three items and three are present. But if you removed one it would then show a design element making it easy to add an item.

The lines container can have any number of items and so you will always see the ‘Item’ design element inside it. Clicking the element gives a context menu that can be seen below.

Selecting the ‘Cluster’ option creates a group cluster populated with two items and an ‘Item’ design element. As the cluster can have any number of contained buttons this element is always present.

Having all these design element makes it quick to create the contents of the ribbon, but make it hard to visualize how the ribbon will appear at runtime. So the ribbon has two display modes, the default that shows all the design elements and another that hides them. You can use the smart tag for the control to turn off the design elements.

When you turn them off you can see how the ribbon will appear at runtime.

I’m not sure about the colors and text used on the design elements, do they look distinct enough that it is easy to see what is happening? If you have any feedback on how it could be improved then feel free to pipe up!