コンポーネントのインストール
本サンプルアプリケーションでは、「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 | 本体アセンブリ |
また、プロジェクトに以下のランタイムライブラリが追加されます。
| ファイル | 内容 |
|---|---|
| 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列挙体を使って、ツールチップを表示するイベントを指定できます。また、コードからツールチップの表示・非表示を行うことも可能です。
| メンバ名 | 説明 |
|---|---|
| Hover | 要素にマウスオーバーした場合はツールチップを表示し、マウスアウトした場合はツールチップを非表示にします。 |
| Click | 要素をクリックした場合、ツールチップを表示します。 |
| Focus | 要素にフォーカスを移動した場合、ツールチップを表示します。 |
| RightClick | 要素を右クリックした場合、ツールチップを表示します。 |
| Custom | ツールチップを表示せず、ツールチップを表示するには、ユーザーは単にshowまたはshowAtメソッドを呼び出します。 |
