RibbonUI feature in WPF

• Download Sample Application

Introduction

After reading Pete Brown in his post on 2nd Aug announcing the new RibbonUI feature in his post, Announcing:Microsoft Ribbon for WPF, I thought why not try this cool control set myself. So on this note, I tried the control set that Microsoft just introduced and created an application. It is time to introduce with the new control, so that for you it would be easier to start working with it.

Ribbon Bar was introduced with Office 2007 has lately been very much popular for latest UI development. Microsoft has replaced the old Menu based application tool with more flexible and easy to learn Ribbon strips in many of its applications. So it is time for other developers to use it in their own applications. The Ribbon UI feature that was released recently bridges this to us.

In this article I am going to introduce you with the Ribbon Control in WPF. If you are not familiar with WPF, please read WPF Article SERIES.

What is Ribbon ?

Ribbon is a sort of Toolbar or rather Command Bar which arranges different Command buttons, gallaries, etc in Tabs at the top of the application Window. The controls in the Tabs can further be grouped and also introduces Contextural Tabs etc. So in short, Ribbon replaces toolbar and menu controls that are there with windows and gives a solid look on the application UI.



This is the default Ribbon Template that comes when you first create your application and also gives you a better idea on how the new RibbonWindow looks like.

How to start?

Now to start creating your first application, you need :

1. Visual Studio 2010. You can install Visual Studio trial from here. Or you can try Visual Studio 2010 Express from here.
   
2. After you install Visual Studio 2010, you need to install Microsoft Ribbon for WPF from here. You can also install this in Vs 2008. In that case you need to take reference to the dll explicitly.
   
3. After you install, Launch Visual Studio 2010 and select WPF Ribbon Application from Visual Studio Project Templates.
   
4. After you select the project template, your default application will be created. It automatically creates you a Ribbon control UI with a few sample buttons as shown below:
   
   
   
5. The RibbonControlsLibrary.dll is already referenced and the Window is actually inherits from RibbonWindow which includes customized title bar and status bar.
6. So its time to get started.
   

Features of Ribbon UI

Lets address each of the features of RibbonUI so that you could apply them while creating your own Ribbon Based Application.

1. Application Menu : Each Ribbon Application should have one Application Menu associated with it. The application menu is composed of a series of Dropdown Buttons that displays menu items.
   
   
   
   
   
   The left side of the ApplicationMenu contains MenuItems. Each of which may contain its Submenu as well. The right hand side contains the RecentItems represented by ApplicationMenu.RecentItems.
   
   
2. Quick Access Toolbar : Every Ribbon control has Quick access toolbar which are small buttons that allows you to access frequently used commands. The quick access toolbar is present in the Title bar of the window.
   
   
   
   
   
3. Super ToolTip : WPF Ribbon bar introduces enhanced tooltip to describe your command the best way possible. We call it superTooltip.
   
   
   
   
   
   
4. KeyTips : KeyTips are unique feature associated with each ribbon to invoke menuitems using Keyboard Shortkuts. You can define KeyTip for each Tab, Buttons etc which will show up whenever the Alt with the Key combination is pressed.
   
   
   
   
   
5. Automatic Resizing RibbonItems : Each ribbon has implemented in such a way that the Ribbon will be resized when there is shortage of space automatically. Large RibbonButton will be converted to small Buttons and again converted to MenuItem when space is constrained.
   
   
   
   
   
6. Group Ribbon Tabs : A Ribbon control can have multiple RibbonTab 's. So You can group the set of Commands into individual Tabs.
   
   
   
   
   
7. Contextual Ribbon Tab : You can also have Contextual Ribbon Tab, a special Tab that will display dynamic content based on User interaction. 
   
   
8. Ribbon Combobox Gallery Items : Gallery are special items that have special features, like hover zoom effect, dropdown effect, etc.
   
   
   

So, with never ending new features with Ribbon,  lets define each of the features by implementing the same.

Why use RibbonWindow than Window?

A RibbonWindow is a class derived from Window in WPF. The class RibbonWindow have the capability to draw Quick Access toolbar buttons and Contextual TabGroup into it. So if you want to support these features, you must use RibbonWindow rather than a normal Window. To Add a new RibbonWindow, just use Ribbon



After you select RibbonWindow, the template will produce a default Window as :

<ribbon:RibbonWindow x:Class="RibbonTestApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</ribbon:RibbonWindow>

We are going to use this window to implement our RibbonControl.

Implementation

So lets build our application with most of the components one by one :

RibbonApplicationMenu

RibbonApplicationMenu is a control that creates the Application Menu for the RibbonWindow. Each window can have only one Application Menu. The application menu can have RibbonApplicationMenuItem, RibbonApplicationSplitMenuItem, RibbonSeparator etc. You can nest RibbonApplicationMenuItem to have Submenu for an item.

