RadControls for WPF
Contents

Telerik RadRibbonBar provides a simple and consistent way for building interfaces similar to the RibbonBar used in Microsoft Office. The RadRibbonBar 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.

Tip
Before proceeding with this tutorial, it is recommended to get familiar with the Visual Structure of the RadRibbonBar 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.

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

Note

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.

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

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 RibbonGroup.

CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar">
    <telerik:RadRibbonTab Header="Home">
        <telerik:RadRibbonGroup DialogLauncherVisibility="Visible" 
                                Header="Clipboard"
                                telerik:ScreenTip.Title="Clipboard" />
    </telerik:RadRibbonTab>
</telerik:RadRibbonBar>

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

CopyC#
ScreenTip.SetTitle( radRibbonGroupClipboard, "Clipboard" );
CopyVB.NET
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.

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

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

CopyC#
ScreenTip.SetTitle( radRibbonGroupClipboard, "Clipboard" );
ScreenTip.SetDescription( radRibbonGroupClipboard, "Show the Clipboard Task options." );
CopyVB.NET
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.

CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar">
    <telerik:RadRibbonTab Header="Home">
        <telerik:RadRibbonGroup DialogLauncherVisibility="Visible" 
                                Header="Clipboard"
                                telerik:ScreenTip.Description="Show the Clipboard Task options."
                                telerik:ScreenTip.Icon="/RadRibbonBarSample;component/Images/IconMSOffice/ClipboardScreenTipIcon.png"
                                telerik:ScreenTip.Title="Clipboard" />
    </telerik:RadRibbonTab>
</telerik:RadRibbonBar>

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.

CopyC#
ScreenTip.SetTitle( radRibbonGroupClipboard, "Clipboard" );
ScreenTip.SetDescription( radRibbonGroupClipboard, "Show the Clipboard Task options." );
ScreenTip.SetIcon( radRibbonGroupClipboard, new BitmapImage( new Uri( ImagePath ) ) );
CopyVB.NET
ScreenTip.SetTitle(radRibbonGroupClipboard, "Clipboard")
ScreenTip.SetDescription(radRibbonGroupClipboard, "Show the Clipboard Task options.")
ScreenTip.SetIcon(radRibbonGroupClipboard, New BitmapImage(New Uri(ImagePath)))

The result is shown on the next snapshot.

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

Additional features that you may find interesting are:

See Also