.NET 4.0+

WPF Base Classes - FrameworkElement - Tool Tips

by Richard Carr, published at http://www.blackwasp.co.uk/FrameworkElementToolTips.aspx

The twenty-seventh part of the Windows Presentation Foundation Fundamentals tutorial continues to describe the FrameworkElement type. This instalment describes some of the properties that control the display of tool tips.

FrameworkElement

Over the past few articles in the Windows Presentation Foundation (WPF) tutorial we've examined various aspects of the FrameworkElement class. FrameworkElement is a base class that is inherited by all WPF controls, including the all of the layout controls that have been described in earlier articles. The class provides a great deal of functionality to controls, including members that control styling, data binding and object lifetime events.

Tool Tips

FrameworkElement provides a property that allows you to add tool tips to controls. A tool tip is a user interface element that appears when the user hovers the mouse pointer over a control. Tips can help new users to learn your software without resorting to reading help files and without adding clutter to windows. Usually tool tips are small rectangles containing a description of the control to which they are linked.

In this article we'll create add tool tips to some controls. We'll also look at some additional options for tool tips that are controlled through a separate class, named "ToolTipService". For the demonstrations we'll need a sample project. Create a new WPF Application project in Visual Studio, naming the solution, "FrameworkElementToolTipDemo". Replace the XAML of the main window with that shown below.

<Window x:Class="FrameworkElementToolTipDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="FrameworkElement Demo"
        Height="200"
        Width="250">
    <StackPanel Margin="10">
        <Label Content="User" />
        <TextBox/>
        <Label Content="Password"/>
        <PasswordBox/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Height="60">
            <Button Content="OK" Width="85" VerticalAlignment="Center" Margin="0 0 10 0" />
            <Button Content="Cancel" Width="85" VerticalAlignment="Center"/>
        </StackPanel>
    </StackPanel>
</Window>

The resultant window might be used to request somebody's name and password before accessing a system. We'll add tool tips to the OK and Cancel buttons to tell the user what will happen should they click the buttons.

Adding Tool Tips

You can add a simple text-based tool tip to any control using its ToolTip property. The ToolTip value in the XAML must be set to a string. To add a tool tip to each of the buttons, replace the XAML for the buttons with that shown below:

<Button Content="OK"
        Width="85"
        VerticalAlignment="Center"
        Margin="0 0 10 0"
        ToolTip="Login with the entered credentials"/>
<Button Content="Cancel"
        Width="85"
        VerticalAlignment="Center"
        ToolTip="Cancel the login and exit"/>

Run the program and move the mouse pointer over the buttons to show the tool tips. You'll notice a short pause before the tips appear. The image below shows the tool tip for the OK button.