.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）のフォーム・レイアウト
以下の各コントロールを配置する。
　 ToolkitScriptManagerコントロール（manager*2）。
　 CheckBoxコントロール（chk）。
　 ToggleButtonExtenderコントロール（tbe）。
*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コントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にToolkitScriptManagerの配置は必須--%>
<ajaxToolkit:ToolkitScriptManager ID="manager" runat="server">
  </ajaxToolkit:ToolkitScriptManager>
<asp:CheckBox ID="chk" runat="server" /><br />
<%--ToggleButtonコントロールの諸設定を定義--%>
<ajaxToolkit:ToggleButtonExtender ID="tbe" runat="server"
  CheckedImageAlternateText="有効" CheckedImageUrl="chk.gif"
  DisabledCheckedImageUrl="d_chk.gif" DisabledUncheckedImageUrl="d_unchk.gif"
  ImageHeight="19" ImageWidth="19" TargetControlID="chk"
  UncheckedImageAlternateText="無効" UncheckedImageUrl="unchk.gif">
</ajaxToolkit:ToggleButtonExtender>
ToggleButton.aspxのソース・コード（抜粋）
一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--～--%>は筆者によるコメント。

　以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、チェックボックスの代わりに指定したアイコン画像が表示されること、また、画像をクリックすることでオン／オフが切り替わることが確認できれば成功だ。End of Article

利用可能バージョン：.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
［ASP.NET AJAX］MutuallyExclusiveCheckBoxコントロールで排他選択可能なチェックボックス・リストを生成するには？
［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？
［ASP.NET AJAX］DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには？
［ASP.NET AJAX］CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには？
［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