.NET TIPS

[ASP.NET AJAX]DropShadowコントロールでパネルに影を付けるには?[2.0、3.0、3.5、C#、VB]

山田 祥寛
2008/07/17

 DropShadowコントロール(DropShadowExtender)は、ASP.NET AJAX Control Toolkit(以降、Control Toolkit)で提供されるコントロールの1つで、標準のパネルに対してシャドウ(影)効果を付与するためのコントロールだ。

 従来、こうした影を付与するには、CSS(Cascading Style Sheet)やJavaScriptの記述が不可欠であったが、DropShadowコントロールを利用することで、サーバ・コントロールのプロパティ設定だけで手軽に実現できる。

DropShadowコントロールによって背後に付けられた影(ドロップ・シャドウ)

 DropShadowコントロールの動作自体は明快なので、以下ではさっそく、上の画面のような影付きパネルをASP.NETページに実装する手順を見ていくことにしよう。

 なお、本サンプル・プログラムを動作させるに当たっては、「TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

1. 新規のWebフォームを作成する

 新規のWebフォーム(DropShadow.aspx)を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する(*1)。

Webフォーム(DropShadow.aspx)のフォーム・レイアウト
配置するコントロールは以下のとおり。
  ToolkitScriptManagerコントロール(manager)。
  Panelコントロール(pnl)。
  DropShadowコントロール(dse)

*1 Visual Studio 2008ではExtenderコントロールの適用方法が変更になった。VS 2008におけるExtenderコントロールの適用方法については、「ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part II」で紹介している。

 ToolkitScriptManagerコントロールは、Control Toolkitを利用する場合に必ず必要となるコントロールである。詳細については、「TIPS:[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?」を参照してほしい。

 また、DropShadowコントロールを利用する場合、影を付与する対象となる領域をPanelコントロールとして定義しておく必要がある(ここではpnl)。Panelコントロールには、適宜、必要なコンテンツを入力しておこう。

2. コントロールのプロパティ情報を設定する

 次に、ページに配置したサーバ・コントロールのプロパティを以下の表の要領で設定する。

コントロール(ID) プロパティ 設定値
ToolkitScriptManager(manager)
Panel(pnl) CssClass dropShadowPanel(*2
Width 300px
DropShadowExtender(dse) TargetControlID pnl
Opacity 0.5
Radius 10
Rounded True
Width 10
Webフォーム(DropShadow.aspx)のプロパティ設定
*2 パネルに適用しているスタイルは、Control Toolkitで提供されているサンプル・アプリケーションに含まれている.cssファイルで定義されているクラス。スタイルシートの引用については、「TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?」を参照のこと

 DropShadowコントロールのTargetControlIDプロパティは、影効果を付与するPanelコントロールを指定するものだ。ここでは“pnl”を指定しているので、これによって、Panelコントロールpnlが影付きパネルとして定義されたことになるわけだ。

 なお、DropShadowコントロールのそのほかのプロパティを設定する場合、(DropShadowコントロールではなく)関連付けたコントロールのプロパティとして設定する必要がある点に注意してほしい。この場合であれば、Panelコントロールpnlのプロパティ・ウィンドウに(例えば)「dse(DropShadowExtender)」という項目が追加されているので、この項目の配下から個々の値を設定することができる。

 DropShadowコントロールで利用可能な主なプロパティは、以下のとおりだ。

プロパティ 概要 デフォルト値
TargetControlID 関連付けるPanelコントロールのID値 (必須)
Width 影の幅 5(px)
Opacity 影の透明度(0:完全に透明〜1.0:完全に不透明) 0.5
TrackPosition ターゲット(パネル)移動時に影も一緒に移動するか False
Radius 角に付ける丸みの半径 5
Rounded ターゲット要素と影の角に丸みを付けるか False
DropShadowコントロールの主なプロパティ

 多くのプロパティが用意されているが、最低限、影を付与するだけならばTargetControlIDプロパティを指定するだけでも構わない。

 なお参考までに、ここまでにVisual Studioで自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではPanelコントロール配下のプロパティとして設定したOpacity/Radiusなどのプロパティも、コード上はDropShadowコントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にScriptManagerの配置は必須--%>
<ajaxToolkit:ToolkitScriptManager ID="manager" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<%--影効果を付与するパネルを定義--%>
<asp:Panel ID="pnl" runat="server" CssClass="dropShadowPanel" Width="300px">
  ASP.NET AJAXプログラミング(マイコミ)<br />
  ……中略……
</asp:Panel>
<%--DropShadowコントロールの諸設定--%>
<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
  Opacity="0.5" Radius="10"
  Rounded="True" TargetControlID="pnl" Width="10">
</ajaxToolkit:DropShadowExtender>
DropShadow.aspxのソース・コード(抜粋)
一連のレイアウト編集を行った後、Visual Studioによって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

 以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、パネル背後に影が付与されていれば成功である。End of Article

利用可能バージョン:.NET Framework 2.0
利用可能バージョン:.NET Framework 3.0
利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:ASP.NET AJAX
関連TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?
関連TIPS:[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?
[ASP.NET AJAX]RoundedCornerコントロールでパネルの角を丸めるには?
[ASP.NET AJAX]DragPanelコントロールでドラッグ可能なパネルを定義するには?
[ASP.NET AJAX]CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには?
[ASP.NET AJAX]DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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 記事ランキング

本日 月間