A Windows 8 WPF Ribbon

Introduction

Although Microsoft is focused on it's RT platform some development is still done using WPF.
Unfortunately the current WPF Ribbon looks aged and lackluster, hope for a new version is probably in vain. Unhappy with the current state of affairs I sat down on a weekend and implemented a
simple window control based on the current Office 2013 style with a pinch of Visual Studio sprinkled in.
Although it will look very similar to both Office and Visual Studio a keen eye will spot the differences, if you're looking for an exact copy it should be easy enough to make the alterations yourself.

You can download the source from GitHub.
https://github.com/crystalbyte/ribbon

Using the code

Using the code is pretty straight forward and very similar to the current WPF Ribbon implementation.

The Window

In addition to the obvious foreground and background properties there are two additional properties that affect the appearence. The HoverBrush allows you to set the brush used when a mouse over event occurs on the ribbon and the AccentBrush does set the accent color of the window, obviously.
The code below shows you how the basic window is declared.

<ui:RibbonWindow x:Class="Crystalbyte.MainWindow"
     ...
     xmlns:ui="clr-namespace:Crystalbyte.UI;assembly=Crystalbyte.Ribbon">
    
 <ui:RibbonWindow.ApplicationMenu>
  <ui:ApplicationMenu />
 </ui:RibbonWindow.ApplicationMenu>
 
 <ui:RibbonWindow.Ribbon>
  <ui:Ribbon />
 </ui:RibbonWindow.Ribbon>
 
 <Grid />
</ui:RibbonWindow>

One difference to the standard WPF Microsoft Ribbon Control is the fact that the status bar is an integral part of the window.

The window comes with the new office tri-state button to switch between "tab only", "fullscreen" and "tabs & commands" views.

The Ribbon

The ribbon is the simplest control since there is little to do but to add tabs. You can however set the text that is displayed inside the application menu button from here.

<ui:Ribbon x:Class="Crystalbyte.Ribbon"
           ...
           xmlns:ui="clr-namespace:Crystalbyte.UI;assembly=Crystalbyte.Ribbon"
           AppMenuText="FILE">
    <local:SomeTab />
</ui:Ribbon>

The Ribbon Tab

The ribbon tab differs slightly from the current MS implementation as it requires a RibbonPage to wrap the RibbonGroups. Apart from that you won't find much differences.

<ui:RibbonTab x:Class="Crystalbyte.Ribbon.SomeTab"
              ...
              xmlns:ui="clr-namespace:Crystalbyte.UI;assembly=Crystalbyte.Ribbon"
              Header="SOME">
    <ui:RibbonPage>
        <ui:RibbonGroup>
            <ui:RibbonButton Command="..."  />
            <ui:RibbonButton Command="..."  />
        </ui:RibbonGroup>
    </ui:RibbonPage>
</ui:RibbonTab>

The Application Menu

Similar to the Office 2013 style the application menu is wired directy into the window and handles pretty much the same. The current implementation brings three controls for the application menu to the table.

<ui:ApplicationMenu x:Class="Crystalbyte.Ribbon.SomeMenu"
                    ...
                    xmlns:ui="clr-namespace:Crystalbyte.UI;assembly=Crystalbyte.Ribbon">
    <ui:ApplicationMenuItem Header="Some Menu">
        <TextBlock>Some Content</TextBlock>
    </ui:ApplicationMenuItem>
    <ui:ApplicationMenuSeparator />
    <ui:ApplicationMenuButton Command="..." />
</ui:ApplicationMenu>

The ApplicationMenuItem displays its content in the application menu zone which encompasses the entire window. The seperator and the button should be self explanatory.

Everything put together

The demo project shows a simple, but complete implementation and looks pretty much like this.

The theme operates on the Windows 8 accent based system. You can choose a background color for the window and an accent, which then gets adopted by all ribbon child controls.

As can be seen on the screenshot above a tab can also have a contextual state, controlled by a simple property "IsContextual" and the dedicated brush property "ContextualBrush".

To keep the implementation small and clean I decided not to support multiple tabs in a single context, since it would have required massive changes to the basic framework controls used in the ribbons construction.
I explicitly wanted to avoid creating any custom controls which is the reason why the ribbon is merely a massively styled TabControl.

The last thing on the list is the embedded support to add quick access items to the upper window bar, which do persist on application shutdown.

I hope some of you can benefit from the project, if any one has suggestions or corrections I gladly accept pull request to the main repository on GitHub.

Points of Interest

Once you drop the default window border you obviously lose some functionality as well, such as Aero Snap, Auto Resize and the default Window Buttons. While developing the control the hardest part was wrapping my head around WPF's DPI aware sizing system, especially setting the window bounds by hand when dealing with different window border sizes and themes on Windows 7 & Windows 8 was tough.