|
.NET TIPS ［ASP.NET AJAX］ToggleButtonコントロールでオン／オフ可能なトグルボタンを実装するには？［2.0のみ、C#、VB］山田 祥寛2008/02/07 |
 |
|
|
|
ToggleButtonコントロール（ToggleButtonExtender）は、ASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、標準のチェックボックス（CheckBoxコントロール）を拡張し、オン／オフの状態をアイコン画像で表現できるトグルボタンを生成する。
もっとも、オン／オフの状態を表すのはCheckBoxコントロール単体で可能であり、ToggleButtonコントロールはこれに新しい機能を追加するものでは「ない」。あくまでチェックボックスの見栄えをサイト・デザインに合わせてグラフィカルに表現したい場合に利用するExtenderコントロールであると考えておけばよいだろう。
以下の画面は、ToggleButtonコントロールによってトグルボタンを表示している例だ（なお、使用しているアイコン画像はControl Toolkitのサンプルで提供されているものである）。
 |
 （アイコン画像をクリックすると、アイコン画像がトグルする） |
 |
| ToggleButtonコントロールでトグルボタンを生成する例 |
| オン／オフの状態を標準的なチェックボックスの代わりに、対応するアイコン画像で表現できる。 |
それではさっそく、ToggleButtonコントロールを利用したトグルボタンの作成手順を見ていくことにしよう。
なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。
1. 新規のWebフォームを作成する
新規のWebフォーム（ToggleButton.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する（*1）。
| *1 ただし、Visual Studio 2008（以下VS 2008）ではExtenderコントロールの適用方法が変更になった。VS 2008におけるExtenderコントロールの適用方法については、「ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part II」で紹介している。 |
 |
|||||||||
| Webフォーム（ToggleButton.aspx）のフォーム・レイアウト | |||||||||
| 以下の各コントロールを配置する。 | |||||||||
|
|||||||||
| *2 ToolkitScriptManagerコントロールは、Control Toolkitを利用する場合に必ず必要となるコントロールである。詳細については、「TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？」を参照してほしい。 |
2. プロパティ情報を設定する
次に、1で配置したコントロールに対して、以下の表の要領でプロパティ情報を設定する。
| コントロール（ID） | プロパティ | 設定値 |
| ToolkitScriptManager（manager） | − | − |
| CheckBox（chk） | − | − |
| ToggleButtonExtender（tbe） | TargetControlID | chk |
| CheckedImageAlternateText | 有効 | |
| UncheckedImageAlternateText | 無効 | |
| CheckedImageUrl | chk.gif | |
| UncheckedImageUrl | unchk.gif | |
| DisabledCheckedImageUrl | d_chk.gif | |
| DisabledUncheckedImageUrl | d_unchk.gif | |
| ImageHeight | 19 | |
| ImageWidth | 19 | |
 |
||
| ToggleButton.aspxのプロパティ設定 | ||
ToggleButtonコントロールのTargetControlIDプロパティは、トグルボタン機能を関連付けるCheckBoxコントロールを指定するものだ。ここでは“chk”を指定しているので、CheckBoxコントロール「chk」に対してアニメーション機能が適用されたことになるわけだ。
なお、ToggleButtonコントロールのそのほかのプロパティを設定する場合、（ToggleButtonコントロールではなく）関連付けたコントロール（ターゲット）のプロパティとして設定する必要がある点に注意してほしい。この場合であれば、CheckBoxコントロールのプロパティ・ウィンドウに（例えば）「tbe（ToggleButtonExtender）」という項目が追加されているので、この項目の配下から個々の値を設定することができる。
ToggleButtonコントロールで利用可能な主なプロパティは、以下のとおりだ。
| プロパティ | 概要 |
| TargetControlID | 関連付ける要素のID値 |
| ImageHeight | アイコン画像の高さ |
| ImageWidth | アイコン画像の幅 |
| CheckedImageUrl | チェック状態のアイコン画像 |
| UncheckedImageUrl | 非チェック状態のアイコン画像 |
| DisabledCheckedImageUrl | チェック状態のアイコン画像（無効時） |
| DisabledUncheckedImageUrl | 非チェック状態のアイコン画像（無効時） |
| CheckedImageAlternateText | チェック状態の代替テキスト |
| UncheckedImageAlternateText | 非チェック状態の代替テキスト |
|
|
| ToggleButtonコントロールの主なプロパティ | |
最低限、TargetControlID／ImageHeight／ImageWidth／CheckedImageUrl／UncheckedImageUrlプロパティが必須であるが、特別な理由がない限り、すべてのプロパティを設定しておくのが望ましい。DisabledCheckedImageUrl／DisabledUncheckedImageUrlプロパティは、CheckBoxコントロールのEnabledプロパティがFalseである（チェックボックスが無効である）場合に適用されるアイコン画像である。
なお参考までに、ここまでにVisual Studio 2005で自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではCheckBoxコントロール配下のプロパティとして設定した一連のプロパティも、コード上はToggleButtonコントロールの属性として記述されていることが確認できるはずだ。
|
|
| ToggleButton.aspxのソース・コード（抜粋） | |
| 一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。 |
以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、チェックボックスの代わりに指定したアイコン画像が表示されること、また、画像をクリックすることでオン／オフが切り替わることが確認できれば成功だ。
| 利用可能バージョン：.NET Framework 2.0のみ カテゴリ：Webフォーム 処理対象：ASP.NET AJAX 使用ライブラリ：ToggleButtonコントロール 関連TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？ 関連TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？ |
 |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために （2017/7/26）
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 （2017/7/21）
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために （2017/7/19）
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator （2017/7/18）
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
