バージョン

ツールチップの構成 (XamLinearGauge)

トピックの概要

目的

このトピックではコード例を使用して、XamLinearGauge コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックでは、主要機能、最小要件、ユーザー機能など、 XamLinearGauge コントロールに関する概念的な情報を提供します。

このトピックでは、XamLinearGauge コントロールを WPF アプリケーションに追加する方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

ツールチップ構成の概要

XamLinearGauge コントロールはツールチップをサポートします。ツールチップは、針や比較範囲で示される値を表示するように、あらかじめ設定されています。各視覚要素に対応するツールチップは、プロパティ設定で個別に設定されています。

ツールチップの可視性 (有効 / 無効)、遅延 (ツールチップが表示されるまでのタイムアウト値が設定可能です)、値について、それぞれ設定できます。ツールチップの値はテンプレート、文字列、UI 要素に設定できるため、具体的なユース ケースをより詳細に示すことができます。

デフォルトでは、ツールチップは無効になっています。

ツールチップ構成の概要表

以下の表は、ツールチップに関する XamLinearGauge コントロールで構成できる項目と管理に使用するプロパティをマップしています。

構成可能な項目 詳細 プロパティ/イベント デフォルト値

XamLinearGauge コントロールのツールチップを有効または無効にできます。

False

視覚要素にマウスを合わせたときにツールチップが表示されるまでのタイムアウトを、ミリ秒数単位で設定します。

500

値

ツールチップのプロパティでカスタムに値を設定できます。値は次のとおりです:

  • テンプレート

  • 文字列

  • UI 要素

針で示された値

ハイフン (-) で区切られた範囲の開始値と終了値です。
Note
注:

デフォルトのツールチップを変更してそれぞれの視覚要素に異なる値をバインドするには、{Item.Property} 構文、または {Item} 構文を使用する必要があります。

ツールチップの有効 / 無効

概要

XamLinearGauge のツールチップを、表示または非表示 (デフォルト設定) にします。

プロパティ設定

以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。

目的: 使用するプロパティ: 設定の選択肢:

ツールチップの表示

True

ツールチップの非表示

False

コード例

以下のコード例はツールチップを表示します:

XAML の場合:

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

ツールチップ遅延の構成

概要

視覚要素がホバーされてからマウスツールチップが表示されるまでの遅延を設定できます。デフォルト値は 500 ミリ秒です。

プロパティ設定

以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。

目的: 使用するプロパティ: 設定の選択肢:

ツールチップが表示される前の初期遅延の設定

任意の値 (ミリ秒)

コード例

以下のコード例では、ツールチップの遅延として 2000 ミリ秒を設定します:

XAML の場合:

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

カスタム ツールチップの針の構成

概要

針のツールチップは、値についてはデフォルトのシステム フォントを使用し、またコントロールの外観についてはデフォルトのスタイル設定で表示されます。カスタム設定の場合、ツールチップの値を文字列、UI 要素またはデータ テンプレートで設定します。

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。

目的: 使用するプロパティ: 設定の選択肢:

比較マーカーのカスタム ツールチップの構成

任意の文字列、UI 要素、またはデータ テンプレート

例

以下のコードでは、以下の設定の結果、ツールチップによって提供された針の値が角括弧に囲われて表示されます。

プロパティ 値

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

以下のコードはこの例を実装します。

XAML の場合:

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

比較範囲のカスタム ツールチップの構成

概要

比較範囲のツールチップはデフォルトで、マウスでホバーしている範囲が厳密には範囲内ではない場合でも、区切り文字にハイフンを使用して範囲の開始値と終了値 (例：0 - 34) を表示します。事前に設定されている内容を変更するには、ツールチップ用のカスタム書式の設定や UI 要素の割り当て、またはデータ テンプレートを適用します。

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。

目的: 使用するプロパティ: 設定の選択肢:

比較範囲のカスタム ツールチップの構成

任意の文字列、UI 要素、またはデータ テンプレート

例

以下のスクリーンショットは、以下の設定の結果、ツールチップによって提供された比較範囲の値が角括弧で表示されている状態を示しています。

プロパティ 値

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

以下のコードはこの例を実装します。

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="]"/>
                    </TextBlock>
                    <TextBlock>
                        <Run Text=" - "/>
                    </TextBlock>
                    <TextBlock>
                        <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>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このトピックでは、コード例を使用して、XamLinearGauge コントロールのタイトルおよびサブタイトルを構成する方法を説明します。説明には、タイトル領域の幅、テキストの開始位置、およびタイトル / サブタイトルのテキストが含まれます。

このトピックではコード例を使用して、 XamLinearGauge コントロールのスケールを構成する方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。

このトピックではコード例を使用して、 XamLinearGauge コントロールの針を構成する方法を説明します。説明には、針の値、幅、および書式設定が含まれます。

このトピックではコード例を使用して、 XamLinearGauge コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。

このトピックではコード例を使用して、リニア ゲージの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。