Article C0014 C# .NET
RibbonBand

This article explains how to implement the Microsoft RibbonBand using Visual Studio. The RibbonBand can be used with Extensible Application Markup Language (XAML) applications, pronounced as "zammel apps". XAML is part of the Microsoft Windows Presentation Foundation (WPF). WPF was added in the Microsoft .NET Framework v3.5. XAML applications can be used as Windows Desktop and as Windows Store applications. When this is your first attempt using the RibbonBand, be sure to create a WPF-based solution using the File->New->Project-dialog of Visual Studio. In this scenario a Windows Desktop application is created, which looks just like a Windows Forms application.

Add a reference
When starting a brand new XAML-solution, the first thing to do is to add a reference to the Ribbon-library. This can be done using the 'Solution Explorer' in Visual Studio. The library can be found within the 'System.Windows.Controls.Ribbon'-namespace as shown in the following figure.
Solution Explorer
Solution Explorer


Anatomy
The following figure shows the basic anatomy of the RibbonBand.
Anatomy of the RibbonBand
Anatomy of the RibbonBand


Now that you are familiar with the most common names that are part of the RibbonBand, this article will continue explaining snippets and their corresponding visual appearance.

Ribbon
Let's start with creating the Ribbon container first. Within your XAML-file add the placeholder for the RibbonBand-container, as shown in the following snippet:

<!-- The Ribbon-container definition -->
<Ribbon x:name="rMain" SelectedIndex="0">
  <!-- All Ribbon items go here -->
</Ribbon>
When executing the application, the visual area will look like this:
The RibbonBand-container
The RibbonBand-container


RibbonTab + RibbonGroup
Being able to categorize menu items that belong together, ribbon groups are used. A so called RibbonGroup must be part of a ribbon tab, called RibbonTab. One RibbonTab can contain several RibbonGroups and one Ribbon can contain several RibbonTabs.

<RibbonTab x:name="tabData" Header="Data">
  <RibbonGroup Header="Report">
  </RibbonGroup>
</RibbonTab>
When executing the application, the visual area will look like this:
RibbonTab with RibbonGroup
RibbonTab with RibbonGroup


By default, the RibbonBand does not contain an icon and will appear as an empty dropdown-button:
Empty application menu
Empty application menu


RibbonApplicationMenu
It is possible to add a custom icon within that area. In this example we simply use the one that Microsoft uses.

<Ribbon.ApplicationMenu>
  <RibbonApplicationMenu SmallImageSource="images/mnuRibbonAppMenuIconMin.png">
    <!-- Application items go here -->
  </RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
mnuRibbonAppMenuIconMin.png
mnuRibbonAppMenuIconMin.png


Now that we have our ApplicationMenuIcon in place, we are going to add an exit button into this area.

<Ribbon.ApplicationMenu>
  <RibbonApplicationMenu SmallImageSource="images/mnuRibbonAppMenuIconMin.png">
    <RibbonApplicationMenu.FooterPaneContent>
      <RibbonApplicationMenuItem x:Name="rExit" Header="Exit"
         ImageSource="images/mnuExit32p32.png"
         ToolTip="Exits this application"/>
    </RibbonApplicationMenu.FooterPaneContent>
  </RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
When executing the application, the visual area will look like this:
Left-Handed Exit Button
Left-Handed Exit Button


Using XAML an eventhandler can be assigned to the button by adding the Click="Exit_Click"-attribute.

The visual shows that the ApplicationMenu is popping-up at the right-hand side of the menubutton. When using the mouse configured at the right-hand side, the menu will pop-up at the left-hand side. Changing this behaviour requires reconfiguration of the Handedness of the computer. The paragraph called Handedness will explain how this can be configured.

RibbonButton
Back to the RibbonGroup and items related to it. The following snippet shows how to add a button into the RibbonGroup.

<RibbonGroup Header="Report">
  <RibbonButton LargeImageSource="images/mnuReport32p32.png" Label="Full" />
