Ty Anderson

PowerPoint UI Customization: custom ribbons, toolbars, menus

I can’t help but think of PowerPoint being the forgotten child of the Office family. It’s there and we think it be fun to do something fun with it… but we are too busy playing with the other kids to give it much attention. A pat on the head? Sure. But a full blown solution? Yeah, sometimes.

In my last article, I discussed the PowerPoint object model. Today, I want to discuss the various ways we can customize the PowerPoint user interface.

What is customizable?

Before we begin, go ahead and open Visual Studio 2013 and create a new Add-in Express based COM Add-in project. For our purposes today, it does not matter which language you choose (VB.NET, C# or C++.NET) because we will not write any code. Just be sure to select Office 2003 as minimum supported Office version and PowerPoint as the supported application. After you do this, you’re ready.

Create a custom ribbon for PowerPoint

With the project open in Visual Studio, open the AddinModule in design view. This design is the place to add our user interface customization. For a custom ribbon, complete the following steps:

  1. Add a new Ribbon Tab component (ADXRibbonTab) to the AddinModule. Set the following properties for the tab:
    1. Name=PPTCustomRibbon
    2. Caption=MY SLIDED
    3. Ribbons=PowerPointPresentation
  2. Add an ImageList control as well to contain the icons for the ribbon buttons. The ribbon buttons will be large buttons. Thus, set the ImageSize=32,32. We need three icons so add three, 32×32 icons to the Images collection of the ImageList control.
  3. In the designer, select the PPTCustomRibbon and use the table below as a guide to add additional controls and set their properties.
Control Parent Properties & Values
ADXRibbonGroup CustomRibbon Caption=Slides
ADXRibbonButton AdxRibbonGroup1 Caption=Show Slide LibraryImageList=ImageList1Image=0

Size=Large

ADXRibbonButton AdxRibbonGroup1 Caption=Add Slide to LibraryImageList=ImageList1Image=1

Size=Large

ADXRibbonGroup  CustomRibbon Caption=Options
ADXRibbonButton ADXRibbonMenu1 Caption=OptionsImageList=ImageList1Image=2

Size=Large

After completing your custom ribbon, it should look similar to this:

Designing a custom PowerPoint ribbon in Visual Studio

With this configuration, the custom ribbon will display in PowerPoint as the last tab on the right. If you want to change the display order of the tab, you can edit the InserAfterIdMSO value. This property tells the add-in which tab will precede our custom tab in the display order.

Of course, a custom ribbon does not always have to be an additional tab. You can integrate your ribbon customization within any built-in tab by configuring the IdMSO property. Use this property to space the tab where your customizations should reside and they’ll be there during runtime.

If you need to know the values for these tabs, Microsoft has a ribbon control reference here.

Custom toolbars (commandbars) for PowerPoint

Microsoft has left the traditional Office toolbar in the past. But, old versions of Office live-on on Windows XP desktops throughout the world. This is not a problem for us as our designers make it easy to build custom toolbars… and you can do it in the same project as one with custom Ribbons (something we call version neutrality).

To build a custom toolbar, add an ADXCommandBar control the AddinModule and set the following properties:

  • Name=PPTCustomCommandbar
  • CommandBarName = My Slides
  • SupportedApps = PowerPoint

Now add some controls to the PPTCustomCommandbar according to the table below:

Control Parent Properties & Values
AdxCommandBarButton PPTCustomCommandbar Caption=Show Slide LibraryImageList=ImageList2Image=0

Style=adxMsoButtonIconAndCaption

AdxCommandBarButton PPTCustomCommandbar Caption=Add Slide LibraryImageList=ImageList2Image=1

Style=adxMsoButtonIconAndCaption

AdxCommandBarButton PPTCustomCommandbar Caption=OptionsBeginGroup=TrueImageList=ImageList2

Image=2

Style=adxMsoButtonIconAndCaption

Oh, you probably noticed already… we need an additional ImageList control. This one needs to contain icons that are 16×16 pixels. So, please follow the steps from above and do everything the same except use 16×16 icons.

When done, your custom PowerPoint toolbar should look a bit like this:

Designing a custom PowerPoint toolbar in Visual Studio

Clearly, your icons may vary from mine. And, if they do, I have hunch yours looks just as nice as mine.

How to customize main menu of PowerPoint

The older versions of Office have a menu system known as the main menu. This is something the recent version lack as the ribbon serves as the menu and toolbar. Just add an ADXMainMenu control the AddinModule and name it PPTMainMenu. Then add the following controls and settings.

Control Parent Properties & Values
AdxCommandBarPopUp PPTMainMenu Caption=My SlidesImageList=ImageList2Image=0

Style=adxMsoButtonIconAndCaption

AdxCommandBarButton AdxCommandBarPopup1 Caption=Toggle My Slides ToolbarStyle= adxMsoButtonCaption
AdxCommandBarButton AdxCommandBarPopup1 Caption=Edit My Slides OptionsImageList=ImageList2Image=2

Style=adxMsoButtonIconAndCaption

When configured, your custom item of PowerPoint’s main menu should look like this:

Designing a custom item for PowerPoint main menu in Visual Studio

Creating custom context menus for PowerPoint

Let’s build two context menus. One for the recent versions of PowerPoint 2010 and 2013 and one for the older versions of PowerPoint 2007 and 2003. Let’s start with the ribbon and work backwards.

Custom ribbon context menu for PowerPoint 2010 and 2013

For a custom ribbon context menu, add a Ribbon Context Menu component (ADXRibbonContextMenu) to the AddinModule and name it PPTRibbonContextMenu. Set its Ribbons property to PowerPointPresentation. Next you need to specify the context for your ribbon context menu. The ContextMenuNames property allows to make this specification. You can select multiple contexts using the Context Menu Names dialog:

You can select multiple contexts using the Context Menu Names dialog.

After these steps, you just need to add the controls you want for your custom PowerPoint right-click menu. I did the following:

Control Parent Properties & Values
AdxRibbonButton PPTRibbonContextMenu Caption=Apply Default Transition
AdxRibbonButton PPTRibbonContextMenu Caption=Apply Default Animation
AdxRibbonMenuSeparator

PPTRibbonContextMenu

 
AdxRibbonButton PPTRibbonContextMenu Caption=Add a comment…

And my PowerPoint ribbon context menu looks like this:

Designing a ribbon context menu for PowerPoint 2010 and 2013

Traditional context menu for PowerPoint 2007 and 2003

Creating a traditional PowerPoint content menu for PowerPoint 2007 and earlier is similar to what you just did with the ribbon context menu. The main difference is you don’t specify which contexts. There is only one context menu. Thus, your customizations reside on the context menu no matter the context.

To add this type of customization, add an ADXContextMenu to the AddInModule and name it PPTContextMenu. Specify PowerPoint in the SupportedApp property. Complete its design by adding the following controls and related properties:

Control Parent Properties & Values
AdxCommandBarButton PPTContextMenu Caption=Apply Default Transition
AdxCommandBarButton PPTContextMenu Caption=Apply Default Animation
AdxCommandBarButton PPTContextMenu Caption=Add a comment…

The result of this effort is our own right-click menu for PowerPoint 2007 and lower:

Designing a traditional context menu for PowerPoint 2007 and lower

Keep in mind you are not limited to these controls. I recommend you experiment with the other controls provided in the visual designer toolbar.

Advanced task panes for PowerPoint 2013 – 2000

PowerPoint supports custom task panes and we provides the ability to charge them with advanced task panes provided by Add-in Express. Task panes display vertically within the PowerPoint window. Our advanced task panes support additional displays options that allow you to display them in one of four locations (left, right, top, or bottom). Add-in Express also provides the capability to allow users to move the task pane to any of the supported locations.

To create an advanced task pane, follow these steps.

  1. Add an ADXPowerPointTaskPanesManager control to the AddinModule. Leave it for now. We’ll come back to it.
  2. In the Visual Studio menu, click Project > Add New Item to display the Add New Item dialog. Locate the Add-in Express Items > PowerPoint node. Then select the ADX PowerPoint Task Pane template, name it TemplateGallery and click Add.
  3. For the design of the task pane, add a few Windows Form controls (you will need to open TemplateGallery in design view). For my design, I used basic controls to show what’s possible… even at a basic level:

Designing an advanced PowerPoint task pane

  1. Return to the AddInModule and select the ADXPowerPointTaskPanesManager created in step two. We need to add the TemplateGallery task panes to its Items collection. Click the “… ” button in the Items property to open the ADXPowerPointTaskPanesCollection Editor.
  2. In this editor, click ADD and configure the properties according to this screenshot:

Task Panes Collection Editor

These settings will cause the task pane to initially display vertically on the right side of the PowerPoint window. But the AllowedDropPositions and IsDragAndDropAllowed properties allow the user to move the task pane to any of the four supported areas.

Custom Backstage view for PowerPoint

The back stage is meant to be an “out of the way” location for features that don’t work with presentation content. Thus, it is a good place for settings and admin-related features. You can quickly build a back stage customization by adding an ADXBackStageView control to the AddinModule.

  1. Set the following properties for ADXBackStageView1
    1. Ribbons=PowerPointPresentation
    2. Name= PPTBackStageView
  2. And then use the following table to add additional controls and configure their properties.
Control Parent Properties
ADXBackstageTab PPTlBackStageView Caption= My Slides
ADXBackstageGroup PPTlBackStageView – First Column Caption= Options
AdxBackstageRegularButton ADXBackstageGroup – Primary Item Caption= Refresh my slides
ADXBackstageGroupBox ADXBackstageGroup – Top Items Caption=Current slide locations
AdxBackstageHyperlink ADXBackstageGroupBox1 Caption=SkyDrive
AdxBackstageHyperlink ADXBackstageGroupBox1 Caption=http://company-sharepoint-site/slides
AdxBackstageHyperlink ADXBackstageGroupBox1 Caption=http://sales-portal/slides
AdxBackstageGroupButton ADXBackstageGroup – Bottom Items Caption= Add slides location

When complete, the our custom PowerPoint back stage will look like this:

Designing a custom Backstage view for PowerPoint

*****

Like Project, PowerPoint is a bit of step child. It’s part big part of the Office family. And even though it doesn’t receive as much attention from developers as its siblings, it is there when you need it and our framework supports the UI customizations you will want to create.

Available downloads:

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

Sample PowerPoint UI

PowerPoint development in Visual Studio

Post a comment

Have any questions? Ask us right now!