Chris Holmes Online

One of the things I’ve seen asked about Component Application UI Block, with a fair degree of regularity, is how to implement an OutlookBar style navigation control. This happened to be something I wanted to do as well, so I dug into the CAB a bit and wrote a pretty simple version of it.

You can download the code here.

This control does not implement any functionality for the thin, blue “grabber” bar in Outlook that allows you to hide some of the buttons. That was a functionality that I haven’t needed yet, and being short on time I haven’t been able to poke around and figure out how to do it. If anyone implements it I’d love to see the results.

How It Works

This control implements the necessary CAB infrastructure so that you can treat it just like a ToolStrip or MenuStrip. Your Modules & WorkItems can dynamically create and add buttons to the OutlookBar and attach CommandHandlers. It also exposes, through a property, a DeckWorkspace in the non-button area. When you create the OutlookBar in your shell you need to add the DeckWorkspace to the RootWorkItem’s Workspace collection so all Modules & WorkItems have access to it. They can then create SmartParts to plug into this space. In the screenshot above the PayrollWorkItem has created a SmartPart with a ListView that is displaying my name and a little “male” icon.

Implementation Details

This control requires the implementation of four classes: ItemCollection (so the OutlookBar can manage its items, but more importantly so the CAB can add/remove items via the UIAdapter), ItemCommandAdapter, UIAdapter and the UIAdapterFactory.

The OutlookBar implements the ISmartPartInfoProvider interface as well. By default it has a ZoneName of “OutlookBarZone”. However, the ZoneName is exposed through a property so you can change it at creation (prior to adding to WorkItem.Items collection) and plant it on a different zone if you so choose. Or you can just plant it on any other Workspace.

The background images for the header and buttons are .bmp files embedded into the project as resources. Feel free to replace them, write custom drawing code, or take advantage of XP themes. If you do, I’d like to see the results!

Using The OutlookBar

First thing that needs to be done is to register the OutlookBarUIAdapterFactory and the OutlookBarItemCommandAdapter with the CAB (best done by overriding the AfterShellCreated method in the ShellApplication class):


IUIElementAdapterFactoryCatalog catalog = RootWorkItem.Services.Get<IUIElementAdapterFactoryCatalog>();
catalog.RegisterFactory(new OutlookBarUIAdapterFactory());
ICommandAdapterMapService mapService = RootWorkItem.Services.Get<ICommandAdapterMapService>();
mapService.Register(typeof(Button), typeof(OutlookBarItemCommandAdapter));


Then I create my OutlookBar:


OutlookBar outlookBar = RootWorkItem.Items.AddNew<OutlookBar>();
RootWorkItem.UIExtensionSites.RegisterSite("OutlookBar", outlookBar);
RootWorkItem.Workspaces.Add(outlookBar.WorkSpace, "OutlookBarDeckWorkspace");
RootWorkItem.Workspaces["ShellZoneWorkspace"].show(outlookBar);


Adding a button from a Module:


Button button = new Button();
button.Text = "Payroll";
button.Image = MyProject.Modules.Payroll.Properties.Resources.payroll;
RootWorkItem.UIExtensionSites["OutlookBar"].Add<Button>(button);
RootWorkItem.Commands["LoadPayrollWorkItem"].AddInvoker(button, "Click");


And then provide a CommandHandler…

Adding a SmartPart to the OutlookBar’s DeckWorkspace (from a WorkItem):


SomeSmartPart smartPart = this.Items.AddNew<SomeSmartPart>("OutlookBarSmartPart");
RootWorkItem.Workspaces["OutlookBarDeckWorkspace"].Show(smartPart);


Conclusion

That’s my implementation. There’s probably better ways to do it. I’d be very interested in seeing what others have done. I’m always looking for ways to improve my code.

If my code helps you at all, please drop me a note and let me know.