کنترل DropShadowExtender يکي از کنترل هاي موجود در AjaxControlToolkit مي باشد. اين کنترل جهت به وجود آوردن سايه (Shadow) در اطراف کنترل هاي صفحه وب استفاده مي شود.

در اين مقاله مي خواهيم يک کنترل Panel به شکل زير، را به وجود آوريم.

شروع :

يک پروژه  وب سايت از نوع ASP.NET Ajax-Enabled Web Site ايجاد نماييد.

يک کنترل Panel به صفحه اضافه کنيد. سپس يک کنترل DropShadowExtender که يکي از کنترل هاي مربوط به اسمبلي AjaxControlToolkit مي باشد را به صفحه اضافه کنيد.

ياد آوري :

براي اينکه کنترل هاي مربوط به AjaxControlToolkit را به برنامه اضافه کنيد کافي است اسمبلي AjaxControlToolkit را همانطور که در مقالات قبلي توضيح دادم به Toolbox برنامه اضافه کنيد تا کنترل هاي موجود در آن را مشاهده نماييد.

روي کنترل DropShadowExtender ، کليک راست تموده و گزينه Properties را انتخاب نماييد. صفت  TargetControlID ، نام کنترلي را که قرار است براي آن سايه ايجاد کنيم را نگهداري مي کند. پس در اينجا نام Panel1 را به آن نسبت دهيد.

اکنون روي کنترل Panel کليک راست کنيد و گزينه Properties را انتخاب نماييد. اگر با دقت به صفات آن نگاه کنيد، متوجه مي شويد که يک گزينه جديد به نام  DropShadowExtender1 به آن اضافه شده است.

روي علامت "+" در سمت چپ اين گزينه کليک کنيد و صفات آن را ملاحظه نماييد.

اکنون به معرفي اين صفات مي پردازم.

1. BehaviorID -- اين صفت شناسه DropShadowExtender  مربوطه را نگهداري مي کند. در صورتي که اين گزينه را تغييري دهيد، يک صفت جديد به تگ  DropShadowExtender  اضافه مي شود که شناسه BehaviorID  که شما تغيير داده ايد را نگهداري مي کند.
2. Opacity -- اين صفت ميزان شفافيت سايه دور Panel را نسبت به رنگ پس زمينه صفحه مشخص مي کند که ميزان آن به طور پيشفرض برابر 5 مي باشد. مقدار اين صفت مي تواند بين 0 (کاملا شفاف) و 10 (کاملا تيره) باشد.
3. Rounded -- به طور پيشفرض سايه اي که در اطراف کنترل نمايش داده مي شود به صورت چهارگوش مي باشد و مقدار اين صفت برابر false مي باشد. در صورتي که مقدار آن را true کنيم گوشه هاي سايه و کنترل به صورت منحني نمايش داده مي شود. (همانند شکل بالا)
4. Radius -- در صورتي که صفت Rounded برابر true باشد، اين صفت اندازه شعاع قسمت هاي انحنادار را مشخص مي کند.
5. Width -- اين صفت اندازه سايه اطراف کنترل (در اينجا Panel) را مشخص مي کند که به طور پيشفرض مقدار آن 5 مي باشد و مقياس آن پيکسل مي باشد.
6. TrackPosition -- در صورتي که استايل position مربوط به کنترل (در اينجا Panel) برابر absolute باشد و يا اينکه امکان اين را گذاشته باشيم که Panel بتواند روي صفحه حرکتي داشته باشد، بايد مقدار اين صفت که به طور پيشفرض false مي باشد را true نماييم.

نکته :

تغييراتي که ما اينجا انجام مي دهيم در حقيقت روي تگ <DropShadowExtender> اعمال مي شود و نه Panel .

در زير تغييرات اعمال شده را مي توانيد ببينيد.

اکنون صفحه را اجرا کنيد و نتيجه کار را مشاهده نماييد.

مثال انجام شده دراين مقاله از لينک بالاي صفحه قابل دانلود مي باشد.