RadControls for Silverlight

A contextual tab allows you to provide the user with a certain UI when he is in a specific context or has selected a specific element. The contextual tabs can be organized in groups, thus you can have more than one tab in a contextual group.

For example the Microsoft Word 2007 shows a contextual tab called Format, when you have selected an image. This tab contains only functionality that allows you to manipulate the image. Also this functionality is nowhere to be find in the other static tabs.

The contextual tabs are used to display tabs with a context specific functionality. They get displayed only when this functionality is needed. This way the common UI in the RadRibbonBar becomes lighter and the specific functionality becomes easier to find as it is separated in a contextual tab.

To use contextual tabs in the RadRibbonBar control you have to use its ContextualGroupContainer property. The RadRibbonContextualGroupContainer serves as a holder for the available RadRibbonContextualGroups. Each of the groups can hold more than one RadRibbonTab.

Note

To use the RadRibbonBar and its components in XAML you have to declare the following namespace:

CopyXAML
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar">
    <telerik:RadRibbonBar.ContextualGroupContainer>
        <telerik:RadRibbonContextualGroupContainer>
            <telerik:RadRibbonContextualGroup x:Name="ContextualGroup1"
                                                        Header="Group 1"
                                                        IsActive="False"
                                                        Color="Coral">
                <telerik:RadRibbonTab Header="Tab 1.1">
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Tab 1.2">
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Tab 1.3">
                </telerik:RadRibbonTab>
            </telerik:RadRibbonContextualGroup>
            <telerik:RadRibbonContextualGroup x:Name="ContextualGroup2"
                                                        Header="Group 2"
                                                        IsActive="False"
                                                        Color="Orchid">
                <telerik:RadRibbonTab Header="Tab 2.1">
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Tab 2.2">
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Tab 2.3">
                </telerik:RadRibbonTab>
            </telerik:RadRibbonContextualGroup>
        </telerik:RadRibbonContextualGroupContainer>
    </telerik:RadRibbonBar.ContextualGroupContainer>
    <telerik:RadRibbonTab Header="Home"></telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="View"></telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Insert"></telerik:RadRibbonTab>
</telerik:RadRibbonBar>

The RadRibbonContextualGroup exposes a Color property, which allows you to specify a color for the group. This color will not only be applied to the group's header, but to the header's of the tabs in this group.

To make the RadRibbonContextualGroup visible you have to set its IsActive property to True. This should be done when a certain requirement is met by the user. This requirement should specify whether the specific functionality in the contextual tab is needed. For example if you have a contextual tab that should manipulate images, you'd want to show this tab only when the user has selected an image.

Here is a simple example of two buttons alongside the RadRibbonBar defined above, which toggle the respective contextual group.

CopyXAML
<StackPanel Orientation="Horizontal">
    <Button x:Name="Group1Button"
            Content="Activate Group 1"
            Click="Group1Button_Click"
            Margin="0,0,10,0" />
    <Button x:Name="Group2Button"
            Content="Activate Group 2"
            Click="Group2Button_Click" />
</StackPanel>
CopyC#
private void Group1Button_Click( object sender, RoutedEventArgs e )
{
    if ( !this.ContextualGroup1.IsActive )
        this.ContextualGroup1.IsActive = true;
    if ( this.ContextualGroup2.IsActive )
        this.ContextualGroup2.IsActive = false;
}
private void Group2Button_Click( object sender, RoutedEventArgs e )
{
    if ( !this.ContextualGroup2.IsActive )
        this.ContextualGroup2.IsActive = true;
    if ( this.ContextualGroup1.IsActive )
        this.ContextualGroup1.IsActive = false;
}
CopyVB.NET
Private Sub Group1Button_Click(sender As Object, e As RoutedEventArgs)
 If Not Me.ContextualGroup1.IsActive Then
  Me.ContextualGroup1.IsActive = True
 End If
 If Me.ContextualGroup2.IsActive Then
  Me.ContextualGroup2.IsActive = False
 End If
End Sub
Private Sub Group2Button_Click(sender As Object, e As RoutedEventArgs)
 If Not Me.ContextualGroup2.IsActive Then
  Me.ContextualGroup2.IsActive = True
 End If
 If Me.ContextualGroup1.IsActive Then
  Me.ContextualGroup1.IsActive = False
 End If
End Sub

See Also

Other Resources