November 1, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Spruce up your next application with the WPF Ribbon

  • December 28, 2009
  • By Chris Bennett
  • Send Email »
  • More Articles »

Introduction

Microsoft Office 2007 delivered a bold replacement for the tired menu bar known simply as the Ribbon.  Up until recently, the Ribbon was exclusive to Microsoft applications; however, Microsoft has now made the WPF(Windows Presentation Foundation) Ribbon available through the Office UI Licensing.  This license in effect allows you to incorporate the WPF Ribbon as well as the Office 2007 styling into your application. I should point out, that you will need to register to download the WPF Ribbon control and essentially agree not to create an Office 2007 competitive application. Using the WPF Ribbon within your application provides the following UI elements:

  • The Application Button is the round button in the upper left. Its purpose is to provide access to the Application Menu which includes one or more menu items.
  • The Quick Access Toolbar provides convenient access to common functions.
  • Tabs provide high level grouping for items within the Ribbon. Within each tab, multiple Groups exists to provide further categorization. Inside each Group is where the individual controls exist.

After downloading the Ribbon Control, create a WPF Application project and add a reference to the RibbonControlLibrary. Next, we need to modify the existing Window to start creating the Ribbon. To get started, we need to modify the XAML(eXtensible Application Markup Language) to modify the window and create a blank Ribbon. The XAML to create the window with the empty ribbon is listed below:

  <my:RibbonWindow x:Class="WPFRibbonExample.Window1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="WPF Ribbon Example" 
     Background="LightBlue" 
     ResizeMode="CanResizeWithGrip" 
     Height="374" Width="633" 
     xmlns:my="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary">
  
      <Window.Resources> 
        <ResourceDictionary> 
           <ResourceDictionary.MergedDictionaries> 
              <ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml"/>
           </ResourceDictionary.MergedDictionaries> 
        </ResourceDictionary> 
     </Window.Resources> 
  
      <DockPanel> 
        <my:Ribbon DockPanel.Dock="Top" Name="ribbon1" Height="138" Title="WPF Ribbon Example" VerticalAlignment="Top">
        </my:Ribbon>
     </DockPanel> 
  
  </my:RibbonWindow>

If you execute the application at this point, you should see the screen as shown below:

Empty Ribbon
Click here for larger image

Figure 1 - Empty Ribbon

This basic XAML above is slightly different from a standard Window. The window tag itself is replaced with a RibbonWindow which provides additional functionlity necessary for the Ribbon UI. Next we pull in the Office 2007 Blue styling and finally create a blank Ribbon inside a DockPanel. Next we'll focus on creating the necessary elements within the Ribbon. Insert the following XAML inside the Ribbon tag.

  <my:RibbonTab Label="File"> 
  </my:RibbonTab"> 
  <my:RibbonTab Label="View" /"> 
  </my:RibbonTab"> 

At this point, the ribbon should show 2 tabs, File and View as shown below.

File and View Tabs
Figure 2 - File and View Tabs

Next we create a group and finally the individual controls. The following XAML snippet should be inserted into the RibbonTab tag.

  <my:RibbonGroup Name="FileOperations">
     <my:RibbonGroup.Command> 
        <my:RibbonCommand LabelTitle="File Operations" ></my:RibbonCommand> 
     </my:RibbonGroup.Command> 
  </my:RibbonGroup> 

This will create an empty File Operations Group and assign a label to it. This is done through the RibbonCommand class. Next we need to start creating buttons within the group. Before we start creating buttons, it is a good idea to start planning the commands for the Ribbon. Each command the ribbon will perform should be created as a Ribbon Resource so it can be reused for buttons on the Ribbon and Quick Access toolbar or within the Application Menu. Below is a simple Open RibbonCommand Resource which is to be inserted within the Ribbon tag.

  <my:Ribbon.Resources> 
     <my:RibbonCommand x:Key="OpenCommand" 
        LabelTitle="Open" 
        LargeImageSource="Images\Open.png"
        SmallImageSource="Images\OpenSM.png" 
        Executed="OpenCommand_Executed" /> 
  </my:Ribbon.Resources>





Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel