RadControls for Silverlight
Contents

RadRibbonBar implements keyboard navigation through Key Tips. You can start using it out-of the box as soon as you set the KeyTipSerive.IsKeyTipsEnabled attached property to True.

CopyXAML
<telerik:RadRibbonBar ApplicationName="RibbonBarApplication" telerik:KeyTipService.IsKeyTipsEnabled="True">...</telerik:RadRibbonBar>

You can attach a key tip text to every component in the RadRibbonBar using the KeyTipSerive.AccessText attached property:

CopyXAML
<telerik:RadRibbonBar.ApplicationMenu>
    <telerik:ApplicationMenu telerik:KeyTipService.AccessText="M">...</telerik:ApplicationMenu>
</telerik:RadRibbonBar.ApplicationMenu>

KeyTipService class properties

The KeyTipsService class allows you to enable/disable key tips for the RadRibbonBar control. It exposes the following properties that allow you to customize the key tips:

  • AccessText - gets/sets the key tip activation text
  • AltAccessText - gets/sets alternative key tip activation text
  • AccessKey - gets/sets the combination of keys to be used for displaying the key tips. By default the key tips are displayed by pressing CTRL+Q This property should be defined in the RadRibbonBar definition:
CopyXAML
<telerik:RadRibbonBar telerik:KeyTipService.AccessKey="Ctrl+Alt+Z" telerik:KeyTipService.IsKeyTipsEnabled="True">...</telerik:RadRibbonBar>
Caution
When setting the AccessKey property, you should keep in mind that some key combinations might interfere with the browser's specific key combinations, so you need to carefully choose the combination of keys that should display the key tips in the RibbonBar.
  • Activation - you can use the KeyTipsService.Activation property to define additional logic that can be implemented when using a key tip:
CopyXAML
<telerik:RadRibbonTab Header="Home" telerik:KeyTipService.AccessText="H">
    <telerik:RadRibbonGroup Header="Group 1.1" telerik:KeyTipService.AccessText="A">
        <telerik:RadRibbonButton x:Name="HomeButton1" 
                                 Click="HomeButton1_Click"
                                 telerik:KeyTipService.AccessText="Z"
                                 Text="HomeButton 1">
            <telerik:KeyTipService.Activation>
                <telerik:KeyTipActivation Activated="KeyTipActivation_Activated" />
            </telerik:KeyTipService.Activation>
        </telerik:RadRibbonButton>
        ...
    </telerik:RadRibbonGroup>
    ...
</telerik:RadRibbonTab>
CopyC#
private void KeyTipActivation_Activated(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
   MessageBox.Show("The key tip of the "+(e.OriginalSource as RadRibbonButton).Text.ToString() + "was activated.");
}
private void HomeButton1_Click(object sender, RoutedEventArgs e)
{
 MessageBox.Show((sender as RadRibbonButton).Text.ToString() + "was clicked.");
}
CopyVB.NET
Private Sub KeyTipActivation_Activated(sender As Object, e As Telerik.Windows.RadRoutedEventArgs)
    MessageBox.Show("The key tip of the " & TryCast(e.OriginalSource, RadRibbonButton).Text.ToString() & "was activated.")
End Sub

Private Sub HomeButton1_Click(sender As Object, e As RoutedEventArgs)
    MessageBox.Show(TryCast(sender, RadRibbonButton).Text.ToString() & "was clicked.")
End Sub

In the above example the KeyTipActivation.Activated() event handler will fire as soon as the HomeButton1 key tip is activated. This means that you can implement custom logic that will be executed before the button's Click() event is fired.

Activating key tips

