Give the look-and-feel of Microsoft Office colors to your custom .NET controls

Posted on Friday, March 21st, 2008 at 1:52 pm by Eugene Astafiev.

To make your controls look like Office ones isn’t a simple task. When Office developers show .NET controls in their add-ins or standalone applications, they have to customize controls in order to comply with the Office color styles. The common question in our support flow is: Do you have Office colors, can you please send them to me? If you are asking the same question, you will find the answer it in this post. Also, I will show you some tricks for customizing .NET controls. But I believe that you just underestimate the pain you might have when you start creating such controls :)

For example, imagine the following situation: you develop an add-in which shows some data from a database. For this task, standard Office controls are practically useless, because their number is limited: button and combo box. Besides the obvious fact that such controls don’t fit for the task, they are toolbar controls and you can use them on Office toolbars only. Isn’t it better to show data using data presentation controls, such as DataView, ComboBox, TextBox, RichTextbox, etc designed specially for this purpose? You can show them in separate forms, on custom task panes in Office 2007, on toolbars, and on pre-Office 2007 panes. BTW, Add-in Express .NET and Add-in Express for VSTO allows you to place .NET controls onto Office toolbars, create custom task panes in Excel 2000 -2007, Advanced Form Regions for Outlook 2007 – 2000.

But you know that look-n-feel of these controls differ from standard Office controls. How to cope with this? Remember the rule of thumb: if you can’t do something with ready-to-use components, customize them! As a .NET developer you can inherit any existing control and add your own logic to it. That is the right way. Let’s follow it.

To make your controls comply with Office styles, you should know how Office paints its controls.

Microsoft Office 2000

The color scheme of the MS Office 2000 is almost completely based on colors of the operating system. Just change a system color, and Office 2000 will reflect this change without any unexpected mismatches. To search for Office colors, you use the PrintScreen button and any graphic editor which is able to determine RGB components of a pixel. For instance, you can use Paint.NET. Using this or some other graphic editor you can study every detail of a command bar control (which is an essence of pre-Ribbon coloring approaches) or any other area of all Office applications.

Microsoft Office 2002 & 2003

Some colors in Office 2002 and 2003 are identical to system colors but others look like computed using a combination of system colors. Unfortunately, I am not good at guessing them. And you?

.NET Framework 2.0 provides two classes to help you in searching Office colors:

System.Windows.Forms.ProfessionalColorTable
System.Windows.Forms.ProfessionalColors

These classes allow your colors to approach (no more than that) to Office colors. All Office 2003 applications have color gradients vertical and horizontal in toolbars and toolbar controls. These classes give you the beginning, middle and ending colors of Office gradients.

Microsoft Office 2007

Microsoft presented a new GUI Ribbon, also known as Fluent UI. Only the following Office applications use this new GUI:

Word
Excel
PowerPoint
Outlook (except for the Explorer window)
Access

Others use the traditional command bar model. The color scheme of Microsoft Office 2007 isn’t based on Windows system colors. Instead, all Office 2007 applications use three predefined schemes:

Black
Blue
Silver

To switch between them, you use the Options menu in any Office application that uses the Ribbon UI.

Add-in Express provides the OfficeColorSchemeChanged event that allows tracking changes in the color scheme. The second parameter in the event handler is of the AddinExpress.MSO.OfficeColorScheme type. To get the current color scheme, you use the OfficeColorScheme property. Believe me, this part is an easy one.

High contrast mode

This mode is used in the operating system to improve readability. To turn this mode on or off, you can use Alt + Shift + PrtScr shortcut (left Alt and Shift buttons only) or use settings in the Control Panel. To find out whether the user has enabled the high-contrast mode you need to check the following static property:

System.Windows.Forms.SystemInformation.HighContrast

In the System.Windows.Forms.SystemInformation (supported in all versions of the .NET platform), you can find a lot of useful information about system settings such as current GUI settings of the OS and such.

Changing color schemes

When the user changes the system color settings, Windows notifies all windows on the system. In .NET, you can subscribe to the UserPreferenceChanged event of the SystemEvents class. Consider the following code:

[VB.NET]
AddHandler Microsoft.Win32.SystemEvents.UserPreferenceChanged, _
   AddressOf SystemSettingsChanged
 
....
 
Private Sub SystemSettingsChanged(ByVal sender As System.Object, _
   ByVal e As Microsoft.Win32.UserPreferenceChangedEventArgs)
   If (e.Category = Microsoft.Win32.UserPreferenceCategory.General) Then
      '
   End If
End Sub

[C#]
Microsoft.Win32.SystemEvents.UserPreferenceChanged +=
new Microsoft.Win32.UserPreferenceChangedEventHandler(
         SystemEvents_UserPreferenceChanged);
 
...
 
void SystemEvents_UserPreferenceChanged(object sender,
   Microsoft.Win32.UserPreferenceChangedEventArgs e)
   {
      if (e.Category == Microsoft.Win32.UserPreferenceCategory.General)
      {
         //
      }
   }

In the event handler, you choose new colors and update your custom control view.

Gradients and fonts

As you can see, Office 2003 and 2007 toolbars are filled with a gradient. Note, however, that the gradient may differ depending on the position of the command bar: horizontal, vertical, and floating

When customizing .NET controls, remember about fonts. Office toolbars’ fonts are based on system fonts listed in System.Drawing.SystemFonts. You can use UserPreferenceChanged to track one or several system fonts that Office controls depend on (you have to determine this yourself). To apply a font to your controls, you have to use the System.Drawing namespace.

Eugene Astafiev
Add-in Express Team