Exploring Ribbon Control for Silverlight (Part - 2)

In my previous article "Exploring Ribbon Control for Silverlight (Part - 1)", we discussed about the Ribbon control Library provided by Devcomponents. We created a small demo application, where we integrated the Ribbon control bar in the XAML.

In this article, we will discuss more on the Ribbon control items. It will be helpful for you to understand them in depth and use it in your application. Read the complete post and at the end, let me know your feedbacks.

Background

To understand this article, you must read my previous chapter "Exploring Ribbon Control for Silverlight (Part - 1)". That will give you more visibility to this library. This control library is not a free one. So, if you are running in it's trial mode, you may get "Invalid LicenseKey" message on top of the control.

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

In this article, we will discuss about Layout Controls.

Layout Control

The LayoutControl is used to perform the customized layouting of controls inside the RibbonBar. It inherits from ItemsHostControl and displays all types of UIElement. Layout controls arranges the items according to the Layout Definition. By default it arranges all the child controls side by side which you can override and mention how your controls will arrange them in that particular area.

Let's start with our existing application. Add a new Ribbon Bar and label it as "Font" where we will create one drop down to load the Font names. In this article, we will not create any font list there. We will just put a place holder for you to understand how this layout works. We will also add a dropdown where we will place various font sizes. Here you will understand how to create a gallery of options like Office 2010. We will also discuss to create additional toggle buttons in the ribbon bar.

Add a LayoutControl element just inside your RibbonBar labeled "Font". Now add a ComboBox from the ribbon library. We will use the ComboBox from the ribbon library to get the additional advantages from the library.

Your XAML will look as below:

<r:RibbonBar Label="Font">

    <r:LayoutControl>

        <!-- Adding a Combo Box for FontFamily -->

        <r:ComboBox Name="FontFamilyComboBox" Width="60"

                    IsEditable="True" IsReadOnly="True"

                    r:QuickAccessToolbar.QATWidth="100"

                    SelectedItem="{Binding CurrentFontFamily}"

                    r:Ribbon.ToolTipHeader="Font Family" 

                    r:Ribbon.ToolTipContent="Change the font face.">

            <!-- Gallery to properly show items -->

            <r:Gallery CanResizeVertically="True" MaxColumnCount="1">

                <r:Gallery.GalleryItemTemplate>

                    <DataTemplate>

                        <TextBlock Text="{Binding Source}" 

                                   FontFamily="{Binding}" FontSize="14"/>

                    </DataTemplate>

                </r:Gallery.GalleryItemTemplate>

                <r:GalleryCategory Header="Recent Fonts" 

                                   ItemsSource="{Binding RecentFontFamilies}" />

                <r:GalleryCategory Header="All Fonts"

                                   ItemsSource="{Binding FontFamilies}" />

            </r:Gallery>

        </r:ComboBox>

    </r:RibbonBar Label="Font">

</r:LayoutControl>

There you will bind your items and collection as per your requirement. Now add one more combobox from the library itself to load the font size. Inside the combo box, add a GalleryCategory which will load all the font sizes as a Gallery Item. Give the size of the font as a Content to the GalleryItem.

Look into the following XAML code for better visibility:

<r:ComboBox Name="FontSizeComboBox" 

            DisplayMemberPath="Content" 

            IsEditable="True"

            r:QuickAccessToolbar.QATWidth="35"

            r:Ribbon.ToolTipHeader="Font Size" 

            r:Ribbon.ToolTipContent="Change the font size." SelectedIndex="5">

    <r:Gallery CanResizeVertically="True" MaxColumnCount="1">

        <r:GalleryCategory>

            <r:GalleryItem Content="8" />

            <r:GalleryItem Content="9" />

            <r:GalleryItem Content="10" />

            <r:GalleryItem Content="11" />

            <r:GalleryItem Content="12" />

            <r:GalleryItem Content="14" />

            <r:GalleryItem Content="16" />

            <r:GalleryItem Content="18" />

            <r:GalleryItem Content="20" />

            <r:GalleryItem Content="24" />

            <r:GalleryItem Content="28" />

            <r:GalleryItem Content="32" />

            <r:GalleryItem Content="36" />

            <r:GalleryItem Content="40" />

            <r:GalleryItem Content="48" />

            <r:GalleryItem Content="60" />

        </r:GalleryCategory>

    </r:Gallery>

</r:ComboBox>

<r:ToggleButton SmallImageSource="/DevComponentRibbonDemo;component/Images/Bold.png" 

                r:Ribbon.ToolTipHeader="Bold (Ctrl+B)" 

                r:Ribbon.ToolTipContent="Make the selected text bold." />

<r:ToggleButton SmallImageSource="/DevComponentRibbonDemo;component/Images/Italic.png"

                r:Ribbon.ToolTipHeader="Italic (Ctrl+I)" 

                r:Ribbon.ToolTipContent="Italicize the selected text." />

<r:ToggleButton SmallImageSource="/DevComponentRibbonDemo;component/Images/Underline.png" 

                r:Ribbon.ToolTipHeader="Underline (Ctrl+U)" 

                r:Ribbon.ToolTipContent="Underline the selected text." />

We will also add three buttons there named Bold, Italic and Underline. These buttons will be ToggleButton from the Ribbon library itself to get the additional benefits like image source, Tooltip Header, Tooltip Content etc.

See the above XAML code for the reference. You will see how I added the properties there. It has many more properties. Chose the best which is require for you in your application.

Demo

Let's run our application. You will see that it now has a ribbon panel named "Font". This is nothing but your layout control. It has two combo box. Clicking on the font size combo will expand the dropdown, from there you can chose the correct font size.

Also, you will see three toggle buttons as we added there, just below the two dropdowns.

This is all about the layout control for this article. There are many more options there. If you want to use it, read the full article from the DevComponents DotNetBar tutorials section. You will see many more features in this Ribbon control for Silverlight.

This is not a FREE control library. You can download the trial version of this library and explore it. In trial mode, it will show a "Invalid LicenseKey" message on top of the Ribbon control. The sample created here uses the licensed version of the library.

If you are interested to get a FREE license of the same, let me know. I will try to do a Giveaway of the library license for my blog readers and twitter followers. Stay tuned for the other news coming shortly.