Edit this page

Ribbon Tab

Telerik RadRibbonView provides a simple and consistent way for building interfaces similar to the ribbon control used in Microsoft Office. The RadRibbonView consists of various elements, one of which is the Ribbon Tab. This topic discusses concepts fundamental to the Ribbon Tab at first and then goes into the usage of the RadRibbonTab class and its features.

Before proceeding with this tutorial, it is recommended to get familiar with the Visual Structure of the RadRibbonView control.

Ribbon Tab - Fundamentals

The RadRibbonView helps end-users to quickly find the tools and options they need in order to complete a task. Tools and options are organized in logical groups that are collected together under specific tabs. Or in other words - the Ribbon Tab lets you categorize the commands to be displayed for the end-users.

The class that represents the ribbon tab is Telerik.Windows.Controls.RadRibbonTab.

The RadRibbonTab is a HeaderedItemsControl. Which means that the RadRibbonTab contains a heading (or title) and multiple items.

Check out the rest of this topic, which is entirely dedicated to the RadRibbonTab.

Adding Tab Items

When you are designing a new RadRibbonView, one of your first tasks will be to add tabs. In order to add RibbonTabs to your RadRibbonView control, you need to populate the RadRibbonView's Items collection.

The next example demonstrates how to add several RadRibbonTab to your ribbon and how to set their Header property.

<telerik:RadRibbonView x:Name="radRibbonView">
    <telerik:RadRibbonTab Header="Home">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Insert">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Page Layout">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="References">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Mailings">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Review">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="View">
    </telerik:RadRibbonTab>
</telerik:RadRibbonView>

Use the RadRibbonTab's HeaderVisibility property, when you want to change the visibility of the TabItem's header.

Working with Selection

For more information, please take a look at the Selection topic.

Changing the Default Selected Tab

The first item in the Items collection is the default selected RibbonTab. However, you have the ability to change the default selected RibbonTab, by setting the RadRibbonTab's IsSelected property.

The example below sets the IsSelected property to True of the "References" RibbonTab.

<telerik:RadRibbonView x:Name="radRibbonView">
    <telerik:RadRibbonTab Header="Home">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Insert">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Page Layout">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="References" IsSelected="True">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Mailings">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Review">
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="View">
    </telerik:RadRibbonTab>
</telerik:RadRibbonView>

Accessing the Selected Tab Run-Time

Sometimes you may want to access the currently selected tab run-time. In this case, you should use the RadRibbonView's SelectedTab property.

RadRibbonTab currentlySelectedTab = radRibbonView.SelectedTab;
Dim currentlySelectedTab As RadRibbonTab = radRibbonView.SelectedTab

Minimization

RadRibbonView supports minimization, which means that the ribbon may be hidden so that only its tabs appear. The end-user can toggle the minimization of the ribbon by double-clicking the selected tab.

For more information, please take a look at the Minimization topic.

Events

The RadRibbonView exposes two events related to the RadRibbonTab element:

  • PreviewSelectionChanged - event raised when the tab selection is about to be done. The PreviewSelectionChanged event handler receives two arguments:

    • The sender argument contains the RadRibbonView. This argument is of type object, but can be cast to the RadRibbonView type.
    • The second argument is RadSelectionChangedEventArgs containing all additional information about the event:
      • AddedItems - an IList collection of the selected items
      • RemovedItems - an IList collection of the unselected items

    You can cancel the selection by setting the RadSelectionChangedEventArgs's Handled property to True.

        <telerik:RadRibbonView x:Name="radRibbonView" PreviewSelectionChanged="radRibbonView_PreviewSelectionChanged">
         ...
        </telerik:RadRibbonView>
    

        private void radRibbonView_PreviewSelectionChanged(object sender, RadSelectionChangedEventArgs e)
        {
         // Get the ribbonView
         RadRibbonView ribbonView = sender as RadRibbonView;
         //Get the selected items
         IList selectedItems = e.AddedItems;
         //Get the unselected items
         IList unselectedItems = e.RemovedItems;
         // Cancel the selection
         e.Handled = true;
        }
    
        Private Sub radRibbonView_PreviewSelectionChanged(sender As Object, e As RadSelectionChangedEventArgs)
            ' Get the ribbonView'
            Dim ribbonView As RadRibbonView = TryCast(sender, RadRibbonView)
            'Get the selected items'
            Dim selectedItems As IList = e.AddedItems
            'Get the unselected items'
            Dim unselectedItems As IList = e.RemovedItems
            ' Cancel the selection'
            e.Handled = True
        End Sub
    
  • SelectionChanged - event raised after the tab selection is done. The SelectionChanged event handler receives two arguments:

    • The sender argument contains the RadRibbonView. This argument is of type object, but can be cast to the RadRibbonView type.
    • The second argument is RadSelectionChangedEventArgs containing all additional information about the event:
      • AddedItems - an IList collection of the selected items
      • RemovedItems - an IList collection of the unselected items

        <telerik:RadRibbonView x:Name="radRibbonView" SelectionChanged="radRibbonView_SelectionChanged">
         ...
        </telerik:RadRibbonView>
    

        private void radRibbonView_SelectionChanged(object sender, RadSelectionChangedEventArgs e)
        {
         // Get the ribbonView
         RadRibbonView ribbonView = sender as RadRibbonView;
         //Get the selected items
         IList selectedItems = e.AddedItems;
         //Get the unselected items
         IList unselectedItems = e.RemovedItems;
        }
    
        Private Sub radRibbonView_SelectionChanged(sender As Object, e As RadSelectionChangedEventArgs)
            ' Get the ribbonView'
            Dim ribbonView As RadRibbonView = TryCast(sender, RadRibbonView)
            'Get the selected items'
            Dim selectedItems As IList = e.AddedItems
            'Get the unselected items'
            Dim unselectedItems As IList = e.RemovedItems
        End Sub
    

For a full list of the exposed by the RadRibbonView events, take a look at the Events - Overview topic. The RadRibbonView is a complex control and the RibbonTab is only a small part of it. The RadRibbonView consists of various elements such as:

See Also