Lets look how to build this menu  :

 <ribbon:RibbonApplicationMenu SmallImageSource="Images\MyComputer.ico">
                    <ribbon:RibbonApplicationMenuItem Header="Desktop" ImageSource="Images\Desktop.ico" KeyTip="D" Click="RibbonApplicationMenuItem_Click"/>

                    <ribbon:RibbonApplicationMenuItem Header="Floppy" ImageSource="Images\HardDrive.ico" KeyTip="F">
                        <ribbon:RibbonApplicationMenuItem Header="Primary Floppy" ImageSource="Images\FloppyDrive3.ico" KeyTip="P" Click="RibbonApplicationMenuItem_Click" />
                        <ribbon:RibbonApplicationMenuItem Header="Secondary Floppy" ImageSource="Images\FloppyDrive5.ico" KeyTip="S" Click="RibbonApplicationMenuItem_Click" />
                    </ribbon:RibbonApplicationMenuItem>

                    <ribbon:RibbonApplicationMenuItem Header="My Pictures" ImageSource="Images\MyPictures.ico" KeyTip="M" Click="RibbonApplicationMenuItem_Click"/>
                    <ribbon:RibbonApplicationMenuItem Header="My Videos" ImageSource="Images\MyVideos.ico" KeyTip="V" Click="RibbonApplicationMenuItem_Click"/>
                    <ribbon:RibbonSeparator />
                    <ribbon:RibbonApplicationSplitMenuItem Header="Search Program" ImageSource="Images\Search.ico">
                        <ribbon:RibbonApplicationMenuItem Header="BMP Images" ImageSource="Images\BMPImage.ico" Click="RibbonApplicationMenuItem_Click"/>
                        <ribbon:RibbonApplicationMenuItem Header="JPEG Images" ImageSource="Images\JPEGImage.ico" Click="RibbonApplicationMenuItem_Click"/>
                        <ribbon:RibbonApplicationMenuItem Header="GIF Images" ImageSource="Images\GIFImage.ico" Click="RibbonApplicationMenuItem_Click"/>
                        <ribbon:RibbonApplicationMenuItem Header="PNG Images" ImageSource="Images\PNGImage.ico" Click="RibbonApplicationMenuItem_Click"/>
                    </ribbon:RibbonApplicationSplitMenuItem>


                    <ribbon:RibbonApplicationMenu.FooterPaneContent>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Grid.Column="0">
                                <ribbon:RibbonButton Content="My Music" SmallImageSource="Images\MyMusic.ico" Click="RibbonButton_Click"/>
                                <ribbon:RibbonButton Content="Web Folders" SmallImageSource="Images\WebFolders.ico" Click="RibbonButton_Click"/>
                                <ribbon:RibbonButton Content="Settings" SmallImageSource="Images\Settings.ico" Click="RibbonButton_Click"/>
                            </StackPanel>
                            <ribbon:RibbonButton SmallImageSource="Images\AudioCD.ico" Label="Exit" HorizontalAlignment="Right" Grid.Column="2" Command="ApplicationCommands.Close" />
                        </Grid>
                    </ribbon:RibbonApplicationMenu.FooterPaneContent>

                    <ribbon:RibbonApplicationMenu.AuxiliaryPaneContent>
                        <TextBlock Text="This is the Auxilary Pane. You can also add RibbonGallery to AuxiliaryPane." />
                    </ribbon:RibbonApplicationMenu.AuxiliaryPaneContent>
                </ribbon:RibbonApplicationMenu>

In the above code I have declared a few RibbonApplicationMenuItem for Desktop, MyPicture, My Video etc. You can click on each of them to invoke the Click EventHandler. We specify the Image path directly to the ImageSource of the Menu Item.

RibbonApplicationMenuItem

To define Submenu, you can create as many RibbonApplicationMenuItem inside an individual MenuItem as u wish. Just in the above code, I have nested Primary Floppy and Seconday Floppy inside the Floppy MenuItem. The KeyTip defines the hot key which you can access by pressing Alt Key from the keyboard.

RibbonTab

The main part of a Ribbon is RibbonTab. Each RibbonTab contains a set of RibbonGroup, each of which contains individual controls. A Ribbon can have multiple RibbonTab associated with it.

 <ribbon:RibbonTab ContextualTabGroupHeader="ContextualHeader" Header="Selected">
                <ribbon:RibbonGroup>
                    <ribbon:RibbonButton LargeImageSource="Images\HelpFile.ico"
                                         Label="Help" />
                </ribbon:RibbonGroup>
            </ribbon:RibbonTab>
            <ribbon:RibbonTab Header="View">
            </ribbon:RibbonTab>
            <ribbon:RibbonTab Header="Insert">

            </ribbon:RibbonTab>
            <ribbon:RibbonTab Header="Format">

            </ribbon:RibbonTab>

Thus it will define few RibbonTab namely View, Insert, Format and Selected. You must notice the first RibbonTab contains a RibbonGroup. The RibbonGroup will produce a Button Help.

ContextualTab

You must also notice, if you specify ContextualTabGroupHeader for a RibbonTab, it will produce the Contextual Tab from the TitleBar of the RibbonWindow. The ContextualRibbonTab is generally not visible, but appears whenever some action is taken by the user to show the individual contextual Ribbon.

<ribbon:Ribbon.ContextualTabGroups>
                <ribbon:RibbonContextualTabGroup Header="ContextualHeader"
                                                 Visibility="Visible"
	                                            Background="Orange" />
                
            </ribbon:Ribbon.ContextualTabGroups>

Ribbon control has a property called ContextualTabGroups which you can use to Group each RibbonContextualTabGroup and alter its Visibility. The Ribbon ContextualTabGroup allows you to access each ContextualTabs during runtime.  In my sample application I have specified the Visibility=Visible for the ContextualHeader ContextualTab. So  it will appear whenever you start the application.

RibbonGroup

Each RibbonGroup have a GroupHeader, which is placed at the botton of the Group, the Items can be of Large Button Type or a Small Button type. The size of the Button is identified automatically based on the image we pass.

 <ribbon:RibbonGroup Header="Control Panel">
                    <ribbon:RibbonButton LargeImageSource="Images\ControlPanel.ico"
                                         Label="Settings Folder" 
                                         ToolTipTitle="Settings Folder"
                                         ToolTipDescription="Helps you change settings of the folder and also allows you to change certain system settings"
                                         ToolTipImageSource="Images\MyDocuments.ico"/>

                    <ribbon:RibbonButton SmallImageSource="Images\ConfigurationSettings.ico"
                                         Label="Config" 
                                         ToolTipTitle="Configuration Settings"
                                         ToolTipDescription="Allows you to change Configuration settings for the current selection"
                                         ToolTipImageSource="Images\MyBriefcase.ico"/>
                    <ribbon:RibbonButton SmallImageSource="Images\NetworkConnections.ico"
                                         Label="Network"
                                         ToolTipTitle="Network Settings"
                                         ToolTipDescription="Allows you to change Network settings for the current selection"
                                         ToolTipImageSource="Images\Helpandsupport.ico"/>
                    <ribbon:RibbonButton SmallImageSource="Images\ProgramGroup.ico"
                                         Label="Programs" 
                                         ToolTipTitle="Program Settings"
                                         ToolTipDescription="You can change the Program settings"
                                         ToolTipImageSource="Images\TextDocument.ico"/>

                </ribbon:RibbonGroup>

Here we mentioned LargeImageSource for the first button while others have defined SmallImageSource.  You can see instead of RibbonButton content we use Label to show the label text. RibbonButton exposes the Label Text to the interface.

Super ToolTip

RibbonButton has three properties to show Super tooltip. Each super Tooltip can have Title which you can specify using ToolTipTitle. The ToolTipDescription is used for description text and ToolTipImageSource is used to show the Image on the left of the Description.

Other Ribbon UI controls

The Ribbon can have many other UI elements as well. RibbonTextBox, RibbonToggleButton, RibbonCheckBox are some of the instances. You can use each of them as you normally do.

 <ribbon:RibbonCheckBox Label="Single Check" />
 <ribbon:RibbonToggleButton Label="Entire Network" SmallImageSource="Images\EntireNetwork.ico"  />
 <ribbon:RibbonTextBox Label="Run" SmallImageSource="Images\RUN.ico" />
 <ribbon:RibbonComboBox Label="Folders" SmallImageSource="Images\SharingOverlay.ico" ItemsSource="{Binding Path=FolderItems}" />
<ribbon:RibbonTwoLineText LineStackingStrategy="BlockLineHeight" Text="Two lines of Text"/>

The Label is used to display text in the Ribbon and SmallImageSource/LargeImageSource is used to display the associated image.

The RibbonTwoLineText is used to display Text in Ribbon.

RibbonGallery

RibbonGallery can be associated with a ComboBox. A RibbonGallery is a special component of a Ribbon bar, that have very rich visual interface.

<ribbon:RibbonComboBox Label="1" 
      SmallImageSource="Images/DVDDrive.ico"
      IsEditable="True" >
    <ribbon:RibbonGallery SelectedValue="Green"
                          SelectedValuePath="Content"
                          MaxColumnCount="1">
        <ribbon:RibbonGalleryCategory>
           <ribbon:RibbonGalleryItem Content="Green" Foreground="Green" />
            <ribbon:RibbonGalleryItem Content="Blue" Foreground="Blue" />
           <ribbon:RibbonGalleryItem Content="Orange" Foreground="Orange" />
       </ribbon:RibbonGalleryCategory>
    </ribbon:RibbonGallery>
 </ribbon:RibbonComboBox>

The RibbonComboBox hosts a RibbonGallery with three RibbonGalleryItems.

Conclusion

It is nice to try this cool rich controlset introduced recently. I hope you would like the article, and the article will help you in the long run.

Thanks for reading, looking for your Valuable Feedbacks.