|
.NET TIPS ［ASP.NET AJAX］CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには？［2.0のみ、C#、VB］山田 祥寛2007/05/24 |
 |
|
|
|
CollapsiblePanelコントロール（CollapsiblePanelExtender）は、ASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、Panelコントロールを拡張して詳細表示部分が開閉可能なパネルを定義する。
 |
 |
| ヘッダ部分をクリックする |
|
 |
| CollapsiblePanelコントロールによる詳細パネルの開閉 |
| ヘッダ部分として定義したパネルをクリックすることで、対応する詳細パネルを動的に開く。 |
見掛け上は、「TIPS：［ASP.NET AJAX］Accordionコントロールで伸縮自在のマルチペインを生成するには？」で紹介したAccordionコントロールに似ているが、CollapsiblePanelコントロールが既存のサーバ・コントロールを拡張するExtenderコントロールであるのに対して、Accordionコントロールはそれ単体で動作するコントロールである点から、両者はまったく別物と考えるべきだ。以下に、両コントロールの違いを簡単にまとめておく。
| CollapsiblePanel | Accordion | |
| 生成する対象 | シングルペイン | マルチペイン |
| 複数のペインを同時に開けるか | 可能 | 不可（排他的） |
| コンテンツをデザイナ上で編集できるか | 可能 | 不可 |
| レイアウトの自由度 | 自由 | 定型的 |
 |
||
| CollapsiblePanel／Accordionコントロールの違い | ||
| ※ただし、CollapsiblePanelコントロールでもGridView／Repeaterなどのデータバインド・コントロールのテンプレート機能と組み合わせることでマルチペインを生成することは可能。 | ||
特にレイアウトの自由度という点は注目だ。あらかじめ決められたレイアウト内でヘッダ／コンテンツ部を規定するAccordionコントロールに対して、（後述するように）CollapsiblePanelコントロールは開閉する対象のパネル、パネルを操作するコントロール、状態を表すコントロールを個々に設定することができるので、用途に即したレイアウトを生成することができる。
さて、CollapsiblePanelコントロールの概要を理解したところで、そろそろコントロールの具体的な利用手順を見ていくことにしよう。なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。
1. 新規のWebフォームを作成する
新規のWebフォーム（CollapsiblePanel.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。
 |
