Ribbon : WPF 4.5 RC New Features

This is a series of post in which we have been discussing new features in WPF 4.5. In this post we are starting a sub-series discussing Microsoft Ribbon features and controls provided with the new framework. This is part of the release in Visual Studio 2012 RC and there is no separate download required unlike Visual Studio 2010. For using the ribbon with Visual Studio 2010, it can be downloaded from here:

Download for Visual Studio 2010
http://www.microsoft.com/en-us/download/details.aspx?id=11877

System.Windows.Control.Ribbon Assembly
In order to use the controls for ribbon, System.Windows.Control.Ribbon assembly must be referenced in your WPF project.

Class Hierarchy
Ribbon is a Selector control. The class hierarchy of Ribbon control is as follows:

This post would start the Ribbon disucssion with a an introduction of Ribbon Application Menu. The post would discuss different components of the menu and how we can use them in our application design.

Ribbon Application Menu
Ribbon Application Menu is the blue drop down you generally see on the top left side of the Ribbon. Different components of Ribbon Applicaiton Menu can be identified as follows:

They are combined together to form a dispaly worthy Ribbon Application Menu.

Ribbon Gallery for Auxillary Pane Content
Auxillary Pane is generally used to hold the items which can be provided for easy access for the client. It can hold recently or frequently used items by the user. You can also use it to provide user with the functionality to pin items for ease in future access of these items.

Most of the examples that you would see would be using RibbonGallery for Auxillary Pane. It is an ItemsControl. The gallery can be used to hold items of RibbonGalleryCategory which is a HeaderedItemsControl.


Here pinnedItems and recentItems are the resources to hold pinned and recent items. For simplicity sake, let us declare them in xaml as follows:


The above xaml would render the auxillary pane content view as follows:

It RibbonGalleryCategory use WrapPanel for laying out its items. But in actual if we snoop this we can easily find out that it uses RibbonGalleryItemsPanel which seems to layout its items like a wrap panel.

Let us update the ItemsPanel so that it uses StackPanel to display its items as follows:


This should apply the template for all the RibbonGalleryCategory items in the RibbonGallery. If we need to update the ItemsPanel for a wider scope then we can define this style in a wider scope including Window or App scope. The above code should update the display as follows:

Ribbon Application Menu's Footer Pane Content:
This is the Ribbon Application Menu's footer which typically hosts buttons that enable access to program options and the Exit command [msdn].

The above view can be obtained by just filling up the footer pane content using the following xaml:


Tooltip for Ribbon Controls
Ribbon based controls including RibbonButton has been defined to show the tooltip in a real defined manner. Six different properties have been added to these controls. They are as follows:

1. TooltipTitle
2. TooltipDescription
3. ToolTipImageSource
4. TooltipFooterTitle
5. TooltipFooterDescription
6. ToolTipFooterImageSource

The above properties are used to create a tooltip. This is then assigned to the Tooltip property inherited from FrameworkElement. If you add the property value explicitly on the control or using TooltipService, then the explicit value takes precedence. The constructed Tooltip can be shown as follows:

The above tooltip can be obtained by setting the property values as follows:

The assigned instance to Tooltip property is basically an instance of RibbonTooltip. It inherits from Tooltip class.

Download