Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Configuring the Tooltips (XamLinearGauge)

Purpose

This topic explains, with code examples, how to enable the tooltips in the XamLinearGauge™ control and configure the delay with which they are displayed.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic provides conceptual information about the XamLinearGauge control including its main features, minimum requirements, and user functionality.

This topic explains how to add the XamLinearGauge control to a WPF application.

In this topic

This topic contains the following sections:

Introduction

Tooltips configuration summary

The XamLinearGauge control supports tooltips. They are pre-configured to show the values indicated by the needle, and comparative ranges. The tooltip for each of these visual elements is configured individually by a property setting.

Tooltips are configurable in terms of visibility (can be enabled/disabled), delay (the timeout with which the tooltip appears is configurable), and value. Because the value of the tooltips can be set to a template, string, or a UI element, you have a wide array of possibilities to present the information relevant for the specific use case in the most appropriate manner.

By default, tooltips are disabled.

Tooltips configuration summary chart

The following table maps the configurable aspects of the XamLinearGauge control related to tooltips to the properties that manage them.

Configurable aspect Details Properties / Events Default value

Visibility

You can enable/disable tooltips for the XamLinearGauge control.

False

Delay

The timeout before the tooltip appears upon the visual element at mouse hovering is configurable in milliseconds.

500

Value

You can provide a custom value for the respective tooltip property. The value can be:

  • Template

  • String

  • UI element

The value indicated by the needle

The start and end values of the range separated by a hyphen.
Note
Note:

In order to bind to different values of the respective visual element when you change the default tooltip, you must use the {Item.Property} or {Item} syntax.

Enabling/Disabling Tooltips

Overview

You can show or hide (default setting) the tooltips on a XamLinearGauge .

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this property: And set it to:

Enable tooltips

True

Disable tooltips

False

Code Example

The following code example enables the tooltips:

In XAML:

 <ig:XamLinearGauge x:Name="linearGauge"
                           ...
                           ShowToolTip="True"
                           />

Configuring the Tooltip Delay

Overview

It is possible to specify a delay by which a tooltip is displayed after the respective visual element has been hovered. The default value is 500 milliseconds.

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this property: And set it to:

Configure the initial delay before the tooltip is displayed

The desired value in milliseconds

Code Example

The following code example sets the tooltip delay to 2000 milliseconds:

In XAML:

 <ig:XamLinearGauge x:Name="linearGauge"
                           ...
                           ShowToolTip="True"
                           ShowToolTipTimeout="2000"
                           />

Configuring a Custom Tooltip for the Needle

Overview

The tooltip for the needle displays the value set for the needle using the default system font and styled by default in accordance with the look of the control. To specify custom settings, set the tooltip value to a string, UI element, or data template.

Property settings

The following table maps the desired behavior to its respective property settings.

In order to: Use this property: And set it to:

Set a custom tooltip for the comparative marker

The desired string, UIElement, or DataTemplate.

Example

The code below illustrates displaying the value presented in the tooltip of the needle in square brackets as a result of the following settings:

Property Value

"[{Item}]"
XamLinearGauge Configuring the Tooltips 1.png

Following is the code that implements this example.

In XAML:

 <ig:XamLinearGauge x:Name="linearGauge"
                           Height="70"
                           Width="300"
                           ShowToolTip="True"
                           Value="76"
                           NeedleToolTip="[{Item}]"/>

Configuring a Custom Tooltip for the Comparative Ranges

Overview

By default, the tooltips for the comparative ranges display the starting and ending values of the range, separated by a hyphen (i.e. 0 - 34), no matter where exactly over the range the mouse is being hovered. To change these pre-configured settings, you can set a custom format for the tooltip, assign a UI element to it or apply a data template.

Property settings

The following table maps the desired behavior to its respective property settings.

In order to: Use this property: And set it to:

Set a custom tooltip for the comparative range(s)

The desired string, UIElement, or DataTemplate.

Example

The screenshot below demonstrates displaying the value presented in the tooltip of the comparative range in square brackets as a result of the following settings:

Property Value

In XAML:

<StackPanel Orientation="Horizontal" Background="White">
    <TextBlock>
        <Run Text="["/>
        <Run Text="{Binding Item.StartValue}"/>
        <Run Text="]"/>
        <Run Text=" - "/>
        <Run Text="["/>
        <Run Text="{Binding Item.EndValue}"/>
        <Run Text="]"/>
    </TextBlock>
</StackPanel>
XamLinearGauge Configuring the Tooltips 2.png

Following is the code that implements this example.

In XAML:

 <ig:XamLinearGauge x:Name="linearGauge"
                           Height="70"
                           Width="300"
                           ShowToolTip="True">
            <ig:XamLinearGauge.RangeToolTip>
                <StackPanel Orientation="Horizontal" Background="White">
                    <TextBlock>
                        <Run Text="["/>
                        <Run Text="{Binding Item.StartValue}"/>
                        <Run Text="]"/>
                        <Run Text=" - "/>
                        <Run Text="["/>
                        <Run Text="{Binding Item.EndValue}"/>
                        <Run Text="]"/>
                    </TextBlock>
                </StackPanel>
            </ig:XamLinearGauge.RangeToolTip>
            <ig:XamLinearGauge.Ranges>
                <ig:XamLinearGraphRange Brush="Cyan"
                                        EndValue="89"
                                        Outline="Blue"
                                        StartValue="0"/>
            </ig:XamLinearGauge.Ranges>
        </ig:XamLinearGauge>

Related Content

The following topics provide additional information related to this topic.

Topic Purpose

This topic explains, with code examples, how to configure the title and subtitle of the XamLinearGauge control. This includes the title area width the start position of the text and the title/subtitle text itself.

This topic explains, with examples, how to configure the scale of the XamLinearGauge control. This includes positioning the scale inside the control and configuring the scale tick marks and labels.

This topic explains, with code examples, how to configure the needle of the XamLinearGauge control. This includes the needle’s value, width, and formatting.

This topic explains, with code examples, how to configure ranges in the XamLinearGauge control. This includes the number of ranges and their positions, lengths, widths, and formatting.

This topic explains, with code examples, how to configure a background for the linear gauge. This includes setting the background’s size, position, color, and border.