XAML Ribbon Bar – Part 1

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.

XAML Ribbon Bar

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">
<ToolBar Header="Holidays" >
<Button HorizontalAlignment="Left">
<StackPanel Orientation="Vertical">
<Image Source="Add.png" Width="24"/>
<TextBlock>New Holiday</TextBlock>

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…

8 thoughts on “XAML Ribbon Bar – Part 1”

  1. Nice use of WPF there Nigel. People hear about how easy it is to build things with WPF, but when they come around to it, it can look very hard. This is a great example of not just the flexibility, but that anything can be done if you take the right approach.

    I’d be interested in your overall design process. How did you decide what elements to use, what order did you implement them in? To me, thinking about my own process made it so much easier for me to design WPF bits.

  2. I’ve also done something similar. To correct the “line between the tab and the page” I took the panel containing the tabs and lowered it using a negative margin:


    This works great when you do not have a background using transparency.

  3. hello nigel, i want similar tabitem style that u r created plz will u forword me u r code for ribbonstyletab. it will be very helpful for me. thanks in advance

Comments are closed.