|
.NET TIPS ［ASP.NET AJAX］DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには？［2.0、3.0、3.5、C#、VB］山田 祥寛2008/03/06 |
 |
|
|
|
DropDownコントロール（DropDownExtender）は、ASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、標準のサーバ・コントロール（例えばLabelコントロール）を拡張し、SharePoint風のドロップダウン・メニューを生成するためのExtenderコントロールだ。
DropDownコントロールの動作については、文章で説明するよりも、実際に以下の画面で具体的な動作をご覧いただいた方が話は早いだろう。
 |
 （「詳細はこちらを参照」にマウス・ポインタを当てる） |
 |
| （ドロップダウン・メニューが表示される） |
 |
| DropDownコントロールでSharePoint風のドロップダウン・メニューを生成する例 |
| テキスト・ラベルにマウス・ポインタを当てると、ドロップダウン式のユーザー・インターフェイスが表示され、クリックするとあらかじめ定義しておいたメニューが表示される。 |
このように、通常の状態ではテキスト・ラベルとして表示しておき、マウス・ポインタを当てたタイミングで動的にドロップダウン的な視覚効果が適用されるわけだ。これをクリックすることで、あらかじめ定義しておいたメニューを表示することができる。
それではさっそく、上の画面のようなドロップダウン・メニューを実装する、具体的な手順を見てみることにしよう。なお、本サンプルを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。
1. 新規のWebフォームを作成する
新規のWebフォーム（DropDown.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する*。
 |
|||||||||||||||||||||
| Webフォーム（DropDown.aspx）のフォーム・レイアウト | |||||||||||||||||||||
| 配置するコントロールは以下のとおり。 | |||||||||||||||||||||
|
| * Visual Studio 2008ではExtenderコントロールの適用方法が変更になった。VS 2008におけるExtenderコントロールの適用方法については、「ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part II」で紹介している。 |
ToolkitScriptManagerコントロールは、Control Toolkitを利用する場合に必ず必要となるコントロールである。詳細については、「TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？」を参照してほしい。
また、DropDownコントロールでは、ドロップダウン時に表示するメニューをPanelコントロールとして定義しておく必要がある。ここでは、Panelコントロールpopupの配下に、メニュー項目を表す3つのHyperLinkコントロールを配置している。
2. プロパティ情報を設定する
次に、1で配置したコントロールに対して、以下の表の要領でプロパティ情報を設定する。
| コントロール（ID） | プロパティ | 設定値 |
| ToolkitScriptManager（manager） | − | − |
| Label（lblTitle） | Text | 詳 細 は こ ち ら を 参 照 |
| Font-Size | Small | |
| Width | 250px | |
| Panel（popup） | BackColor | Gainsboro |
| BorderColor | Black | |
| BorderStyle | Solid | |
| BorderWidth | 1px | |
| Wrap | False | |
| HyperLink（lnk1） | Font-Size | Small |
| Font-Underline | False | |
| ForeColor | Navy | |
| NavigateUrl | http://www.atmarkit.co.jp/fdotnet/ | |
| Text | Insider.NET | |
| HyperLink（lnk2） | Font-Size | Small |
| Font-Underline | False | |
| ForeColor | Navy | |
| NavigateUrl | http://www.wings.msn.to/ | |
| Text | サーバサイド技術の学び舎 - WINGS | |
| HyperLink（lnk3） | Font-Size | Small |
| Font-Underline | False | |
| ForeColor | Navy | |
| NavigateUrl | http://www.web-deli.com/ | |
| Text | WebDeli - ASP.NETツール集 | |
| DropDownExtender（dde） | TargetControlID | lblTitle |
| DropDownControlID | popup | |
| HighlightBackColor | 192, 192, 255 | |
| HighlightBorderColor | 0, 0, 64 | |
 |
