Mobile Development at U2U Consult

Based in Brussels, Belgium, U2U Consult has been offering consulting & development services in the EMEA region for over 10 years. We offer mobile development on all platforms from Apple to Android & Microsoft.

The Microsoft WPF Ribbon control is a free control that brings the Office 2007 Ribbon features to your WPF applications. To get your hands on it, just follow the instructions on CodePlex. This article walks through the Ribbon features. I simply built "NotePad with a Ribbon". Here's how it looks like:

The container is of the type RibbonWindow, a subclass of Window that overrides some of the native GDI-code to let the ApplicationButton and the QuickAccessToolBar appear in the form's title bar. The only controls on it are a Ribbon control and a TextBox (after all, Notepad ìs just a textbox with a menu). I wrapped them in a DockPanel:

The meat of the Ribbon is a series of RibbonTabs with a Label and an array of RibbonGroup elements that contain the RibbonControls (RibbonButton, RibbonComboBox), individually or grouped into a RibbonControlGroup:

RibbonGroup has a collection of GroupSizeDefinitions that control layout and resizing. This is the configuration of my Clipboard-group, with one large and two small icons. You can put multiple alternatives here; when you resize the form, the Ribbon will layout properly.

<r:RibbonGroup.GroupSizeDefinitions>

<r:RibbonGroupSizeDefinitionCollection>

<r:RibbonGroupSizeDefinition>

<r:RibbonControlSizeDefinition

ImageSize="Large"

IsLabelVisible="True"/>

<r:RibbonControlSizeDefinition

ImageSize="Small"

IsLabelVisible="True"/>

<r:RibbonControlSizeDefinition

ImageSize="Small"

IsLabelVisible="True"/>

</r:RibbonGroupSizeDefinition>

</r:RibbonGroupSizeDefinitionCollection>

</r:RibbonGroup.GroupSizeDefinitions>

All RibbonControls can have a Command property, and instance of RibbonCommand. This is actually a subclass of RoutedCommand, implementing extra GUI-focused properties: labels, tooltips, and large and small image sources.

<r:RibbonButton Content="Paste">

<r:RibbonButton.Command>

<r:RibbonCommand

CanExecute="PasteCommand_CanExecute"

Executed="PasteCommand_Executed"

LabelTitle="Paste"

ToolTipTitle="Paste"

ToolTipDescription="Paste text element from the clipboard."

SmallImageSource="Assets/Images/Paste.png"

LargeImageSource="Assets/Images/Paste.png" />

</r:RibbonButton.Command>

</r:RibbonButton>

Controls can be (re-)grouped into a RibbonControlGroup e.g. to form a Gallery. I used two such groups for the font commands:

<!-- Font Commands -->

<r:RibbonGroup>

<r:RibbonGroup.Command>

<r:RibbonCommand LabelTitle="Font" />

</r:RibbonGroup.Command>

<r:RibbonControlGroup>

<r:RibbonLabel Tag="Font Image" />

<r:RibbonComboBox>

<r:RibbonComboBoxItem Content="Tahoma"/>

<r:RibbonComboBoxItem Content="Comic Sans MS"/>

<r:RibbonComboBoxItem Content="Wingdings"/>

</r:RibbonComboBox>

</r:RibbonControlGroup>

<r:RibbonControlGroup>

<r:RibbonLabel Tag="Pallette Image" />

<r:RibbonButton CommandParameter="Black" />

<r:RibbonButton CommandParameter="Red" />

<r:RibbonButton CommandParameter="Blue" />

<r:RibbonButton CommandParameter="Green" />

</r:RibbonControlGroup>

</r:RibbonGroup>

Clicking on the Application Button (the large circle in the top left corner) reveals the Ribbon's ApplicationMenu. This can be populated with RibbonApplicationMenuItems, Separators, and RibbonApplicationMenuSplitItems. It also hosts the RecentItemsList. In the ApplicationMenu's footer there's room for extra buttons.

Yet another host for commands is the QuickAccessToolBar, which can be placed in the form's header next to the ApplicationButton, or under the Ribbon:

<!-- Quick Access ToolBar -->

<r:Ribbon.QuickAccessToolBar>

<r:RibbonQuickAccessToolBar>

<r:RibbonButton

r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar">

<r:RibbonButton.Command>

<r:RibbonCommand

Executed="EncryptCommand_Executed" />

</r:RibbonButton.Command>

</r:RibbonButton>

<r:RibbonButton

r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar">

<r:RibbonButton.Command>

<r:RibbonCommand

Executed="DecryptCommand_Executed" />

</r:RibbonButton.Command>

</r:RibbonButton>

</r:RibbonQuickAccessToolBar>

</r:Ribbon.QuickAccessToolBar>

If you're going to use Microsoft's WPF Ribbon Control in production, please note that the current release is just a preview, and V1 will have breaking changes in it. On the other hand, a release date hasn't been announced for this V1, all we know is that the control will not be included in .NET 4.0 / Visual Studio.NET 2010.

Here's the full code for the project. Unfortunately I may not publish the full solution, due to licensing constraints on the Ribbon Control. You will need to accept the license, download the ribbon dll yourself, and add a reference.