Go on…Make the Microsoft Office UI look the way you want it to
As promised, I'm going to show you how to customize the Office 2007 Ribbon. If any of you attended the TechEd EMEA conference, you may have seen me do a demo where I customized the ribbon using Visual Studio 2005 but now I'm going to show you how to do it using Visual Studio 2005 for the 2007 Microsoft Office System Second Edition (VSTO SE). Trust me…it's much, much easier. There's much less setup code to write and in fact you can have a custom ribbon up and running in just a few, easy steps.
Before I launch into this step-by-step tutorial, I want to point out that I'll be doing an MSDN webcast on custom UI development in Office 2007. In the webcast, I'll be going through a demo I created where I customize the ribbon, create a custom task pane and an outlook form region all using VSTO SE. More info is available here: https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032318957&Culture=en-US.
Back to customizing the Ribbon using VSTO…In this exercise we're going to work with the ribbon in Excel to create a basic custom tab with a simple callback.
STEP 1: Download VSTO SE
STEP 2: Create a new project
Startup Visual Studio 2005 and create a new project. Under your language preference node (C#, VB.NET, etc. – I'm using C#), click on the "Office" node, then the "2007 Add-ins" node, then "Excel Add-in" and click OK.
VSTO SE gives you all the templates under the Office node so you not only get the ones for Office 2007 but for Office 2003 as well. This means that your solutions built on previous versions will run just fine if you are using VSTO SE.
STEP 3: Add Ribbon Support
The first thing you will see is that you have two methods: ThisAddIn_Startup and ThisAddIn_Shutdown. These methods actually wrap up a lot of the methods that you would have to manually write yourself in VS 2005 sans VSTO SE. They are awesome wrapper classes that save you a lot of time. You can just get right down to work. You'll also notice that all of the appropriate references are there, no need to add the basics.
Right-click on the project file, go to add > New Item… and then click on Ribbon Support. Click ok and as you do, you will see that two new files are added: Ribbon1.cs and Ribbon1.xml. Ribbon customization is almost solely based on xml customization so Ribbon1.xml defines the exact structure of what the UI will look like.
Let's take a look at Ribbon1.xml…
<customUI xmlns="https://schemas.microsoft.com/office/2006/01/customui" onLoad="OnLoad">
<ribbon>
<tabs>
<tab id="MyTab"
label="My Tab">
<group id="MyGroup"
label="My Group">
<toggleButton id="toggleButton1"
size="large"
label="My Button"
screentip="My Button Screentip"
onAction="OnToggleButton1"
imageMso="HappyFace" />
</group>
</tab>
</tabs>
</ribbon>
</customUI>
The first line references the schema definition file which is used to build the xml. You need it so that when you fill in these xml fields, you'll have that intellisense which will make life much easier. After that we have a callback called OnLoad. A callback is basically where the XML "calls back" into the managed code. In this case, it's calling back into the OnLoad method in Ribbon1.cs. There's a good read on MSDN about callbacks here.
What I love about VSTO SE is that not only do they give us a set of templates with methods which wrap up a bunch of plumbing code, they also give us examples to help us get started. Here, we already have an existing, working code sample ready for us. In the XML structure, we can see that within the ribbon and within the set of tabs there is a tab called "My Tab" with a group called "My Group" with a toggle button which has a happy face on it. Another cool thing about Office 2007….it comes preloaded with hundreds of images so that you don't have to do all that work to load up your own bitmaps and such. If you want to reference your own picture, you use the tag "image". If you want to use one of the Office 2007 pre-loaded images, you use the tag "imageMso". Very easy and very cool.
STEP 4: Clean up Ribbon1.cs
If you go into Ribbon1.cs, you'll notice that the partial class ThisAddIn is commented out; uncomment that. If you've implemented ribbon customization in VS 2005 before, you can see the drastic reduction in code here. If you expand the callbacks region, you'll see the OnLoad method I had mentioned above which is called from ribbon1.xml to load the XML file. You'll also notice that the hard-working people at VSTO have implemented some code behind the toggle button (a callback) so that when someone presses the toggle button, a message box comes up saying it's pressed. Below that are methods which you also had to write yourself if you didn't have VSTO which basically read in the ribbon XML file into the Office application.
STEP 5: Ready, set, BUILD!
This is the exciting part. Build your solution and in the Solution pane under ExcelAddin1Setup, install it. Go through the wizard, click F5 and voilà! Excel open with a custom tab called "My Tab" which has a happy face which pops up a message box when you press it.
In FIVE easy steps!
Now the point isn't to not right any code, the point is to give you documentation, and to write the plumbing code for you, so you won't have to. This gives professional developers the power back to go be their productive selves and newer developers the ability to learn with less frustration.
This post highlights ribbon customization basics and I'm just going to keep building from here. Stay tuned….
Comments
Anonymous
December 02, 2006
Good post. VSTO 2005 SE also provides Intellisense for Ribbon.xml - it is just not on by default. But Eric Carter outlines the steps to enable it http://blogs.msdn.com/eric_carter/archive/2006/11/10/getting-ribbon-xml-intellisense-in-vsto-2005-se.aspxAnonymous
September 05, 2007
This works, but if you try to create a setup, the build fails with no explanation.Anonymous
February 18, 2009
This working great for me but I just can’t work out how to embed custom PNG images and reference them in the ribbon xml the way the Office 2007 Custom UI Editor does it.Anonymous
March 02, 2009
Is this same procedure won't work for Outlook 2007. I folloed the same steps but I am unable to get the My tab in my new mail message window. If I am wrong please explain me the procedure. Thanks in advance