Exploring Ribbon Control for Silverlight (Part - 1)

Microsoft Office 2010 has a cool new Ribbon Control bar which looks pretty rich and it is very easy to use with compare to the old Menu bar. Probably you may know that, we can create such Ribbon bar using WPF but did anyone think whether we can do it using Silverlight too, very easily?

Yes, we can create such Ribbon UI for our Silverlight application. So, if you want it for your Silverlight application, you can implement it very easily after reading these series of articles on Ribbon control.

Introduction to Silverlight Ribbon Control

Devcomponent has their own component called DotNetBar for Silverlight. It includes some good controls like Ribbon bar, Scheduler, Navigation Pane etc. Among them, I started with exploring the features of the Silverlight Ribbon Control. It looks pretty cool to me. Thought to share my exploration of this with you.

The DotNetBar includes Office 2010 style Ribbon control with blue, silver, black and custom color scheme blending based on single color. It supports MVVM as well as 100% code based control creation and setup. You can download the trial version of the library from DevComponents site. Here is the link of the download page: DotNetBar for Silverlight

Features of Silverlight Ribbon Control

• Microsoft Office 2010 style look and feel.
• Three different varieties of color scheme included like: Blue, Black, Silver color.
• You can customize the color scheme generation based on a single color too.
• A full set of controls are included to use with Ribbon Control:
  • Button
  • ToggleButton
  • RadioButton
  • DropDownButton
  • SplitButton
  • ComboBox
  • MenuItem
  • Gallery
  • InRibbonGallery
  • LayoutControl
• Supports automatic Ribbon sizing.
• Normal, Minimized, Collapsed and open in Popup views are supported like Office 2010.
• Office 2010 Style Backstage Application Menu.
• Quick Access Toolbar support.
• Customizable context menu support.
• Advanced Tooltips support.
• Reusable resources so you can reuse some predefined brushes.
• Automatic resizing of Ribbon toolbar.
• Coomand preview for Galleries are also available.
• Complete re-style, re-template supported by this library.
• MVVM architecture support.

Know more on Ribbon Control

DevComponents.Silverlight.Ribbon.Ribbon is the top level container for all that makes up a Ribbon UI. Ribbon inherits from ItemsHostControl and is meant to contain a collection of RibbonTabItem. You can place any UI Element inside the Ribbon but it will not render once the application load.

Ribbon’s SystemToolbarItems is an ObservableCollection of UIElements. All items in the collection are rendered on the far right of the Ribbon, at the same vertical level as the ribbon tab items. By default, this collection is empty.

The QuickAccessToolbarItems is also an ObservableCollection of UIElements. All items placed in this collection are rendered on the top left corner of the Ribbon control’s boundaries.

Ribbon.BackstageContent is used to set the object which is displayed in the Popup when the Backstage (or File) toggle button is checked. By default this property is null. To get or set whether the backstage is  open, use the IsBackStageOpen property.

By default the Backstage button displays the text "File". This can be changed via the BackstageButtonContent property. To hide the backstage button altogether, set BackstageButtonVisibility = false.

The Ribbon always displays the content provided by the currently selected item. Get or set the currently selected item via the SelectedItem dependency property.

The ribbon can be minimized by setting the IsMinimized property to true. When minimized, the tab items are visible but the content is hidden. When minimized, the content can be shown in a popup by setting IsPopupOpen to true. If a user clicks on a tab when the Ribbon is minimized, the tab item will be selected and the popup will open to show the content. By default, the user can toggle between minimized and normal state by double clicking on a tab item. This can be overridden by setting DoubleClickTabToggleEnabled = false.

The ribbon can be collapsed by setting IsCollapsed = true. When collapsed, no portion of the Ribbon is visible. By default, the ribbon collapses automatically when either its width or the height of the hosting Silverlight application reach certain minimum values. These values are defined in RibbonResources as RibbonCollapseWidth and RibbonCollapseApplicationHeight, respectively.

Preparing the Project

Once you downloaded the DotNetBar Library for Silverlight, install them in your local PC. It has some cool samples. Before going thru them, let us start creating our own sample project step-by-step and explore it to learn.

Create a Silverlight application project. Once created, add two dll assembly reference named "DevComponents.Silverlight.Controls.dll" and "DevComponents.Silverlight.Ribbon.dll" to your project from the installation directory.

Generally, you will find them under "Program Files\DotNetBarSilverlight" directory. These two assemblies are require for you to start working with it.

Once you added the reference, I will suggest you to restructure your project in MVVM pattern. In this article we will not use the MVVM, but in future articles it will be helpful for you. Create "Models", "Views", "ViewModels" and "Images" directory inside your solution root. Also, create the MainView.xaml and MainViewModel.cs files under the appropriate directories. Build your solution and you will encounter some build errors. Fix them to start with the next steps.

Inherit your MainViewModel from the ViewModelBase, which is part of the namespace called "DevComponents.Silverlight.Controls.ViewModel". Include the namespace as shown above. Now, your solution is ready for our next steps.

Adding a Ribbon Control

Once your dev environment is ready including the project, we can jump into the XAML code to create a cool looking Ribbon bar control for our Silverlight application. Open your MainView.xaml page and add the XMLNS namespace "DevComponents.Silverlight.Ribbon" in the same xaml page.

Have a look into the following screenshot for reference:

Split your main "LayoutRoot" grid into two rows. In the first row, we will place the ribbon bar. The second row we will use later if require.

