チュートリアル
文責：山田奈美最終更新日：2008年01月22日
DropShadowコントロール（AJAX Control Toolkit）
|
 |
|
DropShadowコントロールを使うと、パネルに影をつけて、立体的に見せることができるよ
影の濃淡や幅も自由に設定できるから、ちょっと手を加えてかっこいいページを作ってみよう
|
|
|
DropShadowコントロールとは？
DropShadowコントロールは、パネルなどに影の効果をつけます。プロパティの設定により、影の濃淡や幅などを好みのものに調整することが可能です。
また、ユーザがパネルを移動したときに、影も合わせて移動させるかどうかを選択することもできます。
以下は、DropShadowコントロールを使ったサンプルの実行結果です。
実行結果2は、上側のパネルを移動しています。
DropShadowサンプル実行結果1
DropShadowサンプル実行結果2
DropShadowコントロールの使い方は、とっても簡単。VisualStudio（VisualWebDeveloper）のデザイン画面にDropShadowコントロールを配置して、以下表を参考にプロパティを入力するだけでOKです。プロパティ値がプロパティウィンドウから入力できない場合は、ソース画面から直接入力してください。
DropShadowコントロールのプロパティ
DropShadowコントロールのプロパティは、以下の表のとおりです。
DropShadowコントロールのプロパティ
| プロパティ名 | 概要 |
| TargetControlID | 機能を適用するパネルコントロールのID |
| Width | 影の幅（デフォルトは5ピクセル） |
| Opacity | 影の濃淡。0～1の範囲で設定。（デフォルトは0.5） |
| TrackPosition | 対象パネルコントロールの移動時に影も一緒に移動させるかどうか |
| Rounded | 対象パネルコントロールと影の角を丸めるかどうか |
DropShadowコントロールのサンプル
ここではTargetControlIDプロパティに上側のパネルコントロールのID（panel1）を、Opacityプロパティに0.5を、RoundedとTrackPositionプロパティをTrueにそれぞれ設定しました。
［DropShadow.aspx］
<form id="form1" runat="server">
<div>
<cc1:ToolkitScriptManager ID="manager" runat="server">
</cc1:ToolkitScriptManager>
<asp:Panel ID="panel1" runat="server" BackColor="YellowGreen" Font-Bold="True" HorizontalAlign="Center" Width="235px">
<asp:Literal ID="Literal1" runat="server" Text="DropShadow使用"></asp:Literal><br />
<asp:Image
ID="img1" runat="server" ImageUrl="~/image/linkbanner_l.gif" ImageAlign="Middle" /></asp:Panel>
<br /><br /><br /><br /><br /><br /><br /><br />
<asp:Panel ID="panel2" runat="server" BackColor="YellowGreen" Font-Bold="True" HorizontalAlign="Center" Width="235px">
<asp:Literal ID="Literal2" runat="server" Text="DropShadow未使用"></asp:Literal><br />
<asp:Image
ID="Image1" runat="server" ImageUrl="~/image/linkbanner_l.gif" ImageAlign="Middle" /></asp:Panel>
</div>
<br /><br /><br /><br />
<cc1:DropShadowExtender ID="dse" runat="server" Opacity="0.5" Radius="10" Rounded="True"
TargetControlID="panel1" TrackPosition="True">
</cc1:DropShadowExtender>
<cc1:DragPanelExtender ID="dpe" runat="server" TargetControlID="panel1">
</cc1:DragPanelExtender>
</form>
実行結果は冒頭の図のとおり。パネルに影がつき、パネルを移動させると影も同時に移動します。
