バージョン

ツールチップの構成

トピックの概要

目的

このトピックは、コード例を示して、 XamSparkline™ コントロールでツールチップを構成し、カスタマイズする方法を説明します。

前提条件

以下の表に、このトピックを理解するための前提条件として求められるトピックをリストします。

タイプ コンテンツ

概念

  • データ テンプレート

トピック

トピック 目的

このトピックは、 XamSparkline コントロールの概要、その利点、およびサポートされるチャート タイプを提供します。

このトピックは、 XamSparkline コントロールを構成するあらゆる方法の概要について説明します。構成の詳細情報へのリンク (別のトピックで参照可能) も記載されています。

このトピックは、コード例を示して、 XamSparkline コントロールでツールチップを追加する方法を説明します。

概要

概要

カスタマイズの前にツールチップを有効にする必要があり、ToolTipVisibility プロパティを true に設定して表示することができます。

ツールチップをカスタマイズする方法には 2 通りあり、どの ToolTip プロパティを表示するために設定するかによって異なります。

  • String - ToolTip プロパティを以下のような文字列に設定:

ToolTip="Testing the Tooltip"

  • Data Template - ToolTip プロパティが DataTemplate に設定される場合、その DataTemplate の DataContext オブジェクトは、 SparklineTooltipContext に設定され、これは DataTemplate でカスタマイズできる 4 つのプロパティを公開します。これらのプロパティは、 FirstLastHigh、および Low です。

ほとんどの場合、Data Template を使用してカスタマイズすることをお勧めします。文字列は Data Template ほど便利ではありません。Data Template は、単にヒントを文字列に設定する場合よりも、ヒントの外観を実装する場合の柔軟性が高いためです。たとえば、以下を行うことができます。

ヒント構成点

ヒント構成点の概要

以下の表は、ヒントの構成可能な点を示しています。

構成可能な点 詳細 プロパティ

ヒントの内容

カスタム テキストを表示するようヒントを設定したり、DataTemplate を使用している場合は、データ ポイントをテキストとともに表示したりするなど、さらに内容をカスタマイズすることができます。

どのデータ ポイントを表示するか

構成可能なデータ ポイントは、First、Last、High、および Low の各値です。

DataTemplate 要素

詳細は、DataTemplate (MSDN) の記事を参照してください。

DataTemplate で使用でき、TextBlockText プロパティなどのバインディングをサポートする要素

コード例: Data Template を使用したヒントの構成

概要

以下のコードでは、データ テンプレートは、 SparklineToolTipContext オブジェクト ( FirstLastHigh および Low) のすべての使用可能なプロパティを使用して、以下のようなカスタマイズされた外観を達成できます。

  • フォント サイズ - 10

  • データ ポイントごとに異なる色:

  • 最初および最後のデータ ポイント - 赤

  • 最高および最低のデータ ポイント - 青

プロパティ設定

以下の表では、Sparkline Tooltip をプロパティ設定にマップします。

使用するプロパティ: 次に設定

Visible

DataTemplate

プレビュー

Sparkline Visual Elements 7.png

コード

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>

関連コンテンツ

トピック

以下のトピックでは、このトピックに関連する情報を提供しています。

トピック 目的

このトピックは、 XamSparkline コントロールの概要、その利点、およびサポートされるチャート タイプを提供します。

このトピックは、 XamSparkline コントロールを構成するあらゆる方法の概要について説明します。構成の詳細情報へのリンク (別のトピックで参照可能) も記載されています。

このトピックは、コード例を示して、 XamSparkline コントロールでツールチップを追加する方法を説明します。

このトピックは、 XamSparkline コントロールの主なプロパティを説明します。