Architecture & Design Spruce up your next application with the WPF Ribbon

Spruce up your next application with the WPF Ribbon

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_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=”ImagesOpen.png”
SmallImageSource=”ImagesOpenSM.png”
Executed=”OpenCommand_Executed” />
</my:Ribbon.Resources>

The images refereced above are used to display the body of the button. The large image is a 40×40 PNG with transparency. This image is used for buttons on the Ribbon as well as menu Items within the Application Menu. The small image is a 20×20 PNG with transparency. This image is used when the window size is changed to shrink the Ribbon as well as for the Quick Access toolbar. Also, be sure to create an OpenCommand_Executed method in the code behind to capture the click events. Next, Insert the following XAML snippet into the File Operation Ribbon Group.


  <my:RibbonButton Name=”Open” Command=”{StaticResource OpenCommand}”/>


This change will create an Open button and associate the OpenCommand, created above with it as shown below.


Open Button
Figure 3 – Open Button


Now that we have a basic Ribbon, we can start to populate the Application Menu. Insert the following snippet into the Ribbon tag.


  <my:Ribbon.ApplicationMenu>
<my:RibbonApplicationMenu Name=”AppMenu”>
<my:RibbonApplicationMenu.Command>
<my:RibbonCommand LabelTitle=”WPF Ribbon Example” LargeImageSource=”ImagesRound2.png” />
</my:RibbonApplicationMenu.Command>
<my:RibbonApplicationMenuItem Name=”MenuOpen” Command=”{StaticResource OpenCommand}”/>
</my:RibbonApplicationMenu>
</my:Ribbon.ApplicationMenu>


This XAML will create the Application Menu, Assign the Application Button and create an Open Menu Item.  The Round2.png image is a 36×36 pixel image with transparency. Below is an image of the Application Menu at this point.

Application Menu

Finally, to create the Quick Access toolbar we insert the following snippet into the Ribbon tag.


  <my:Ribbon.QuickAccessToolBar>
<my:RibbonQuickAccessToolBar>
<my:RibbonButton Name=”QLOpen” Command=”{StaticResource OpenCommand}”/>
</my:RibbonQuickAccessToolBar>
</my:Ribbon.QuickAccessToolBar>


This will create a single Open button within the Quick Access Toolbar as shown below:


Quick Access Toolbar
Figure 5 – Quick Access Toolbar


Conclusion


The WPF Ribbon provides a wide range of functionality including additional controls, popup dialogs, control galleries and the ability to control how the ribbon shrinks when the window is resized. Using the WPF Ribbon within your application can drastically improve the usability of your application and provide a familiar user interface to those who use Office 2007.


Download the example source code by clicking here.


About the Author


Chris Bennett is with Crowe Horwath LLP in the Indianapolis office. He can be reached at chris [email protected]

Latest Posts

Related Stories