CopyXAML
<telerik:RadRibbonBar telerik:KeyTipService.IsKeyTipsEnabled="True">
    <telerik:RadRibbonBar.ApplicationMenu>
        <telerik:ApplicationMenu telerik:KeyTipService.AccessText="M">...</telerik:ApplicationMenu>
    </telerik:RadRibbonBar.ApplicationMenu>
    <telerik:RadRibbonBar.QuickAccessToolBar>
        <telerik:QuickAccessToolBar>
            <telerik:RadRibbonButton Foreground="White" 
                                     telerik:KeyTipService.AccessText="S"
                                     Text="Save" />
            <telerik:RadRibbonButton Foreground="White" 
                                     telerik:KeyTipService.AccessText="U"
                                     Text="Undo" />
            <telerik:RadRibbonButton Foreground="White" 
                                     telerik:KeyTipService.AccessText="P"
                                     Text="Print" />
        </telerik:QuickAccessToolBar>
    </telerik:RadRibbonBar.QuickAccessToolBar>
    <telerik:RadRibbonTab Header="Home" telerik:KeyTipService.AccessText="H">
        <telerik:RadRibbonGroup Header="Group 1.1" telerik:KeyTipService.AccessText="A">
            <telerik:RadRibbonButton telerik:KeyTipService.AccessText="Z" Text="HomeButton 1" />
            <telerik:RadRibbonButton telerik:KeyTipService.AccessText="X" Text="HomeButton 2" />
            <telerik:RadRibbonButton telerik:KeyTipService.AccessText="C" Text="HomeButton 3" />
        </telerik:RadRibbonGroup>
        <telerik:RadRibbonGroup Header="Group 1.2" telerik:KeyTipService.AccessText="S">
            <telerik:RadRibbonButton telerik:KeyTipService.AccessText="W" Text="HomeButton 4" />
            <telerik:RadRibbonButton telerik:KeyTipService.AccessText="E" Text="HomeButton 5" />
            <telerik:RadRibbonButton telerik:KeyTipService.AccessText="R" Text="HomeButton 6" />
        </telerik:RadRibbonGroup>
        <telerik:RadRibbonGroup Header="Group 1.3" telerik:KeyTipService.AccessText="D">
            <telerik:RadRibbonButton telerik:KeyTipService.AccessText="G" Text="HomeButton 7" />
            <telerik:RadRibbonButton telerik:KeyTipService.AccessText="B" Text="HomeButton 8" />
            <telerik:RadRibbonButton telerik:KeyTipService.AccessText="N" Text="HomeButton 9" />
        </telerik:RadRibbonGroup>
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="Options" telerik:KeyTipService.AccessText="O">...</telerik:RadRibbonTab>
</telerik:RadRibbonBar>

When a control's key tip is activated, the action associated with the control will be executed:

  • Using a key tip of a RibbonTab will select the tab
  • Using a key tip of a RibbonSplitButton/RibbonDropDownButton will open the DropDown content of the button
  • Using a key tip of a RibbonGallery control will open the gallery
  • Using a key tip on a RibbonButton/RibbonRadioButton/RibbonToggleButton will execute the button's command or Click() event
  • Using a key tip on a collapsed RibbonGroup will expand the group
  • Using a key tip on a RibbonComboBox will open the ComboBox'sDropDown content
Note

You can navigate back thought the layers of the key tips using Esc key.

Styles and Templates

The key tips are themeable and any built-in Telerik theme can be applied to them. However, if you need to further customize their appearance, you can edit the KeyTipControl ControlTemplate:

CopyXAML
<SolidColorBrush x:Key="RibbonBarKeyTips_OuterBorderBrush" Color="#FF848484" />
<SolidColorBrush x:Key="RibbonBarKeyTips_Background" Color="#FFD9D9D9" />
<SolidColorBrush x:Key="RibbonBarKeyTips_InnerBorderBrush" Color="#FFFFFFFF" />
<Style TargetType="Telerik_Windows_Controls_RibbonBar_KeyTips:KeyTipControl">
    <Setter Property="MinWidth" Value="16" />
    <Setter Property="MinHeight" Value="16" />
    <Setter Property="IsHitTestVisible" Value="False" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="{StaticResource RibbonBarKeyTips_OuterBorderBrush}" />
    <Setter Property="Background" Value="{StaticResource RibbonBarKeyTips_Background}" />
    <Setter Property="Padding" Value="2 -2 2 -1" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Telerik_Windows_Controls_RibbonBar_KeyTips:KeyTipControl">
                <Border Background="{TemplateBinding Background}" 
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="1">
                    <Border BorderBrush="{StaticResource RibbonBarKeyTips_InnerBorderBrush}" BorderThickness="1">
                        <ContentPresenter Margin="{TemplateBinding Padding}" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Note

The Telerik_Windows_Controls_RibbonBar_KeyTips namespace definition is:

CopyXAML
xmlns:Telerik_Windows_Controls_RibbonBar_KeyTips="clr-namespace:Telerik.Windows.Controls.RibbonBar.KeyTips;assembly=Telerik.Windows.Controls.RibbonBar"

See Also