كثيرا نحتاج ان نقوم بتجميل الفورم او صفحات الكنترول بانل بقوائم منزلقة كالتى نراها فى الوينوز
كما موضح بالشكل الاتى
اذا كنت تريد تطبيق ذلك فى مشروعك اذن الحل هو
ajax Collapsible extender
الشكل النهائى للمشروع الذى سوف نقوم به هو
قم بانشاء مشروع جديد
اضف ScriptManager من قائمة الاجاكس ثم
اضف اتنين بانل
قم بتغير اسماء البانل كاالتالى
panel 1 name as : ptitle
panel2 name as content
نظبط حجم البانل
ptitle width = 300
pcontent width = 300
جهز اى صورتين عرضهم 300
Colls.png فى مثالى هذا حتى لايختلط الامر قمت بتسمية الصورة الاولى
والثانية Colls2.png
بعد الانتهاء من الخطوة السابقة قم باضافة
image control
غير اسم الكنترول الى
img1
داخل البانل الاولى اللى هى
ptitle
اضف صورة من الاتنين اللى انتا عملتهم مسبقا لهذا الكنترول ولكن لا تنسى ان يكون المقاس ايضا 300
الخطوة التالية
هى اضافة اى محتويات ترغب فيها داخل البانل الاخر فى مثالنا هذا سوف اقوم باضافة 3لينك بوتن
الان قد انتهينا من اعداد البانل
الخطوة الاخير هى اضافة الكنترول السحرى
Collapsible extender
كما فى الصورة الاتية
واظبط هذه الخصائص
TargetControlID="Pcontent" الكنترول الذى تريد ان تتم عليه العملية
ExpandControlID="ptitle" الكنترول الذى عند الضغط عليه يتم الانزلاق
CollapseControlID="ptitle" عند الطغط عليه سوف يتم غلقه
ImageControlID="img1" الصورة
ExpandedImage="Colls2.png" سوف يقوم بعرض هذه الصورة عند حالة الاغلاق
CollapsedImage="Colls.png" سوف يقوم بعرض هذا الصورة عند الانسدال
Collapsed="false" الوضع الافتراض هل مغلق ام مفتوح
ليكون الكود بهذا الشكل
<cc1:CollapsiblePanelExtender ID="Pcontent_CollapsiblePanelExtender"
runat="server" Enabled="True" TargetControlID="Pcontent"
ExpandControlID="ptitle" CollapseControlID="ptitle" Collapsed="false"
SuppressPostBack="true"
CollapsedSize="-1" ImageControlID="img1" ExpandedImage="Colls2.png" CollapsedImage="Colls.png"
>
</cc1:CollapsiblePanelExtender>لتحميل المشروع
