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

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

16.jpg

 

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

12.jpg

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

 

13.jpg

قد قمت بوضع زرين أحدهما في الخلية الاول من السطر الاول ولاخر في الخلية الاولى من السطر الثانيوهنا تجد الاشارة إلى أنه لا يمكنك وضع أكثر من عنصر واحد في الخلية الواحدة، ولكنك إن كنت تريد فعل ذلك فبكل بساطة يمكن وضع أحد أدوات الاحتواء مثل 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);
}

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

 

14.jpg

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

Button btn = new Button();
btn.Text = “Test”;

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

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

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

 

15.jpg

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

16.jpg

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

17.jpg

يمكنك تحميل المثال من الرابط التالي: http://www.eclasshome.com/attach/upload3/wh_38264160.zip

2 thoughts on “تعرف على الأداة TableLayoutPanel.

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s