||
| 各コントロールのプロパティ設定 | ||
DropDownコントロールのTargetControlIDプロパティは、ドロップダウン機能を関連付けるLabelコントロールを指定するものだ。ここでは“lblTitle”を指定しているので、LabelコントロールlblTitleに対してドロップダウン機能が適用されたことになるわけだ。
なお、DropDownコントロールのそのほかのプロパティを設定する場合、（DropDownコントロールではなく）関連付けたコントロール（ターゲット）のプロパティとして設定する必要がある点に注意してほしい。この場合であれば、Labelコントロールのプロパティ・ウィンドウに（例えば）「dde（DropDownExtender）」という項目が追加されているので、この項目の配下から個々の値を設定することができる。
DropDownコントロールで利用可能な主なプロパティは以下のとおりだ。
| 分類 | プロパティ | 概要 |
| 基本 | TargetControlID | 関連付ける要素のID値 |
| DropDownControlID | ドロップダウン・メニューとして表示する要素のID値 | |
| デザイン | DropArrowBackColor | ドロップ矢印の背景色 |
| DropArrowImageUrl | ドロップ矢印を表すアイコン画像 | |
| DropArrowWidth | ドロップ矢印の表示幅 | |
| HighlightBackColor | ドロップダウンの背景色 | |
| HighlightBorderColor | ドロップダウンの枠線色 | |
| 通信 | DynamicControlID | サービス・メソッドからの戻り値を反映する要素のID値 |
| DynamicContextKey | サービス・メソッドに引き渡すコンテキスト・キー | |
| DynamicServiceMethod | サービス・メソッドの名前 | |
| DynamicServicePath | XML Webサービス・クラスのパス | |
| CacheDynamicResults | サービス・メソッドからの結果をキャッシュするか（デフォルトはFalse） | |
| その他 | Animations | メニューポップアップ時に適用するアニメーション* |
|
||
| DropDownコントロールの主なプロパティ | ||
| * Animationsプロパティに関する詳細は、「TIPS：［ASP.NET AJAX］UpdatePanelAnimationコントロールで部分更新前後にアニメーションを実行するには？」を参照。 | ||
DropDownコントロールを利用するために最低限設定が必要なのは、TargetControlIDプロパティとDropDownControlIDプロパティだけだ。DropDownControlIDプロパティには、先ほど手順1で定義したメニュー表示用のパネルを指定すればよい。DropDownコントロールは、デフォルトでも最低限のドロップダウンやドロップ矢印のスタイルを生成してくれるが、デザイン・プロパティを設定することで適宜、カスタマイズすることも可能である。
なお、DynamicXxxxxプロパティは、ダイナミック・コンテキスト機能を設定するためのプロパティである。ダイナミック・コンテキスト機能を利用することで、ポップアップを表示する際に、ポップアップの内容をサービス・メソッド（Webサービスのメソッド）から動的に取得することができる。ダイナミック・コンテキスト機能については、後日「ダイナミック・コンテキスト機能でポップアップ・ダイアログの内容を動的に生成するには？」で紹介する予定である。
なお参考までに、ここまでにVisual Studio 2005で自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではLabelコントロール配下のプロパティとして設定した一連のプロパティも、コード上はDropDownコントロールの属性として記述されていることが確認できるはずだ。
|
|
| DropDown.aspxのソース・コード（抜粋） | |
| 一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。 |
以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、ラベルにマウス・ポインタを乗せたタイミングでラベルがドロップダウンの表示となること、また、そのドロップダウンの▼をクリックすると、パネルで定義されたメニューがポップアップされることが確認できれば成功だ。
| 利用可能バージョン：.NET Framework 2.0 利用可能バージョン：.NET Framework 3.0 利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム 処理対象：ASP.NET AJAX 使用ライブラリ：DropDownコントロール 関連TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？ 関連TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？ 関連TIPS：［ASP.NET AJAX］UpdatePanelAnimationコントロールで部分更新前後にアニメーションを実行するには？ |
 |
「.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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
