Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

カラフルなツールチップを持つASP.NETアプリケーションの作成

C1ToolTipコントロールを使ったWebアプリケーションの作成 その2

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/05/17 14:00
目次

コンポーネントのインストール

 本サンプルアプリケーションでは、「ToolTip for ASP.NET Wijmo」のC1コントロールを使用します。

 このコントロールを使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールする必要があります。

 トライアル版は、グレープシティのWebページからダウンロードできます。

 ダウンロードしたい製品にチェックを付け[申込フォーム]ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。

 トライアル申込フォームが表示されますので必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

 制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

 「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールしたら、プロジェクトにコントロールを追加します。

 ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。

 追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ToolTip」コントロールです。

アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ToolTip」コントロールを選択する
アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ToolTip」コントロールを選択する

 これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル 内容
C1.Web.Wijmo.Controls.4 本体アセンブリ

 また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル 内容
C1.C1Report.4.dll 本体アセンブリ
C1.Web.Wijmo.Controls.4.dll 本体アセンブリ

 なお、.NET Framework 4が必要です。

C1ToolTipコントロールの概要

 「ToolTip for ASP.NET Wijmo」のC1ToolTipコントロールは、Webページ上のコントロールにヒントや説明などの補助情報を表示するツールチップ機能を提供します。

 ツールチップは、対象のコントロール上にマウスポインタを重ねた時に表示されるだけでなく、常に表示したりクリックした時に表示されるなど、表示のタイミングを選ぶことができます。

 また、ツールチップの表示位置も対象コントロールの上下左右に設定したり、常にマウスポインタの横に表示するなど、表示位置の指定も可能です。

 さらに、ツールチップの表示・非表示や他のコントロールに移動する際の移動方法にアニメーション効果を適用できますので、より操作が楽しくなる視覚効果をWebページに持たせることが可能です。

 ツールチップのデザインはCSSによりコントロールされ、あらかじめ組み込まれているテーマに加え、カスタムデザインやThemeRollerからテーマをダウンロードしてC1ToolTipコントロールに適用させることができます。これらの方法を使うことで、完全なカスタムツールチップを使うことができます。

ツールチップの表示位置

 Positonプロパティを使用して、ツールチップを対象コントロールの上下左右の位置に表示できます。また、MouseTrailingプロパティをTrueにすると、マウスポインタの位置にツールチップを表示させることが可能です。

ツールチップをどこにでも表示できる
ツールチップをどこにでも表示できる

ツールチップ表示のタイミング

 TriggerプロパティとTrigger列挙体を使って、ツールチップを表示するイベントを指定できます。また、コードからツールチップの表示・非表示を行うことも可能です。

Trigger列挙体のメンバ
メンバ名 説明
Hover 要素にマウスオーバーした場合はツールチップを表示し、マウスアウトした場合はツールチップを非表示にします。
Click 要素をクリックした場合、ツールチップを表示します。
Focus 要素にフォーカスを移動した場合、ツールチップを表示します。
RightClick 要素を右クリックした場合、ツールチップを表示します。
Custom ツールチップを表示せず、ツールチップを表示するには、ユーザーは単にshowまたはshowAtメソッドを呼び出します。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5