Here is the XAML code for your reference:

<UserControl x:Class="DevComponentRibbonDemo.Views.MainView"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:r="clr-namespace:DevComponents.Silverlight.Ribbon;

                                assembly=DevComponents.Silverlight.Ribbon"

    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

    </Grid>

</UserControl>

Now, add the following XAML code inside your LayoutRoot:

<r:Ribbon x:Name="ribbon" 

          PersistRibbonState="True"

          IsMinimized="False" IsCollapsed="False"

          BackstageButtonVisibility="Visible" BackstageColor="Blue">

</r:Ribbon>

This will add the Ribbon bar control in your page. Build and run your application. You will see the below naked Ribbon bar at the top of your application:

Adding Ribbon Tab Items

DevComponents.Silverlight.Ribbon.RibbonTabItem is the second level container for all that makes up a Ribbon UI. This is the main content control for the Ribbon.

The Label property sets the string value which is displayed by the tab item.

Use IsSelected to get or set whether the tab item is selected. Setting this property to true will change the value of Ribbon.SelectedItem.

RibbonBarResizeOrder is used to create a stack of references to RibbonBars, defining the order in which they are shrunk as the Ribbon is made smaller or fully expanded.

Now it's time for us to add some Ribbon items in the bar. Use RibbonTabItem inside the Ribbon control to add some child elements. Use the property "Label" to specify the label for each tab item. Have a look into the following code snippet:

<r:Ribbon x:Name="ribbon" 

          PersistRibbonState="True"

          IsMinimized="False" IsCollapsed="False"

          BackstageButtonVisibility="Visible" BackstageColor="Blue">

    <r:RibbonTabItem Label="Edit"></r:RibbonTabItem>

    <r:RibbonTabItem Label="View"></r:RibbonTabItem>

    <r:RibbonTabItem Label="Project"></r:RibbonTabItem>

    <r:RibbonTabItem Label="Build"></r:RibbonTabItem>

</r:Ribbon>

Here, we added four different RibbonTabItems named "Edit", "View", "Project" and "Build". If you run your application now, you will see the below UI inside the browser window:

Chose the various tab items and you will notice that, every tab controls are totally blank. But you are able to switch between each tabs as you do in Office 2010.

Once it is ready, why not to add some controls inside one of the tab control? Let's start doing it. Inside one of the tab item, add a RibbonBar item and put some buttons there.

Adding Ribbon Control Items

Ribbon Tab Item can contain any items. If you want a auto resized panel, use one more RibbonBar inside it. Another way to do is the use of LayoutControl. A LayoutControl is a kind of like a multi-line toolbar which supports multiple layout definitions. Layout definitions allow you to specify exactly where each control is rendered in relationship to the other controls. A layout control may have multiple layout definitions, each of a different width. As the Ribbon is resized, the most appropriate layout definition is  used according to the available space.

The Label property sets the string value which is displayed by the ribbon bar along its bottom edge.

Let us create an UI like this, where we will have a medium sized paste button and two small sized Cut and Copy buttons:

We will put them inside the Edit tab item. For this layout type, we don't need a multiple line layout. So, we can use the auto resized panel i.e. one more RibbonBar inside it. Hence, expand the control and add a Split button for giving the user a paste button. Also add two normal ribbon buttons for the cut and copy looks.

Find the exact code of the same here:

<r:RibbonTabItem Label="Edit">

  <r:RibbonBar Label="Clipboard">

      <r:SplitButton x:Name="PasteSplitButton" Label="Paste" 

                     LargeImageSource="/DevComponentRibbonDemo;component/Images/Paste32.png" 

                     r:Ribbon.ToolTipContent="Paste the copied content from the Clipboard."

                     r:Ribbon.ToolTipHeader="Paste (Ctrl + V)" />

      <r:Button x:Name="CutButton" Label="Cut" 

                SmallImageSource="/DevComponentRibbonDemo;component/Images/Cut16.png" 

                r:Ribbon.ToolTipContent="Cut the selection and put it in the Clipboard." 

                r:Ribbon.ToolTipHeader="Cut (Ctrl + X)" />

      <r:Button x:Name="CopyButton" Label="Copy"

                SmallImageSource="/DevComponentRibbonDemo;component/Images/Copy16.png" 

                r:Ribbon.ToolTipContent="Copy the selection and put it in the Clipboard." 

                r:Ribbon.ToolTipHeader="Paste (Ctrl + V)"/>

  </r:RibbonBar>

</r:RibbonTabItem>

You can notice that, each buttons are from the ribbon library and those have different sets of properties to show the tooltip, image, label etc.

Now run your application. You will see the ribbon control having the three buttons called Cut, Copy and Paste into the screen. BTW, those buttons are not functional as we didn't implement their features.

Hover your mouse on top of each control and you will see a great tooltip like the office 2010 window. Have a look into the below screenshot:

You can also customize the tooltip to show more complex elements inside it. We will discuss it later.

End Note

Hope, you enjoyed reading this first part of the Ribbon Controls for Silverlight. This is just a beginner series to start working with the same. Many more yet to come. In the later part, we will discuss more on the Layout and controls.

The sample has been created using the Licensed version of DotNetBar. If you download the source code and run without license, may get "Invalid License Key" warning in the UI.

Don't forget to share your feedback about the article. This will help me to provide you a much better article in future.

Get the source code of this sample from here: