Creating an Office 2007-like Ribbon in LabVIEW

[SimonH]

Initially I dismissed the idea of recreating the "Office Fluent Interface" (more commonly referred to as the "ribbon") in LabVIEW as being more trouble than it was worth.  Typically the types of applications that we create with LabVIEW aren't the option heavy editor type applications that the ribbon was designed to help simplify and the only thing worse than an ugly user interface is one that is needlessly fancy (and consequently less usable).  Now the question keeps coming up every once in a while so I decided to take another look at it. 

Besides hiding behind ideology I admit that it sounded pretty difficult at first.  I have used Microsoft's .NET ribbon when I was playing around with WPF and, coming from the LabVIEW world, it wasn't what you would call intuitive to set up (you need to interact at the XAML-source or programming API level - it isn't all drag-and-drop, even in Visual Studio, and I'm still very new to XAML).  Add to that the complications of trying to communicate custom UI events efficiently between LabVIEW and .NET and it became apparent that re-using the .NET component would indeed be problematic.  If anyone has gone down this route please do let us know how well you faired in the comments.

Instead I decided to create most of the ribbon's look and feel using native LabVIEW controls and a few custom graphics created in my favourite UI mockup tool (aka PowerPoint).  Here's a screenshot of what I managed to come up with:

While I didn't implement every feature of the ribbon it still feels pretty authentic.  Moving the mouse over the tab controls and buttons gives the familiar yellow glow, groups highlight slightly when the mouse enters, clicking on the current tab will minimize the ribbon and move all the content up, clicking on a tab again will bring it back, etc.  Best part about it is it is all one small VI - no XControls, .NET controls or subpanels required.  I have attached a zip file containing the VI and all the source graphics as usual (LabVIEW 2009 format - sorry for those of you with older versions, I only keep the latest version installed since my laptop has a small HDD and developing without quickdrop and diagram cleanup is just frustrating having used it for a while now).

It's getting late so I won't go into all the implementation details but here are the basics for those trying to figure out what I did:

• The main part of the ribbon is a transparent tab control with the tabs hidden
• The "tabs" that you see are actually customized system buttons (to get the mouseover effect and the custom behavior)
• The groups are also transparent tab controls with only one page (this gives me a nice container to trigger mouse enter and leave events from)
• The ribbon occupies the top pane of my VI (with the splitter shrunk to 1-pixel and made a nice shade of blue to blend in) - repositioning the splitter let's me "minimize" the ribbon.

Hopefully this gives you some ideas for you own projects.

Happy wiring,

Simon