</RibbonGroup>
When executing the application, the visual area will look like this:
RibbonButton
RibbonButton in RibbonGroup


RibbonCheckBox
The following snippet shows how to add a checkbox item in a RibbonGroup. The snippet also adds a large image item next to the checkbox. It is not necessary to do this, a smaller or even no image would probably more appropriate.

<RibbonCheckBox Label="Report" LargeImageSource="images/mnuReport32p32.png"/>
When executing the application, the visual area will look like this:
RibbonCheckBox
RibbonCheckBox in RibbonGroup


RibbonComboBox
Another item to add is a combobox. The example shows a combobox together with the use coloured items.

<RibbonComboBox Label="1" SmallImageSource="images/album16x16.png"
 SelectionBoxWidth="62" VerticalAlignment="Center" IsEditable="True">
  <RibbonGallery SelectedValue="Green"
        SelectedValuePath="Content" MaxColumnCount="1">
    <RibbonGalleryCategory>
      <RibbonGalleryItem Content="Green" Foreground="Green" />
      <RibbonGalleryItem Content="Blue" Foreground="Blue" />
      <RibbonGalleryItem Content="Orange" Foreground="Orange" />
    </RibbonGalleryCategory>
  </RibbonGallery>
</RibbonComboBox>
When executing the application, the visual area will look like this:
RibbonComboBox
RibbonComboBox in RibbonGroup


QuickAccessToolBar
The area shown above the RibbonGroup in the basic anatomy is called the QuickAccessToolBar. This area can be as the 'MainMenu'-class available in a Forms-application. The example shown here adds two buttons to the QuickAccessToolBar, one for exporting and one for importing data.

<Ribbon.QuickAccessToolBar>
  <RibbonQuickAccessToolBar>
    <RibbonButton x:Name ="rExport" SmallImageSource="images/export.png"
      VerticalAlignment="Bottom" />
    <RibbonButton x:Name ="rImport" SmallImageSource="images/import.png"
      VerticalAlignment="Bottom" />
  </RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
When executing the application, the visual area will look like this:
QuickAccessToolBar
The QuickAccessToolBar


HelpPaneContent
Within the menu area, a HelpPaneContent-area can be added. The following snippet shows how this can be done.

<Ribbon.HelpPaneContent>
  <RibbonButton SmallImageSource="images/help.png" />
</Ribbon.HelpPaneContent>
When executing the application, the visual area will look like this:
HelpPaneContent
The HelpPaneContent


Handedness
As already briefly mentioned, the ApplicationMenu will pop-up differently on right- or left-handed configured devices.
Left-Handed Exit Button  Right-Handed Exit Button
Left-Handed versus Right-Handed
The behaviour can be changed by configuring the device its handedness. To change a personal computer its handedness, press the Windows logo key+R to bring up the Run-dialog box. In the text-area paste the following command:

  shell:::{80F3F1D5-FECA-45F3-BC32-752C152E456E}

The dialog should look like the following:
Run-dialog
The run-dialog
Next press OK. Doing this will launch the 'Tablet PC Settings'-configuration dialog (Even if you do not have a Tablet PC). Select the Other Tab. In the Handedness section, place a check mark in the Left Handed option.
Tablet PC Settings
The 'Tablet PC Settings'-dialog
Click OK to commit the change and close the dialog.

Image Size
For Windows 7 and earlier editions, the image format supplied has to be a 32-bit ARGB bitmap. A regular bitmap can be converted using a utility like AlphaConv, Pixelformer or Launchy.

For Windows 8 and later, the Ribbon-framework support both the 32-bit ARGB bitmap format and the Portable Network Graphics (PNG) format with transparency.

Since the Ribbon supports zoom, different image sizes can be used. The following table shows the different image size options:

DPISmall ImageLarge Image
9616x16 pixels32x32 pixels
12020x20 pixels40x40 pixels
14424x24 pixels48x48 pixels
19232x32 pixels62x62 pixels