Screen Tips

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 are the Screen Tips. This topic discusses concepts fundamental to the Screen Tips at first and then goes into the usage of the ScreenTip class and its features.

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

Screen Tips - Fundamentals

Screen Tip is a UI feature in which a small window appears when the mouse cursor is hovered over an icon or a ribbon element (command). The popup window will provide details that explain the command's function. In some instances, though, the Screen Tip will display only the item's name. When the mouse is moved away from the ribbon element, the Screen Tip will disappear from view.

RadRibbonView fully supports the Microsoft Office guidelines for screen tip implementation. You can set a screen tip to any element (command) in the RadRibbonView.

The class that represents the screen tip is Telerik.Windows.Controls.ScreenTip.

The ScreenTip is a ToolTip (it derives from ToolTip), which consists of three parts:

• Title - specifies the title of the screen tip.

• Description - specifies the description of the screen tip.

• Icon - specifies the image of the screen tip.

Adding Screen Tip

This section shows how to attach a screen tip to a RadRibbon element.

You can attach Screen Tip to each one of the RadRibbon elements.

The following subsections are included:

When you want to set a screen tip, you need to use the ScreenTip attached property.

Setting Title

The first element you may want to specify is the title of the screen tip. In this case you need to use the ScreenTip's Title property. The next example demonstrates how to set a screen tip to a Ribbon Group.

<telerik:RadRibbonView x:Name="radRibbonView"> 
    <telerik:RadRibbonTab Header="Home"> 
        <telerik:RadRibbonGroup x:Name="radRibbonGroupClipboard"  
                                DialogLauncherVisibility="Visible" 
                                Header="Clipboard" 
                                telerik:ScreenTip.Title="Clipboard" /> 
    </telerik:RadRibbonTab> 
</telerik:RadRibbonView> 

The same operation can be done in the code-behind, too. You need to invoke the ScreenTip's SetTitle() static method.

ScreenTip.SetTitle(radRibbonGroupClipboard, "Clipboard"); 

ScreenTip.SetTitle(radRibbonGroupClipboard, "Clipboard") 

You can see a screen tip with only Title property set like it is on the next snapshot.

Setting Description

When you want to set the description of the screen tip, you need to use the ScreenTip's Description property. The next example demonstrates how to do that.

<telerik:RadRibbonView x:Name="radRibbonView"> 
    <telerik:RadRibbonTab Header="Home"> 
        <telerik:RadRibbonGroup x:Name="radRibbonGroupClipboard"  
                                DialogLauncherVisibility="Visible" 
                                Header="Clipboard" 
                                telerik:ScreenTip.Description="Show the Clipboard Task options." 
                                telerik:ScreenTip.Title="Clipboard" /> 
    </telerik:RadRibbonTab> 
</telerik:RadRibbonView> 

The same operation can be done in the code-behind, too. You need to invoke the ScreenTip's SetDescription() static method.

ScreenTip.SetTitle(radRibbonGroupClipboard, "Clipboard"); 
ScreenTip.SetDescription(radRibbonGroupClipboard, "Show the Clipboard Task options."); 

ScreenTip.SetTitle(radRibbonGroupClipboard, "Clipboard") 
ScreenTip.SetDescription(radRibbonGroupClipboard, "Show the Clipboard Task options.") 

You can see a screen tip with Title and Description properties set like on the next snapshot.

Setting Icon

The last but not least element of the screen tip is its image (icon). It is set through the ScreenTip's Icon property.

<telerik:RadRibbonView x:Name="radRibbonView"> 
    <telerik:RadRibbonTab Header="Home"> 
        <telerik:RadRibbonGroup x:Name="radRibbonGroupClipboard"  
                                DialogLauncherVisibility="Visible" 
                                Header="Clipboard" 
                                telerik:ScreenTip.Description="Show the Clipboard Task options." 
                                telerik:ScreenTip.Icon="Images/IconMSOffice/ClipboardScreenTipIcon.png" 
                                telerik:ScreenTip.Title="Clipboard" /> 
    </telerik:RadRibbonTab> 
</telerik:RadRibbonView> 

The same operation can be done in the code-behind, too. You need to invoke the ScreenTip's SetIcon() static method. See the next code-snippets.

ScreenTip.SetTitle(radRibbonGroupClipboard, "Clipboard"); 
ScreenTip.SetDescription(radRibbonGroupClipboard, "Show the Clipboard Task options."); 
ScreenTip.SetIcon(radRibbonGroupClipboard, new BitmapImage(new Uri("Images/IconMSOffice/ClipboardScreenTipIcon.png",UriKind.Relative))); 

ScreenTip.SetTitle(radRibbonGroupClipboard, "Clipboard") 
ScreenTip.SetDescription(radRibbonGroupClipboard, "Show the Clipboard Task options.") 
ScreenTip.SetIcon(radRibbonGroupClipboard, New BitmapImage(New Uri("Images/IconMSOffice/ClipboardScreenTipIcon.png", UriKind.Relative))) 

The result is shown on the next snapshot.

The RadRibbonView is a complex control and the screen tips are only a small part of it. The RadRibbonView consists of various elements such as:

• Application Menu
• Backstage Menu
• Quick Access ToolBar
• Ribbon Tab
• Ribbon Gallery
• Ribbon Group
• RibbonButtons Overview
• Ribbon ComboBox

Additional features that you may find interesting are:

• Selection
• Resizing
• Minimization
• Localization