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
Anatomy
The following figure shows the basic 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
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.
When executing the application, the visual area will look like this:
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.
When executing the application, the visual area will look like this:
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.
When executing the application, the visual area will look like this:
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.
When executing the application, the visual area will look like this:
The HelpPaneContent
Handedness
As already briefly mentioned, the ApplicationMenu will pop-up differently on right- or left-handed configured devices.
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: 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.
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: