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.
Download RibbonTestApplication Source How to start?
Now to start creating your first application, you need :
- Visual Studio 2010. You can install Visual Studio trial from here. Or you can try Visual Studio 2010 Express from here.
- 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.
- After you install, Launch Visual Studio 2010 and select WPF Ribbon Application from Visual Studio Project Templates.
 |
| Add new RibbonApplication from VS templates |
- 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:
 |
| You will see the sample application from template |
- The RibbonControlsLibrary.dll is already referenced and the Window is actually inherits from RibbonWindow which includes customized title bar and status bar.
- 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.
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.
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.
Super ToolTip : WPF Ribbon bar introduces enhanced tooltip to describe your command the best way possible. We call it superTooltip.
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.
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.
Group Ribbon Tabs : A Ribbon control can have multiple RibbonTab 's. So You can group the set of Commands into individual Tabs.
 |
| Demonstrate Tabs and Groups in Ribbon |
Contextual Ribbon Tab : You can also have Contextual Ribbon Tab, a special Tab that will display dynamic content based on User interaction.
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 :
<span class="kwrd"><</span><span class="html">ribbon:RibbonWindow</span> <span class="attr">x:Class</span><span class="kwrd">="RibbonTestApplication.MainWindow"</span>
<span class="attr">xmlns</span><span class="kwrd">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>
<span class="attr">xmlns:x</span><span class="kwrd">="http://schemas.microsoft.com/winfx/2006/xaml"</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonWindow</span><span class="kwrd">></span>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
 |
| The Application menu contains main Menuitems at the left side, the AuxilaryPane in the right side and the FooterPane in the bottom of the MainMenu. |
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 :
<span class="kwrd"><</span><span class="html">ribbon:Ribbon.ApplicationMenu</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenu</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\MyComputer.ico"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="Desktop"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\Desktop.ico"</span> <span class="attr">KeyTip</span><span class="kwrd">="D"</span> <span class="attr">Click</span><span class="kwrd">="RibbonApplicationMenuItem_Click"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="Floppy"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\HardDrive.ico"</span> <span class="attr">KeyTip</span><span class="kwrd">="F"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="Primary Floppy"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\FloppyDrive3.ico"</span> <span class="attr">KeyTip</span><span class="kwrd">="P"</span> <span class="attr">Click</span><span class="kwrd">="RibbonApplicationMenuItem_Click"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="Secondary Floppy"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\FloppyDrive5.ico"</span> <span class="attr">KeyTip</span><span class="kwrd">="S"</span> <span class="attr">Click</span><span class="kwrd">="RibbonApplicationMenuItem_Click"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonApplicationMenuItem</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="My Pictures"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\MyPictures.ico"</span> <span class="attr">KeyTip</span><span class="kwrd">="M"</span> <span class="attr">Click</span><span class="kwrd">="RibbonApplicationMenuItem_Click"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="My Videos"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\MyVideos.ico"</span> <span class="attr">KeyTip</span><span class="kwrd">="V"</span> <span class="attr">Click</span><span class="kwrd">="RibbonApplicationMenuItem_Click"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonSeparator</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationSplitMenuItem</span> <span class="attr">Header</span><span class="kwrd">="Search Program"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\Search.ico"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="BMP Images"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\BMPImage.ico"</span> <span class="attr">Click</span><span class="kwrd">="RibbonApplicationMenuItem_Click"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="JPEG Images"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\JPEGImage.ico"</span> <span class="attr">Click</span><span class="kwrd">="RibbonApplicationMenuItem_Click"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="GIF Images"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\GIFImage.ico"</span> <span class="attr">Click</span><span class="kwrd">="RibbonApplicationMenuItem_Click"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenuItem</span> <span class="attr">Header</span><span class="kwrd">="PNG Images"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\PNGImage.ico"</span> <span class="attr">Click</span><span class="kwrd">="RibbonApplicationMenuItem_Click"</span><span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonApplicationSplitMenuItem</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenu.FooterPaneContent</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">Grid</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">Grid.ColumnDefinitions</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ColumnDefinition</span> <span class="attr">Width</span><span class="kwrd">="Auto"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ColumnDefinition</span> <span class="attr">Width</span><span class="kwrd">="*"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ColumnDefinition</span> <span class="attr">Width</span><span class="kwrd">="Auto"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">Grid.ColumnDefinitions</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">StackPanel</span> <span class="attr">Orientation</span><span class="kwrd">="Horizontal"</span> <span class="attr">HorizontalAlignment</span><span class="kwrd">="Left"</span> <span class="attr">Grid</span>.<span class="attr">Column</span><span class="kwrd">="0"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">Content</span><span class="kwrd">="My Music"</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\MyMusic.ico"</span> <span class="attr">Click</span><span class="kwrd">="RibbonButton_Click"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">Content</span><span class="kwrd">="Web Folders"</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\WebFolders.ico"</span> <span class="attr">Click</span><span class="kwrd">="RibbonButton_Click"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">Content</span><span class="kwrd">="Settings"</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\Settings.ico"</span> <span class="attr">Click</span><span class="kwrd">="RibbonButton_Click"</span><span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">StackPanel</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\AudioCD.ico"</span> <span class="attr">Label</span><span class="kwrd">="Exit"</span> <span class="attr">HorizontalAlignment</span><span class="kwrd">="Right"</span> <span class="attr">Grid</span>.<span class="attr">Column</span><span class="kwrd">="2"</span> <span class="attr">Command</span><span class="kwrd">="ApplicationCommands.Close"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">Grid</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonApplicationMenu.FooterPaneContent</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonApplicationMenu.AuxiliaryPaneContent</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">TextBlock</span> <span class="attr">Text</span><span class="kwrd">="This is the Auxilary Pane. You can also add RibbonGallery to AuxiliaryPane."</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonApplicationMenu.AuxiliaryPaneContent</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonApplicationMenu</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:Ribbon.ApplicationMenu</span><span class="kwrd">></span>
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.
RibbonApplicationMenuItemTo 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.
 |
| Normal MenuItem with submenu |
RibbonApplicationSplitMenuItemThe RibbonApplicationSplitMenuItem on the other hand has slight difference from the normal RibbonApplicationMenuItem. If you see the second Submenu that I have provided in the sample application, you will discover that it is actually a Menu Item which have splitted button with a separator.
 |
| Split MenuItem |
In case of SplitMenuItem, you can either use the item as MenuItem or you can use it to select its SubMenuItems.
RibbonSeparator:
RibbonSeparator allows you to produce a separation between two sets of items. You can use it either in MenuItems or in RibbonGroups.
RibbonApplicationMenu.AuxiliaryPaneContent
AuxilaryPane is generally used to list GalleryItems of all the Recent items accessed by the application. The Right hand blank area of the RibbonMenu is called AuxillaryPane. In the sample application I have put a TextBlock to write few lines in the AuxillaryPane.
RibbonApplicationMenu.FotterPaneContent
The FooterPaneContent on the other hand allows to access the footer of the Menu. I have added few RibbonButtons on the FooterPane. 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.
<span class="kwrd"><</span><span class="html">ribbon:RibbonTab</span> <span class="attr">ContextualTabGroupHeader</span><span class="kwrd">="ContextualHeader"</span> <span class="attr">Header</span><span class="kwrd">="Selected"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonGroup</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">LargeImageSource</span><span class="kwrd">="Images\HelpFile.ico"</span>
<span class="attr">Label</span><span class="kwrd">="Help"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonGroup</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonTab</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonTab</span> <span class="attr">Header</span><span class="kwrd">="View"</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonTab</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonTab</span> <span class="attr">Header</span><span class="kwrd">="Insert"</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonTab</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonTab</span> <span class="attr">Header</span><span class="kwrd">="Format"</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonTab</span><span class="kwrd">></span>
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.
<span class="kwrd"><</span><span class="html">ribbon:Ribbon.ContextualTabGroups</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonContextualTabGroup</span> <span class="attr">Header</span><span class="kwrd">="ContextualHeader"</span>
<span class="attr">Visibility</span><span class="kwrd">="Visible"</span>
<span class="attr">Background</span><span class="kwrd">="Orange"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:Ribbon.ContextualTabGroups</span><span class="kwrd">></span>
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.
<span class="kwrd"><</span><span class="html">ribbon:RibbonGroup</span> <span class="attr">Header</span><span class="kwrd">="Control Panel"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">LargeImageSource</span><span class="kwrd">="Images\ControlPanel.ico"</span>
<span class="attr">Label</span><span class="kwrd">="Settings Folder"</span>
<span class="attr">ToolTipTitle</span><span class="kwrd">="Settings Folder"</span>
<span class="attr">ToolTipDescription</span><span class="kwrd">="Helps you change settings of the folder and also allows you to change certain system settings"</span>
<span class="attr">ToolTipImageSource</span><span class="kwrd">="Images\MyDocuments.ico"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\ConfigurationSettings.ico"</span>
<span class="attr">Label</span><span class="kwrd">="Config"</span>
<span class="attr">ToolTipTitle</span><span class="kwrd">="Configuration Settings"</span>
<span class="attr">ToolTipDescription</span><span class="kwrd">="Allows you to change Configuration settings for the current selection"</span>
<span class="attr">ToolTipImageSource</span><span class="kwrd">="Images\MyBriefcase.ico"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\NetworkConnections.ico"</span>
<span class="attr">Label</span><span class="kwrd">="Network"</span>
<span class="attr">ToolTipTitle</span><span class="kwrd">="Network Settings"</span>
<span class="attr">ToolTipDescription</span><span class="kwrd">="Allows you to change Network settings for the current selection"</span>
<span class="attr">ToolTipImageSource</span><span class="kwrd">="Images\Helpandsupport.ico"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\ProgramGroup.ico"</span>
<span class="attr">Label</span><span class="kwrd">="Programs"</span>
<span class="attr">ToolTipTitle</span><span class="kwrd">="Program Settings"</span>
<span class="attr">ToolTipDescription</span><span class="kwrd">="You can change the Program settings"</span>
<span class="attr">ToolTipImageSource</span><span class="kwrd">="Images\TextDocument.ico"</span><span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonGroup</span><span class="kwrd">></span>
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.
When the Settings Folder is hovered, the Super ToolTip appears just below the RibbonTab.
RibbonSplitButton
Just like RibbonSplitMenuItem, RibbonSplitButton has a Button and a menu associated with it. Each RibbonSplitButton is a group of normal RibbonButton and a Menu. You can individually access the Button, or you can use it to get a item from the menu.
<span class="kwrd"><</span><span class="html">ribbon:RibbonSplitButton</span> <span class="attr">Label</span><span class="kwrd">="WorkGroup"</span> <span class="attr">LargeImageSource</span><span class="kwrd">="Images\Workgroup.ico"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonMenuItem</span> <span class="attr">Header</span><span class="kwrd">="Folder Options"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\FolderOptions.ico"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonMenuItem</span> <span class="attr">Header</span><span class="kwrd">="Printers and Fax"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\printersFaxes.ico"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonMenuItem</span> <span class="attr">Header</span><span class="kwrd">="Network Service"</span> <span class="attr">ImageSource</span><span class="kwrd">="Images\NetworkService.ico"</span><span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonSplitButton</span><span class="kwrd">></span>
The RibbonSplitButton can have RibbonMenu in its content. The menuitems will be listed when the button is clicked.
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.
<span class="kwrd"><</span><span class="html">ribbon:RibbonCheckBox</span> <span class="attr">Label</span><span class="kwrd">="Single Check"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonToggleButton</span> <span class="attr">Label</span><span class="kwrd">="Entire Network"</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\EntireNetwork.ico"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonTextBox</span> <span class="attr">Label</span><span class="kwrd">="Run"</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\RUN.ico"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonComboBox</span> <span class="attr">Label</span><span class="kwrd">="Folders"</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\SharingOverlay.ico"</span> <span class="attr">ItemsSource</span><span class="kwrd">="{Binding Path=FolderItems}"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonTwoLineText</span> <span class="attr">LineStackingStrategy</span><span class="kwrd">="BlockLineHeight"</span> <span class="attr">Text</span><span class="kwrd">="Two lines of Text"</span><span class="kwrd">/></span>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.
<span class="kwrd"><</span><span class="html">ribbon:RibbonComboBox</span> <span class="attr">Label</span><span class="kwrd">="1"</span>
<span class="attr">SmallImageSource</span><span class="kwrd">="Images/DVDDrive.ico"</span>
<span class="attr">IsEditable</span><span class="kwrd">="True"</span> <span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonGallery</span> <span class="attr">SelectedValue</span><span class="kwrd">="Green"</span>
<span class="attr">SelectedValuePath</span><span class="kwrd">="Content"</span>
<span class="attr">MaxColumnCount</span><span class="kwrd">="1"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonGalleryCategory</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonGalleryItem</span> <span class="attr">Content</span><span class="kwrd">="Green"</span> <span class="attr">Foreground</span><span class="kwrd">="Green"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonGalleryItem</span> <span class="attr">Content</span><span class="kwrd">="Blue"</span> <span class="attr">Foreground</span><span class="kwrd">="Blue"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonGalleryItem</span> <span class="attr">Content</span><span class="kwrd">="Orange"</span> <span class="attr">Foreground</span><span class="kwrd">="Orange"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonGalleryCategory</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonGallery</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonComboBox</span><span class="kwrd">></span>The RibbonComboBox hosts a RibbonGallery with three RibbonGalleryItems.
 |
| Gallery Item |
The comboBox lists the Gallery items in it. This is the most simple use of Gallery items.
QuickAccessToolBarAnother important feature is the QuickAccessToolBar feature with Ribbon control Each of the RibbonWindow can have a Quick Access Toolbar which lists itself in the title bar of the window. To define the QuickAccessToolBar we use QuickAccessToolBar property of Ribbon. The RibbonQuickAccessToolBar control helps to list the controls in the QuickAccess toolbar.
<span class="kwrd"><</span><span class="html">ribbon:Ribbon.QuickAccessToolBar</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonQuickAccessToolBar</span> <span class="attr">HorizontalAlignment</span><span class="kwrd">="Right"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\RAMDrive.ico"</span> <span class="attr">KeyTip</span><span class="kwrd">="R"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\OpenFolder.ico"</span> <span class="attr">KeyTip</span><span class="kwrd">="O"</span><span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\MyRecentDocuments.ico"</span> <span class="attr">KeyTip</span><span class="kwrd">="R"</span><span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonQuickAccessToolBar</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:Ribbon.QuickAccessToolBar</span><span class="kwrd">></span>The QuickAccessToolbar automatically produces a Menu when the space is constrained.
ContextMenuSimilar to normal ContextMenu, Ribbon contextMenu can also be altered to create your own custom ContextMenu. The RibbonContextMenu is used instead of normal ContextMenu to list each individual RibbonMenuItems.
<span class="kwrd"><</span><span class="html">ribbon:Ribbon.ContextMenu</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonContextMenu</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonMenuButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\RecycleBinf.ico"</span> <span class="attr">Label</span><span class="kwrd">="Special ContextMenu Option"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonMenuButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\RecycleBine.ico"</span> <span class="attr">Label</span><span class="kwrd">="Normal ContextMenu Option"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">ribbon:RibbonMenuButton</span> <span class="attr">SmallImageSource</span><span class="kwrd">="Images\RemovableDrive.ico"</span> <span class="attr">Label</span><span class="kwrd">="Extra ContextMenu Option"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ribbon:RibbonContextMenu</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ribbon:Ribbon.ContextMenu</span><span class="kwrd">></span>Minimizing a RibbonBarA RibbonBar automatically holds few properties. One of such is minimizing the RibbonBar. When you minimize a RibbonBar, the RibbonBar will appear like a menu, which lets you use the full space of the window for other controls.
To minimize a Ribbon, just Right click on any RibbonTab and select Minimize. The window will appear just like above.
Note : Ribbon control supports ICommand interface, so you can built applications using Command Bindings. In the sample application I didnt used Command interfaces for simplicity. You may use it just the same way as you do with WPF Buttons.
Download RibbonTestSample SourceConclusion
RibbonUIControls are introduced recently to enable the WPF application to use RibbonWindow. In this article, I have demonstrated each of the features introduced with the library so that it helps any developer to grab the feature easily.
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.
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Rant 
Admin