||||||||||||||||||
| Webフォーム（CollapsiblePanel.aspx）のレイアウト | ||||||||||||||||||
| 新規に作成したWebフォームに対して、CollapsiblePanelコントロールを配置する。また、それぞれのパネルにはヘッダ／コンテンツ部のための任意の文章を埋め込んでおく。 | ||||||||||||||||||
|
CollapsiblePanelコントロールを利用するには、最低限、コンテンツ部を表すためのPanelコントロール
、パネルを操作するための任意のサーバ・コントロール
を配置しておく必要がある。本サンプルであれば、Panelコントロールpc／phがそれぞれに相当する。
また、CollapsiblePanelコントロールでは、現在の表示／非表示状態を表すためのラベルやイメージを配置することが可能である（本サンプルではそれぞれLabelコントロールlblColl、ImageコントロールimgCollに相当）。Label／Imageコントロールの配置はCollapsiblePanelコントロールが動作するうえで必ずしも必須ではないが、エンド・ユーザーに現在のパネルの状態を明示的に示すという意味では、少なくともいずれか片方は配置しておくことをお勧めしたい。
2. サーバ・コントロールにプロパティ情報を設定する
また、それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。以下の表の要領で、ページ上に配置したサーバ・コントロールにプロパティ情報を設定する。
| コントロール | プロパティ | 概要 |
| ScriptManager | − | − |
| Panel（ph） | CssClass | collapsePanelHeader |
| Height | 20px | |
| Width | 550px | |
| Label | Font-Size | X-Small |
| Image | − | − |
| Panel（pc） | CssClass | collapsePanel |
| Height | 0px | |
| Width | 550px | |
| CollapsiblePanel Extender |
TargetControlID | pc |
| ExpandControlID | ph | |
| CollapseControlID | ph | |
| Collapsed | True | |
| TextLabelID | lblColl | |
| ExpandedText | （詳細情報を非表示） | |
| CollapsedText | （詳細情報を展開） | |
| ImageControlID | imgColl | |
| ExpandedImage | ~/App_Themes/Basic/images/collapse_blue.jpg | |
| CollapsedImage | ~/App_Themes/Basic/images/expand_blue.jpg | |
|
||
| 各コントロールで設定するプロパティの内容 | ||
CollapsiblePanelコントロールのTargetControlIDプロパティは、開閉機能を付与するPanelコントロールを指定するものだ。これによって、PanelコントロールpcにCollapsiblePanelコントロールの機能が追加されたことになるわけだ。
なお、CollapsiblePanelコントロールのそのほかのプロパティを設定する場合、（CollapsiblePanelコントロールではなく）関連付けたPanelコントロールのプロパティとして設定する必要がある点に注意してほしい。本稿の場合であれば、Panelコントロールのプロパティ・ウィンドウに「cpe（CollapsiblePanelExtender）」という項目が追加されているので、この項目の配下から個々の値を設定する。
CollapsiblePanelコントロールで利用可能なプロパティは、以下のとおりだ。
| 分類 | プロパティ | 概要 |
| 一般 | TargetControlID | 開閉の対象となるPanelコントロールのID値 |
| CollapsedSize | 畳まれた状態でのパネル・サイズ（ピクセル） | |
| ExpandedSize | 展開された状態でのパネル・サイズ（ピクセル） | |
| ScrollContents | パネルの既定のサイズよりもコンテンツが大きい場合にスクロールバーを表示するか | |
| 操作 | CollapseControlID | 畳むときに使用するコントロールのID値 |
| ExpandControlID | 展開するときに使用するコントロールのID値 | |
| ImageControlID | パネルの状態を示すアイコン画像を表すImageコントロールのID値 | |
| TextLabelID | パネルの状態を示すテキストを表すLabelコントロールのID値 | |
| 画像／テキスト | CollapsedText | パネルが畳まれた状態にある場合の表示テキスト |
| ExpandedText | パネルが展開された状態にある場合の表示テキスト | |
| CollapsedImage | パネルが畳まれた状態にあるときの表示アイコン | |
| ExpandedImage | パネルが展開された状態にあるときの表示アイコン | |
| 挙動 | AutoCollapse | マウスがパネルから出たタイミングで自動的にパネルを畳むか |
| AutoExpand | マウスがパネルをポイントしたタイミングで自動的にパネルを展開するか | |
| Collapsed | 初期状態でコンテンツ部を畳んでおくか | |
| ExpandDirection | パネルの展開方向（Vertical｜Horizontal） | |
|
||
| CollapsiblePanelコントロールで利用可能な主なプロパティ | ||
パネルの展開に使用するコントロール（ここではPanelコントロール）を指定するのは、CollapseControlID／ExpandControlIDプロパティだ。両者が同一である場合、CollapsiblePanelコントロールではトグル・ボタン的に動作する（つまり、パネルが展開された状態にある場合は畳むためのボタンとして、畳まれた状態にある場合は展開するためのボタンとして働く）。
パネルの状態を表すラベル／アイコンを指定するのは、ImageControlID／TextControlIDプロパティの役割だ。それぞれ対応するテキスト値、アイコン画像のパスを指定するには、CollapsedText／ExpandedText、CollapsedImage／ExpandedImageプロパティを指定すればよい。ただし、CollapsedText／ExpandedTextプロパティの値は表示ラベルのテキストだけでなく、CollapsedImage／ExpandedImageプロパティで指定されたアイコン画像の代替テキストとしても使用される。
| ［参考］ |
|
ヘッダ／コンテンツ部に適用するスタイルは、それぞれ該当するPanelコントロールph／pc上のCssClassプロパティで指定が可能だ。ここではそれぞれcollapsePanelHeader／collapsePanelという名前のCSSクラスを指定しているが、これらはいずれもControl Toolkitで提供されているサンプル・アプリケーションに含まれている.cssファイルで定義されているクラスだ。スタイルシートの引用については、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」でも紹介しているので、併せて参照していただきたい。 |
なお参考までに、ここまでにVisual Studio 2005で自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではPanelコントロール配下のプロパティとして設定したCollapseControlID／ExpandControlIDプロパティなども、コード上はCollapsiblePanelコントロールの属性として記述されていることが確認できるはずだ。
|
|
| CollapsiblePanel.aspxのソース・コード（抜粋） | |
| 一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。 |
以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、初期表示されたヘッダ・パネルをクリックすると、（最初はた畳まれていた）コンテンツ・パネルが動的に展開されることが確認できるはずだ。
| 利用可能バージョン：.NET Framework 2.0のみ カテゴリ：Webフォーム 処理対象：ASP.NET AJAX 使用ライブラリ：CollapsiblePanelコントロール 関連TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？ 関連TIPS：［ASP.NET AJAX］Accordionコントロールで伸縮自在のマルチペインを生成するには？ |
 |
「.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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
