I've been trying to dream up a functional but elegant user interface for my mystery app. At work I've been using the DevExpress WinForms control suite and I have to say I've been very impressed. Their ribbon bar in particular is pretty swish and seems to be very popular at the moment.

I'd already gone down the path of having a tab control to separate the functional modes in which the application operates. Keeping the UI relatively simple by only giving access to the functions that meet the current mode of operation. But my "out of the box" WPF tab control was looking pretty dull.

So... how to convert the standard WPF controls into something more elegant - something looking a little like a Ribbon Bar perhaps? Well, I must say I had a blast doing this - and finally ended up with a prototype that managed to get reasonably close without having to use anything but XAML. All the magic is done simply using the standard WPF controls (TabControl, ToolBarTray, ToolBar, Button etc.) and some styles and templating.

You can run this XAML file (click here or on image above) to see how far I got with this approach. I tried hard to get the curvy tab headers and to remove the line between the tab and the page but couldn't come up with a solution in XAML alone that didn't involve fixing the tab header width. I took the button images out so the file could run stand-alone.

Once all the styles are defined the code to actually mark up the Ribbon Bar is identical to marking up a TabControl with embedded Toolbars - something like:

       <TabControl Name="tabControl1" SelectedIndex="3">                
            <TabItem Name="tabDream" Header="Dream">
                 <ToolBarTray>
                     <ToolBar Header="Holidays" >
                         <Button HorizontalAlignment="Left">
                             <StackPanel Orientation="Vertical">
                                 <Image Source="Add.png" Width="24"/>
                                 <TextBlock>New Holiday</TextBlock>
                             </StackPanel>
                         </Button>
                     </ToolBar>
                     ...

Next I'll tidy up the XAML, its a straight brain dump at the moment and went through several iterations of trial and error - there's bound to be some unused portions in there still. I've also made a very simple Decorator for the TabHeader - but more on that later...