.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コントロールを配置する。また、それぞれのパネルにはヘッダ/コンテンツ部のための任意の文章を埋め込んでおく。
  ScriptManagerコントロール(IDは「manager」)。
  Panelコントロール(IDは「ph」)。
  Labelコントロール(IDは「lblColl」)。
  Imageコントロール(IDは「imgColl」)。
  Panelコントロール(IDは「pc」)。
  CollapsiblePanelExtenderコントロール(IDは「cpe」)。

 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コントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にScriptManagerの配置は必須--%>
<asp:ScriptManager ID="manager" runat="server">
</asp:ScriptManager>
<%--折り畳みパネル操作のためのパネルを定義--%>
<asp:Panel ID="ph" runat="server" CssClass="collapsePanelHeader"
  Height="20px" Width="550px">
  今日からつかえるASP.NET 2.0サンプル集
  <asp:Label ID="lblColl" runat="server" Font-Size="X-Small"></asp:Label>&nbsp;
  <asp:Image ID="imgColl" runat="server"  />
</asp:Panel>
<%--開閉する対象のパネルを定義--%>
<asp:Panel ID="pc" runat="server"
  CssClass="collapsePanel" Height="0px" Width="550px">
  入門書だけでは身につかなかったASP.NET 2.0の実践的な使い方を...</asp:Panel>
<%--CollapsiblePanelコントロールの諸設定--%>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
  TargetControlID="pc" ExpandControlID="ph" CollapseControlID="ph"
  Collapsed="True" ExpandedText="(詳細情報を非表示)"
  CollapsedText="(詳細情報を展開)" ImageControlID="imgColl"
  ExpandedImage="~/App_Themes/Basic/images/collapse_blue.jpg"
  CollapsedImage="~/App_Themes/Basic/images/expand_blue.jpg"
  TextLabelID="lblColl" />
CollapsiblePanel.aspxのソース・コード(抜粋)
一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

 以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、初期表示されたヘッダ・パネルをクリックすると、(最初はた畳まれていた)コンテンツ・パネルが動的に展開されることが確認できるはずだ。End of Article

利用可能バージョン:.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
[ASP.NET AJAX]DragPanelコントロールでドラッグ可能なパネルを定義するには?
[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?
[ASP.NET AJAX]DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには?
[ASP.NET AJAX]Accordionコントロールで伸縮自在のマルチペインを生成するには?
[ASP.NET AJAX]DropShadowコントロールでパネルに影を付けるには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間