Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Configuring the Tooltip

Purpose

This topic explains, with code examples, how to configure and customize a tooltip in a XamSparkline™.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Type Content

Concepts

  • Data templates
Topic Purpose

This topic provides an overview of the XamSparkline control, its benefits and the supported chart types.

This topic provides an overview of the possible ways to configure the XamSparkline control. Links to the detailed configurations (available in separate topics) are provided as well.

This topic explains, with code examples, how to add a tooltip in XamSparkline control.

In this topic

This topic contains the following sections:

Introduction

Introduction

Before any customization, the tooltip needs to be enabled, making it visible by setting the ToolTipVisibility property to true .

There are two ways to customize the tooltip, depending on what the ToolTip property is set to display:

  • String – By setting the ToolTip property to a string such as:

ToolTip="Testing the Tooltip"

  • Data Template – when the ToolTip property is set to a DataTemplate, the DataContext object of that DataTemplate is set to a SparklineTooltipContext, which exposes four properties that can be customized in the DataTemplate, those properties are First, Last, High, and Low.

In most cases, it is recommended to use a Data Template for the customization. Using a string is not as useful as the Data Template, because the Data Template provides more flexibility to implement the appearance of the tooltip than simply setting the Tooltip to a string. For example, you can

Tooltip Configuration Aspects

Tooltip configuration aspects summary

The following table lists the configurable aspects of the tooltip.

Configurable aspects Details Properties

Tooltip content

You can set the tooltip to display a custom text, or if, DataTemplate is used, further customizations of the content are possible, like displaying the data points together with some text.

Which data points to display

The configurable data points are the First, Last, High and Low values.

DataTemplate elements

Refer to DataTemplate (MSDN) article for details.

Any element that can be used in DataTemplate and supports binding e.g. the Text property of TextBlock.

Code Example: Configuring the Tooltip Using a Data Template

Overview

In the following code, a data template uses all available properties in the SparklineToolTipContext object ( First, Last, High and Low) to achieve the following customized look:

  • Font size – 10

  • Different color for the different data points:

  • The first and last data point – red

  • The highest and lowest data point – blue

Property settings

The following table maps the Sparkline Tooltip to property settings.

Use this property: And set it to:

Visible

DataTemplate

Preview

Sparkline Visual Elements 7.png

Code

In XAML:

<ig:XamSparkline ToolTipVisibility="Visible" />
<ig:XamSparkline.ToolTip>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="First: " Foreground="Red"/>
            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding First}" Foreground="Red" />
            <TextBlock Grid.Row="1" Grid.Column="0" Text="Last: " Foreground="Red"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Last}" Foreground="Red"/>
            <TextBlock Grid.Row="2" Grid.Column="0" Text="High: " Foreground="Blue"/>
            <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding High}" Foreground="Blue"/>
            <TextBlock Grid.Row="3" Grid.Column="0"
Text="Low: " Foreground="Blue"/>
            <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Low}" Foreground="Blue"/>
         </Grid>
     </DataTemplate>
</ig:XamSparkline.ToolTip>

Related Content

The following topics provide additional information related to this topic.

Topic Purpose

This topic provides an overview of the XamSparkline control, its benefits, and the supported chart types.

This topic provides an overview of the possible ways to configure the XamSparkline control. Links to the detailed configurations (available in separate topics) are provided as well.

This topic explains, with code examples, how to add a tooltip in XamSparkline control.

This topic explains the featured properties of the XamSparkline control.