Wednesday, October 10, 2012

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

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.



John Hagan said...

I'm just getting started with the new WPF 4.5 Ribbon in VS 2012RC myself. For the life of me, I can't get the QuickAccessToolBar to show the pull-down that would let you Customize Quick Acess Toolbar. I see your examples don't show the pull-down, either--any thoughts how we can get it to work?

Muhammad Shujaat Siddiqi said...

Hey John,
I am attaching the project to this post. I hope this would help. Let me know if you still have any question.

John Hagan said...


Thanks for sharing the source code. However, it seems your example is still missing the QuickAccessToolBar Customization pull-down. It should be a little pull-down triangle that would appear after the list QuickAccessToolBar button (in your example, just after the last "B1", just inside the divider before "Main Windows Title"). The Customize Quick Access Toolbar pull-down should allow a user to select which commands they want on the QuickAccessToolbar (run Paint on Windows 7 to see an example).

I would think the QuickAccessToolbar in WPF 4.5 should include the Customize pull-down. I'm still hoping there's some way to turn it on.

Let me know if you discover the answer!

Again, thanks for the help.