تعرف على الأداة TableLayoutPanel

عبد الكريم كنعان · 2008-01-29, 09:46 PM

ربما تكون مثلي ومررت في حالة تصميم لواجهة تحتوي على العديد من الادوات التي أخذت تؤرقك كيف تصطف في الشكل والاماكن التي تريدها، دعني أخبرك أن حل مشكلتك غاية في السهولة وذلك باستخدام أحد الادوات الرائعة التي تريحك في توضع أدواتك من أزرار و غيرها الكثير، دعنا سوية نزيح الستار عن أداة تشبه الاداة التي يستخدمها أصحاب تصميم المواقع بشكل كبير، تكاد لا تفارق اي موقع إلا ما رحم ربي، إنها الاداة TableLayoutPanel، ربما أنك سريع البديهة بعد أن قرأت اسم الاداة ربما قد تبادر إلى ذهنك أنها أداة تشبه الجدول، بل هي جدول بحد ذلته إن أن الغاية هي تقسيم الفورم إلى خلايا مكونة من عدد من الأسطر والأعمدة، وبالتالي يمكنك تحديد كل اداة ترغب بإضافتها في الخلية التي تناسبك.
دعنا ندع الحديث جانبا ونبدأ سوية بالتعرف على هذه الاداة، طبعا في بادئ الأمر بعد أن تقوم بإنشاء مشروع من نوع WindowsApplication ، نذهب إلى الفورم ونختار الاداة من شريط الادوات التي تحمل الاسم المذكور سابقا TableLayoutPanel لتظهر لنا الفورم على الشكل التالي:

طبعا كما نلاحظ أن الاداة قد قسمت الفورم بشكل افتراضي إلى اربعة خلايا ناتجة، ولا بد التنويه أنني ضبط الخاصية Dock للأداة السابقة إلى القيمة Fill لكي تشغل كامل الحيز على الفورم.
والان ماذا تعتقد بعد فلم يبقى لك سوى أن تقوم بسحب الاداة التي تريدها من شريط الادواة ووضها في الخلية التي تريدها لاحظ الشكل التالي:

قد قمت بوضع زرين أحدهما في الخلية الاول من السطر الاول ولاخر في الخلية الاولى من السطر الثاني
وهنا تجد الاشارة إلى أنه لا يمكنك وضع أكثر من عنصر واحد في الخلية الواحدة، ولكنك إن كنت تريد فعل ذلك فبكل بساطة يمكن وضع أحد أدوات الاحتواء مثل Panel و FlowLayoutPanel أو حتى TableLayoutPanel داخل خلية ما، ثم قم بما يتوجب عليك القيام به.
أما إذا اردت اضافة العناصر من خلال الكود فيمكنك ذلك بكل بساطة، دعنا نستخدم الحدث Load للقيام بذلك، واضف الشيفرة التالية:

كود:

private void Form1_Load(object sender, EventArgs e)
{
    Button btn = new Button();
    btn.Text = "Test";

    tableLayoutPanel1.Controls.Add(btn, 2, 1);
}

قم بتشغيل البرنامج ولاحظ الشكل التالي:

هل لاحظت الزر المكتوب عليه Test، ولان لتعد إلى الشيفرة السابقة ولتأملها سوية:

كود:

Button btn = new Button();
    btn.Text = "Test";

إذا من خلال السطرين السابقين قمنا بتعريف أو التصريح عن زر جديد واعطينا الخاصية Text له القيمة Test، هذا جميل، والان لنكمل ما تبقى من الشيفرة:

كود:

tableLayoutPanel1.Controls.Add(btn, 2, 1);

لقد استخدمنا التابع Add التابع للخاصة Controls، واعطناه الاداة التي نرغب بإضافتها بالاضافة إلى مكان توضع الاداة وهي في العمود الثاني من السطر الثاني مع الملاحظة إلى أن ترقيم الاسطر يبدأ من الصفر وترقيم الاعمدة يبدأ من الواحد.
والان بقي شيء أخير أنه في حال رغبتنا في جعل العنصر (الزر) الأول button1 يحتل مساحة العمودين من السطر الأول، دعنا نقم بذلك سوية، حتى نلاحظ عمليات التغير التي ستطرأ على الزر دعنا نضبط الخاصية Dock للزر button1 إلى Fill ليصبح شكل الفورم على النحو التالي:

والان كل ما عليك أن تقوم بما يلي إذهب إلى الخاصية ColumnSpan الخاصة بالزر button1 وغير قيمتها من 1 إلى 2 وهي تمثل عدد الاعمدة التي تريد ان يمتد الزر فيها، لتصبح الفورم على النحو التالي:

وهناك خاصية مقابلة للأسطر وهي RowSpan
شيئ أخير إذا اردت إضافة سطر أو عمود جديدين بشكل سريع ما عليك سوى الذهاب إلى Smart Tag الموضحة بالشكل التالي:

والان أترك باقي التفاصيل لك لتستمتع بهذه الاداة الجميلة والجميلة جدا

مشاهدة نتائج الإستطلاع: قيم المقالة:
جيد جداً	0	0%
جيد	0	0%
وسط	0	0%
ضعيف	1	100.00%
المصوتون: 1. أنت لم تصوت في هذا الإستطلاع

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري