Creating Office Ribbon Control in WPF

Microsoft Office UI licensing development center has released the Office Ribbon control from WPF which is available for Free download. The office UI ribbon is shipped with three themes (Blue, Black and Silver). You can access the Ribbon control by accepting the license terms from MS from this link.

I have created a sample application using the ribbon control.

1. Adding reference to the Ribbon assembly

xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

2. Creating Ribbon resources for GroupSizeDefentions and commands

<Window.Resources>

<ribbon:RibbonGroupSizeDefinitionCollection x:Key="OfficeGroup">

<ribbon:RibbonGroupSizeDefinition>

<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />

ribbon:RibbonGroupSizeDefinition>

ribbon:RibbonGroupSizeDefinitionCollection>

<ribbon:RibbonCommand x:Key="WheelMenuCommand" LabelTitle="Main" ToolTipTitle="Main menu"

ToolTipDescription="Click to access application main menu"

LargeImageSource="Images/Wheel.png" />

<ribbon:RibbonCommand x:Key="AddProjectCommand"

Executed="OnAddProjectInvoked"

LabelTitle="Add Project"

LabelDescription="Add a new project"

LargeImageSource="Images/Add.png"

SmallImageSource="Images/Add20.png" />

Window.Resources>

3. Creating Ribbon application menu items

<ribbon:Ribbon DockPanel.Dock="Top">

<ribbon:Ribbon.ApplicationMenu>

<ribbon:RibbonApplicationMenu Name="ApplicationMenu" Command="{StaticResource WheelMenuCommand}">

<ribbon:RibbonApplicationSplitMenuItem Command="{StaticResource AddProjectCommand}">

<ribbon:RibbonApplicationMenuItem Command="{StaticResource ExcelCommand}" />

<ribbon:RibbonApplicationMenuItem Command="{StaticResource WordCommand}" />

ribbon:RibbonApplicationSplitMenuItem>

<ribbon:RibbonApplicationMenuItem Command="{StaticResource SaveCommand}" />

<ribbon:RibbonApplicationMenuItem Command="{StaticResource OpenCommand}" />

<ribbon:RibbonSeparator Margin="40 0 0 0" />

<ribbon:RibbonApplicationMenuItem Command="{StaticResource CloseCommand}" />

<ribbon:RibbonApplicationMenu.Footer>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

<Button HorizontalAlignment="Right" Content="Application Options"/>

<Button HorizontalAlignment="Right" Content="Exit Application" Margin="10 0 0 0" />

StackPanel>

ribbon:RibbonApplicationMenu.Footer>

ribbon:RibbonApplicationMenu>

ribbon:Ribbon.ApplicationMenu>

4. Creating Ribbon Tabs

<ribbon:RibbonTab Label="Office">

<ribbon:RibbonGroup HasDialogLauncher="True" Command="{StaticResource OfficeGroupCommand}"

GroupSizeDefinitions="{StaticResource OfficeGroup}">

<ribbon:RibbonButton Command="{StaticResource WordCommand}" />

<ribbon:RibbonButton Command="{StaticResource ExcelCommand}" />

<ribbon:RibbonButton Command="{StaticResource OneNoteCommand}" />

<ribbon:RibbonButton Command="{StaticResource AccessCommand}" />

<ribbon:RibbonButton Command="{StaticResource PresentationCommand}" />

<ribbon:RibbonButton Command="{StaticResource OutlookCommand}" />

ribbon:RibbonGroup>

ribbon:RibbonTab>

Screenshots