SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

Webページのデザイン

 では、さっそくアプリケーションを作成していきましょう。

 作成するアプリケーションは、HTMLのButtonとASPのTextBoxコントロールを持ったWebページです。

 これらのコントロール一つ一つに、C1ToolTipコントロールを設定し3種類のツールチップを作成します。

 3つのツールチップは、それぞれ表示位置やアニメーション効果を変え、デザインにThemeRollerで選んだテンプレートをさらに編集して使うことにします。

ページのレイアウト

 使用するコントロールは、HTMLのButtonコントロールが2個とTextBoxコントロール、そして3個のC1ToolTipコントロールです。

 ページのデザイン時はC1ToolTipコントロールは表示されていますが、アプリケーション実行時は表示されません。

ページレイアウト
ページレイアウト

ツールチップの作成

 まずは、3つのツールチップを作成します。コントロールとC1ToolTipコントロールの関連付けは、C1ToolTipコントロールの「TargetSelector」プロパティに、「#」記号とコントロールの名前を設定するだけです。

 ① 最初のButtonコントロール「Button1」に、C1ToolTipコントロール「C1ToolTip1」を関連付けます。C1ToolTipコントロールの「TargetSelector」プロパティに、「#Button1」と入力します。これで、2つのコントロールが関連付けられました。

 ② C1ToolTipコントロールの「Content」プロパティを展開し、「Content」欄に「Hello!」と入力します。これがツールチップの表示文字になります。これで1つ目のツールチップができ上がりました。

 テーマはデフォルトの「Aristo」のままなので、黒色の背景色、シアンの枠線、白色の文字列で表示されます。また、表示位置も変更していませんので、コントロールの右上に表示されます。

ほぼデフォルトのツールチップ
ほぼデフォルトのツールチップ

 ③ 続いて、2つ目のButtonコントロール「Button2」に、C1ToolTipコントロール「C1ToolTip2」を関連付けます。C1ToolTipコントロールの「TargetSelector」プロパティに、「#Button2」と入力します。

 ④ C1ToolTipコントロールの「Content」プロパティを展開し、「Content」欄に「Bye bye !」と入力します。

 ⑤ 「Animation」プロパティを展開し、「Easing」の値欄をクリックしてリストから「EaseInOutBounce」を選びます。これで、ツールチップ表示時に軽く揺れるアニメーションが実行されます。

「Easing」の値欄をクリックしてリストから「EaseInOutBounce」を選ぶ
「Easing」の値欄をクリックしてリストから「EaseInOutBounce」を選ぶ

次のページ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7125 2013/05/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング