c0014

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.

Anatomy
The following figure shows the basic 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:

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:

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

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>

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:

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:

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:

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:

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:

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:

Handedness
As already briefly mentioned, the ApplicationMenu will pop-up differently on right- or left-handed configured devices.

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:

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.

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:

DPI	Small Image	Large Image
96	16x16 pixels	32x32 pixels
120	20x20 pixels	40x40 pixels
144	24x24 pixels	48x48 pixels
192	32x32 pixels	62x62 pixels