組み合わせの達人

組み合わせの達人－データ処理機能とUIの強化

第6回 ComponentOne Studioを利用して簡単な売上管理アプリケーションを作成する

2009/04/21 14:00

ポスト

見やすいツールチップでデータ内容を表示する

　次は、FlexGrid上のマウスフォーカス位置にあるデータの説明を表示する機能を追加してみましょう。データを表示するにはツールチップを用いるのですが、標準のToolTipコンポーネントでは、単一のプレーンテキストしか表示することができません。

　そこで、C1SuperTooltipコンポーネントを利用してみます。C1SuperTooltipコンポーネントでは、プレーンテキストだけでなくHTMLテキストも表示することが可能です（※前項のC1SizerLightコンポーネントと同様に、ツールボックスにアイテムを追加する必要があります）。

　基本的な使い方は標準のToolTipコンポーネントと同じです。まず、C1SuperTooltipコンポーネントをForm上にドラッグ＆ドロップします。次に、SetToolTipメソッドを使用してツールチップを関連付けるコントロールと、ツールチップテキストを設定します。

this.c1SuperTooltip1.SetToolTip( "関連付けるコントロール", "ツールチップテキスト");

　実際にFlexGridのツールチップを設定してみましょう。まず、FlexGridのMouseMoveイベントを追加します。その中で、マウスの位置に従って表示したいツールチップテキストを設定します。

string toolTip = string.Empty;

// 見出しを設定します。
toolTip = string.Format("<b>{0}<b><parm><hr noshade size=1 style='margin:2' color=Darker></parm>", this.c1FlexGrid1[0, col]);

// データ部分を設定します。
toolTip += string.Format("<table><tr><td align = right>{0:C}</td></tr></table>", this.c1FlexGrid1[row, col]);


this.c1SuperTooltip1.SetToolTip( this.c1FlexGrid1, toolTip);

　見出しとして、列の見出しを設定します。その後、データ部分として実際のデータを設定します。

ツールチップの表示

　太字表記や複数行表記などが簡単に行えます。また、IsBalloonプロパティをtrueに設定することで、バルーン形式での表示も可能です。

ツールチップの表示（バルーン形式）

　あとは、マウス位置に合わせて通常行と集計行で表示の内容を変更してみましょう。

// 集計行の場合
if (this.c1FlexGrid1.Rows[row].Style != null)
{
    // 小計行の場合
    if (this.c1FlexGrid1.Rows[row].Style.Name
        == this.c1FlexGrid1.Styles[CellStyleEnum.Subtotal0].Name)
    {
        toolTip = string.Format("<b>{0}<b><parm><hr noshade size=1 style='margin:2' color=Darker></parm>", this.c1FlexGrid1[row, 1]);
        toolTip += string.Format("<table><tr><td>売上計</td><td align = right>{0:C}</td></tr>", this.c1FlexGrid1[row, 2]);
        toolTip += string.Format("<tr><td>仕入計</td><td align = right>{0:C}</td></tr>", this.c1FlexGrid1[row, 3]);
        toolTip += string.Format("<tr><td>粗利計</td><td align = right>{0:C}</td></tr></table>", this.c1FlexGrid1[row, 4]);
    }

    ・・・・
    ・・・・
    ・・・・

}

　通常行か集計行かの判定はセルのスタイルを用いて行っています。このソースコードでは、集計行のときは各項目の集計値を表示するようにしています。

　このように、簡単に見やすくツールチップを表示できます。応用としては、選択セルに合わせて一覧に表示されていない項目などを表示してみても良いかもしれません。なお、C1SuperTooltipコンポーネントにはグラフィカルにツールチップを設定できるエディタも用意されています。ツールチップの内容を動的に変更する必要がない場合は、エディタを使用するほうが便利です。