Ribbon - Quick Access Toolbar & RibbonWindow : WPF 4.5 RC New Features

This is a series of post in which have have been discussing the new features of WPF 4.5 RC. In the last post we started our discussion of Ribbon feature in the framework. I have been Ribbon as a new feature because it is a lot more than a control. With the Selector control for Ribbon, it has introduced a lot of other controls including RibbonButton, RibbonComboBox inheriting from the base ContentControl(s) like Button and ComboBox. In this post we will be discussion Quick Access Toolbar and RibbonWindow.

Quick Access Toolbar
Toolbars have historically been used to group together frequently used commands in a desktop applicaiton on Windows Platform. They have been provided to provide ease in the use of the system. They can also be used with the ribbon. Here it is called Quick Access Toolbar. Although we can add / remove items from the Quick Access Toolbar, we can also provide users the ability to modify the toolbar by adding or removing items from it.

Although Quick Access Toolbar is a part of Ribbon, it can be displayed on top or bottom of the ribbon. We can also display it on application title bar by using RibbonWindow instead of regular WPF window. Quick Access Toolbar is displayed irrespective of the ribbon tab selected. If the quick access toolbar is already displayed on bottom of the Ribbon then user can always move it back to the top.

In the following example we are adding a Quick access toolbar to our Ribbon control. The toolbar has two buttons hosted inside a DockPanel. As we learnt before, we need to set the Label property of the button instead of WPF Button where we set the Content property to set the text displayed on the button.

This toolbar would be displayed as follows in a RibbonWindow:

If the toolbar cannot accomodate all the items on the title bar because of the size limitation, then the items are displayed in a drop down as follows:

I added the above elements using the follwing xaml:


Ribbon Window
Ribbon Control is a Selector control which can be hosted in a regular WPF Window. But there are benefits of hosting it in a RibbonWindow.

Although you might not find RibbonWindow in "Add New Item" dialog, you can simply add a regular WPF window and update the Xaml to change it to a RibbonWindow as follows:

Please make sure that you are referencing System.Windows.Controls.Ribbon as we did in our previous post. You can also update the code behind as follows:


Please have a look at the title bar of Microsoft Power Point 2010. The title bar is displayed as follows:

You clearly can see that there are controls added in the non-client area of the Window. This is Title bar. Historically we have just seen Title property which can only be assigned with a string value, and that's it. Basically we can achieve the same behavior by using RibbonWindow instead of regular WPF window. RibbonWindow allows the Quick Access Toolbar and Contextual Tab Headers to be drawn in the non-client are of the title bar.

If we set the title on RibbonWindow and Ribbon both, then the title set on the RibbonWindow is preferred for display by the runtime. In the following example, you can have a look that we are setting both of these properties.

And the view is displayed as follows:

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