[F.Abdelaziz]

الدرس الأول :
برنامج الفيجوال ستوديو ، بيئة التطوير المتكاملة Visual Studio IDE :
تلعب بيئة التطوير المتكاملة للفيجوال ستوديو دورا محوريا فى التطوير (البرمجة) بلغة السى شارب C# . فى هذا الدرس يمكنك استعراض بيئة التطوير المتكاملة IDE هذه . سوف تتعلم كيفية إعدادها لتطوير البرمجة بلغة C# ، وتتعرف على بعض النوافذ المفيدة فى بيئة التطوير المتكاملة ووظيفتها . عند الانتهاء من هذا الدرس ، سوف تتعرف على كيفية إنشاء مشروع جديد ، والذى قد يكون ليس بالعمل الكبير ، لكنه يؤهلك للدروس التالية .

تثبيت برنامج الفيجوال ستوديو :
يمكنك تثبيت آخر إصدار مجانى من الموقع :
https://www.visualstudio.com/downloads/

سوف يتم شرح الدروس على إصدار 2015 .
تتبع تعليمات التثبيت إلى النهاية .

إعداد بيئة بيئة التطوير المتكاملة CONFIGURING THE IDE
عندما تقوم بتشغيل الفيجوال ستوديو لأول مرة ، يظهر لك المربع الحوارى المبين فى الشكل (1 – 1) ليسمح لك بإعداد IDE ( أيضا قد ترى مربعات حوارية أخرى قبل ذلك تطلب منك إنشاء حساب ، يمكنك إنشاء حساب إن لم لديك ) .



FIGURE 1-1

يتيح لك مربع الحوار اختيار إعدادات التطوير العام ، فيجوال بيسك ، فيجوال سى شارب ، ... نظرا لأنك ستركز على تطوير السى شارب ، فحدد هذا الخيار. كما يتيح لك مربع الحوار اختيار نظام ألوان ، اختار واحد منها تعتقد أنه الأفضل . انقر فوق بدء الفيجوال ستوديو Start Visual Studio (عليك أن تكون على استعداد للانتظار مرة أخرى لأن التكوين الأولي قد يستغرق بعض الوقت).
إذا أردت فى أي وقت التبديل إلى إعدادات مختلفة (على سبيل المثال، إذا اخترت في البداية الألوان الداكنة ولكن اكتشفت بعد ذلك أنها تسبب لك صداعا)، يمكنك دائما تغييرها لاحقا. للقيام بذلك :
• افتح القائمة Tool واختار Options .
• من قائمة الخيارات اختار Environment, General كما فى الشكل (1-2) .
• من قائمة Color theme اختار اللون المناسب : Blue , Dark , Light .



FIGURE 1-2

بناء برنامجك الأول :
الآن بعد تثبيت الفيجوال ستوديو ، تكون مستعدا لإنشاء أول برنامج لك . قم بتشغيل فيجوال ستوديو بالنقر المزدوج فوق رمز (أيقونة) سطح المكتب الخاص به .
عندما يبدأ الفيجوال ستوديو يجب أن يبدو مثل الشكل (1-3) . يمكنك استخدام الروابط الموجودة في الجزء الأوسط للحصول على مزيد من المعلومات حول فيجوال ستوديو وأي شيء آخر تعتقد ميكروسوفت أنه مهم .



FIGURE 1-3

يمكنك استخدام الروابط الموجودة في الجزء الأيسر لإنشاء مشروع جديد New Project… ، أو فتح مشروع موجود Open Project… . يمكنك أيضا إنشاء مشروع جديد من خلال فتح القائمة "ملف" File وتوسيع القائمة الفرعية "جديد" New وتحديد "المشروع" Project . أو إذا كنت في عجلة من امرك لإنشاء مشروعك الأول ، فقط اضغط مجموعة المفاتيح Ctrl+Shift+N . يتم عرض المربع الحوارى "مشروع جديد" New Project المبين بالشكل (1-4) . فى الجزء الأيسر قم بتوسعة مجلد أنواع مشروع الفيجوال C# ، ومن الجزء الأيمن اختار النموذج لنوع المشروع الذى سوف تقوم ببناؤه ، فى هذه الدروس سوف نستخدم لغة السى شارب فى برمجة تطبيقات نماذج الوندوز
Visual C# - Windows Forms Application .



FIGURE 1-4

بعد تحديد نوع المشروع ، تحتاج لإدخال المعلومات التالية :
• "الإسم" Name ، وهو إسم التطبيق . الفيجوال ستوديو يقوم بإنشاء مجلد بهذا الاسم ليحتفظ بداخله بملفات البرنامج . أيضا يستخدم هذا الاسم من أجل بعض القيم الخاصة فى المشروع .
• "الموقع" Location ، وهو المكان الذى تريد أن يقوم الفيجوال ستوديو بوضع مجلد المشروع فيه .
• "اسم الحل" Solution Name ، إذا تم تحديد الصندوق Create Directory for Solution ( وهو الوضع الافتراضى) ، فإن الفيجوال ستوديو يقوم بإنشاء مجلد بهذا الاسم فى الموقع الذى الذى حددته ، ويقوم بوضع مجلد التطبيق داخل مجلد الحل Solution .
ملاحظة :
المشروع Project عادة يضم الملفات التى تصنع تطبيق مفرد . الحل Solution يمكن أن يحتوى على عدة مشاريع .
بعد عرض المربع الحوارى "مشروع جديد" وإدخال الاسم ، والموقع ، واسم الحل ، انقر على OK . النتيجة تكون كما فى الشكل (1-5) .



FIGURE 1-5

بقية هذا الدرس تتناول المميزات المتوفرة فى الفيجوال ستوديو ، وبعضها معروض بالشكل السابق . قبل البدء فى معرفة المخزون من الميزات المفيدة ، افتح القائمة "تصحيح" Debug وحدد "بدء التصحيح" Start Debugging ، أو إذا كنت فى عجلة فقط اضغط على مفتاح الاختصار F5 .
برنامجك الأول يجب أن يبدو كما فى الشكل الشكل (1-6) . بالطبع ، هذا البرنامج ليس بالشىء البارع ، ولكنك أيضا لم تكن بحاجة إلى القيام بالكثير لبنائه . كل ما فعلته كان الضغط على Ctrl+Shift+N ثم F5 .



FIGURE 1-6

قد لا يبدو هذا البرنامج مثير للإعجاب بشكل رهيب ، ولكن هناك الكثير يحدث وراء الكواليس . فلقد بنيت السى شارب C# "نموذج"(فورم) Form مع مجموعة من الميزات المفيدة ، بما في ذلك :
• حدود قابلة لتغيير الحجم (تحجيم) resizable ، وشريط عنوان قابل للسحب draggable .
• أزرار تعمل على التصغيير minimize ، والتكبير maximize ، والغلق close ، فى الركن العلوى الأيمن .
• قائمة نظام فى الركن العلوى الأيسر والتى تحتوى على أوامر للعمل على الاستعادة Restore ، والتحريك Move ، والتحجيم Size ، والتصغيير Minimize ، والتكبير Maximize ، والغلق Close .
• أيقونة فى شريط مهام taskbar النظام تتيح لك غلق البرنامج .
• القدرة على استخدام المفاتيح Alt+Tab والمفاتيح Win+Tab للحركة بين التطبيق والتطبيقات الأخرى .
• سلوكيات النوافذ القياسية الأخرى . على سبيل المثال ، إذا نقرت نقرا مزدوجا على شريط عنوان النموذج (الفورم) form فإنه يتم التكبير (أو الاستعادة إذا كان مكبرا بالفعل) ، وإذا ضغطت على المفاتيح Alt+F4 يتم غلق الفورم .
ملاحظات :
• عندما يتم تشغيل البرنامج ، فإن الفيجوال ستوديو يقوم ببناء برنامج (ملف) قابل للتنفيذ ، عادة يكون فى الدليل الفرعى bin\Debug للبرنامج ،والذى يمكنك تشغيله بالنقر المزدوج عليه .
• لنسخ أو ضغط المشروع بشكل صحيح ، يتم نسح أو ضغط "الحل" solution بالكامل ، أو مجلد التطبيق ودليله الهرمى .

[F.Abdelaziz]

إستعراض بيئة التطوير المتكاملة EXPLORING THE IDE
تحتوي بيئة التطوير المتكاملة للفيجوال ستوديو على عدد كبير من القوائم menus وأشرطة الأدوات toolbars والنوافذ windows  والمعالجات wizards  والمحررات editors ومكونات الأخرى لمساعدتك في إنشاء التطبيقات. بعض من هذه ، مثل "مستكشف الحلول"  Solution Explorer  و"نافذة الخصائص" Properties window ، ستستخدمها في كل مرة تعمل فيها برنامج . وبعضها الآخر ، مثل نافذة Breakpoints والمربع الحوار Connect to Device ، تكون متخصّصة بحيث قد يستغرق الأمر سنوات قبل أن تحتاج إليها.
يوضح الشكل (1-7) بيئة التطوير المتكاملة IDE مع مشروع بسيط تم تحميله وتم وضع علامات على بعض القطع الأكثر أهمية من هذه البيئة .  توضح القائمة التالية هذه القطع .




FIGURE 1-7

1- القوائم Menus
توفر القوائم جميع أنواع الأوامر المفيدة ، بالضبط الأوامر المتاحة ، والتي يتم تمكينها ، وحتى القوائم التي تكون مرئية والتى تعتمد على أي نوع المحرر المفتوح في منطقة التحرير (رقم 4 ) . وتشمل بعض القوائم المفيدة بشكل خاص القائمة "ملف" File (فتح المشاريع القديمة وإنشاء مشاريع جديدة) ، والقائمة "عرض" View (العثور على النوافذ )، والقائمة "مشروع" Project  (إضافة "نماذج" forms جديدة وغيرها من العناصر إلى مشروع)، والقائمة "تصحيح" Debug  (بناء وتشغيل وتصحيح المشروع)، والقائمة "تنسيق" Format ( ترتيب عناصر التحكم أو الضوابط controls على الفورم ).

2- أشرطة الأدوات Toolbars
توفر أشرطة الأدوات اختصارات لتنفيذ الأوامر المشابهة لتلك الموجودة في القوائم . يستخدم الأمر Customize بالقائمة "أدوات" Tools لتحديد أى من أشرطة الأدوات تكون مرئية.

3- مستكشف الحل Solution Explorer
يسرد مستكشف الحل الملفات في المشروع . واحد من أهمها الملف Form1.cs ، الذي يحدد عناصر التحكم controls والكود للنموذج (الفورم) المسمى Form1. إذا قمت بالنقر نقرا مزدوجا فوق ملف في "مستكشف الحل"، فإن الفيجوال ستوديو يقوم بفتحه في منطقة التحرير.

4- منطقة التحرير Editing Area
تعرض منطقة التحرير الملفات في المحررات المناسبة . في معظم الأحيان سوف تستخدم هذه المنطقة لتصميم "نماذج" forms (ووضع عناصر التحكم controls عليها وضبط خصائصها ) وكتابة التعليمات البرمجية (الكود) للنماذج ، ولكن يمكنك أيضا استخدام هذه المنطقة لتحرير ملفات أخرى مثل الملفات النصية والصور النقطية والرموز.

5- صندوق الأدوات Toolbox
يحتوي صندوق الأدوات على "عناصر التحكم" controls والمكونات التي يمكنك وضعها على "نموذج" form .
حدد "أداة" tool (بنقرها) ثم انقر واسحب لوضع نسخة من هذه الأداة على النموذج . لاحظ أن مجموعات أدوات التحكم في علامات تبويب ("جميع نماذج الويندوز" All Windows Forms ، "عناصر التحكم المشتركة" Common Controls ، و"الحاويات" Containers و"القوائم وأشرطة الأدوات" Menus & Toolbars ، وهلم جرا) لجعل العثور على عناصر التحكم التي تحتاج إليها أسهل) .

6- نافذة الخصائص Properties Window
تتيح لك نافذة الخصائص تعيين خصائص عناصرالتحكم controls . انقر فوق عنصر تحكم في مصمم النماذج Form Designer (يظهر في منطقة التحرير في الشكل (1-7) ) لتحديده ، أو انقر واسحب لتحديد عناصر تحكم متعددة . ثم استخدم نافذة الخصائص لتعيين خصائص عنصر/ عناصر التحكم . لاحظ أن الجزء العلوي من نافذة الخصائص يظهر "الاسم" name (Form1) ونوع (System.Windows.Forms.Form) عنصر التحكم المحدد حاليا . الخاصية المحددة حاليا في الشكل (1-7) هي "النص" Text ، ولها القيمة Form1 . ستقضي الكثير من الوقت في العمل مع نافذة الخصائص .

7- وصف الخاصية Property Description
وصف الخاصية يعطيك تذكير عن الغرض من الخاصية الحالية . في الشكل 1-7) ، تذكر بأن خاصية النص Text تعطي النص المقترن بعنصر التحكم .

8- نوافذ أخرى Other Windows
تحتوي هذه المنطقة عادة على نوافذ أخرى مفيدة . علامات التبويب في أسفل تمكنك من التبديل بسرعة بين النوافذ المختلفة.

ويبين الشكل (1-7) ترتيب (تنظيم) نموذجي ، إلى حد ما ، من النوافذ ، ولكن الفيجوال ستوديو مرن للغاية بحيث يمكنك إعادة ترتيب النوافذ إذا أردت . يمكنك إخفاء النوافذ أو إظهارها أو جعل النوافذ "عائمة" floating  أو "راسية" (مربوطة) docked للأجزاء المختلفة من بيئة التطوير المتكاملة ، وجعل النوافذ جزءا من مجموعة علامات تبويب ، وجعل النوافذ تخفى نفسها تلقائيا إذا كنت لا تحتاج إليها باستمرار.

إذا نظرت عن كثب إلى الجانب الأيمن من شريط العنوان أعلى أحد النوافذ في الشكل (1-7) (على سبيل المثال، نافذة الخصائص) ، فستشاهد ثلاثة رموز: سهم منسدل ، ودبوس إصبع ، وعلامة x .
إذا نقرت على السهم المنسدل (أو انقر بزر الماوس الأيمن على شريط عنوان النافذة)، فستظهر قائمة تتضمن الخيارات التالية:
• تعويم (طفو) Float
تصبح النافذة خالية من أى رسو (رباط) وتطفو فوق بيئة التطوير . يمكنك سحبها هنا وهناك ، وسوف لا يتم إعادة رسوها (ربطها) . لجعلها قابلة للرسو مرة أخرى، افتح القائمة مرة أخرى وحدد "رسو" Dock .
• رسو (رباط)  Dock
تصبح النافذة قابلة للرسو إلى الأجزاء المختلفة من بيئة التطوير . سوف نتناول ذلك قريبا .
• رسو كوثيقة مبوبة  Dock as Tabbed Document  
تصبح النافذة علامة تبويب في منطقة مبوبة مشابهة لما في الشكل (1-7)  رقم 8 . لسوء الحظ ، فإنه ليس من الواضح دائما أي منطقة سوف تنتهي إليها النافذة . لجعل النافذة علامة تبويب في منطقة محددة مبوبة ، اجعلها قابلة للرسو وسحبها إلى علامة تبويب (سوف يتم شرح ذلك قريبا ) .
• الإخفاء التلقائى Auto Hide
وفيه تقلص النافذة نفسها إلى ملصق صغير عالق على أحد حواف بيئة التطوير ويتحول رمز الدبوس إلى جهة الجانب للإشارة إلى أن النافذة تختبئ تلقائيا . إذا قمت بتعويم الماوس فوق الملصق ، تظهر النافذة . طالما يبقى الماوس على النافذة الموسعة ، فإنها تبقى على وضعها، ولكن إذا قمت بتحريك الماوس من على النافذة ، فإنها تخفي نفسها مرة أخرى (مثل الصرصار عند تشغيل الأضواء) . حدد إخفاء تلقائي مرة أخرى أو انقر على علامة الدبوس الجانبية لإيقاف الإخفاء التلقائي . الإخفاء التلقائى يجعل الطريق خالى حتى تتمكن من العمل في منطقة تحرير أكبر.

• الإخفاء Hide
وفيه تختفي النافذة تماما. للحصول على النافذة مرة أخرى ، سوف تحتاج إلى العثور عليها في مكان ما في التشكيلة المحيرة من القوائم . يمكنك العثور على العديد من النوافذ الأكثر فائدة في القائمة "عرض" View  ، والقائمة الفرعية Other Windows  ، ومن القائمة الفرعية   Windowsبالقائمة Debug .
يعمل رمز الدبوس الموجود في شريط عنوان النافذة تماما كما يفعل الأمر إخفاء تلقائي من القائمة المنسدلة . انقر على الدبوس لتشغيل ميزة الإخفاء التلقائي . قم بتوسيع النافذة وانقر على الدبوس الجانبى لإيقاف الإخفاء التلقائي .
الرمز X  في شريط عنوان النافذة يخفي النافذة تماما مثل القائمة المنسدلة في الأمر إخفاء.

بالإضافة إلى استخدام قائمة شريط عنوان النافذة والرموز، يمكنك سحب النوافذ إلى مواقع جديدة. طالما أن النافذة تكون قابلة للإرساء أو تكون جزء من نافذة مبوبة ، يمكنك الإمساك بشريط العنوان وسحبه إلى موضع جديد.
أثناء سحب النافذة ، تعرض بيئة التطوير "علامات الهدف" لتمكنك من إرساء النافذة في الأماكن المختلفة . إذا قمت بتحريك النافذة بحيث يكون الماوس فوق علامة هدف ، فإن بيئة التطوير تعرض منطقة زرقاء شفافة لإظهار مكان النافذة إذا قمت بإسقاطها. إذا قمت بإسقاط النافذة عندما يكون الماوس ليس فوق علامة هدف ، فإن النافذة تصبح عائمة.
يبين الشكل (1-8) نافذة الخصائص والتي يتم سحبها في بيئة التطوير . الماوس فوق علامة الهدف اليمنى فوق منطقة التحرير لذلك ، كما تظهر المنطقة الزرقاء الشفافة ، إسقاطها هناك سوف يرسى النافذة إلى الجانب الأيمن من منطقة التحرير. الصورة بها نوع من الفوضى ، ولكن ليس من الصعب جدا أن ترى ما يحدث إذا حاولت (جربت) .



FIGURE 1-8

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

[F.Abdelaziz]

الدرس الثانى :
إنشاء عناصر التحكم Creating Controls :
في هذا الدرس ، سوف تتعلم كيفية إضافة عناصر تحكم controls إلى النموذج form . وتتعلم كيفية التحكم فى حجم ، ومكان ، وترتيب عناصر التحكم . وسوف تتعلم أيضا كيفية استخدام خصائص العنصر لتغيير مظهره وسلوكه في وقت التصميم وفي وقت التشغيل . عند الانتهاء من هذا الدرس ، ستتمكن من إنشاء نموذج form احترافي .

فهم عناصر التحكم UNDERSTANDING CONTROLS
عنصر التحكم هو كيان برمجة يجمع بين مظهر مرئي على الشاشة وكود لإدارته. يحدد الكود (التعليمات البرمجية) مظهر وسلوك عنصر التحكم . على سبيل المثال ، يعرض عنصر التحكم "مربع نص" TextBox مساحة فارغة على الشاشة حيث يمكن للمستخدم كتابة المعلومات . يحدد الكود داخل عنصر التحكم كيف يرسم عنصر التحكم نفسه ، ويوفر ميزات مربع النص العادي مثل سلوك تعدد الأسطر أو سطر واحد . وعرض أشرطة التمرير حسب الحاجة ،  والنسخ ، والقص ، واللصق ؛ وعرض قائمة السياق عند النقر بزر الماوس الأيمن فوق عنصر التحكم ، والقدرة على التنقل عندما يضغط المستخدم على مفتاح التبويب  Tab ، والكثير .. الكثير .

ملحوظة : ماذا عن اسم العنصر؟
حسب ما تم الاتفاق عليه ، فى السى شارب ، أسماء عناصر التحكم تبدأ بحرف كبير ، مثل Button  ، وفى حالة الاسم المكون من كلمات متعددة يتم ربطها إلى جانب بعضها البعض على أن يكون الحرف الأول من كل كلمة حرف كبير ، على سبيل المثال TextBox , PictureBox .

بالإضافة إلى "عناصر التحكم" controls ، فإن C# يوفر "المكونات" components . "المكون" يشبه عنصر التحكم إلا أنه لا يوجد قطعة مرئية على النموذج form . على سبيل المثال ، مكون "المؤقت" Timer  يعمل كساعة للسماح للبرنامج القيام بشيء ما على فترات منتظمة . المؤقت يتفاعل مع البرنامج ولكن لا يعرض أي شيء مرئي للمستخدم .

تنقسم ملامح عناصر التحكم (والمكونات) إلى ثلاث فئات : الخصائص Properties والأساليب Methods والأحداث Events.

الخصائص Properties :
تحدد الخاصية مظهر وحالة عنصر التحكم . فإذا كانت "السيارة" Car  هي عنصر تحكم ، فإن خصائصها ستكون مثل اللون Color ، نوع النقل TransmissionType ، السرعة الحالية CurrentSpeed ، عدد حوامل الأكواب NumberOfCupHolders  .
برنامجك يمكن أن يقوم بتعيين لون السيارة ليكون  HotPink  (لجذب انتباه السائقين الآخرين) أو تعيين سرعتها الحالية بالقيمة  110( لجذب انتباه الشرطة) .
وعلى سبيل المثال ، عنصر التحكم  "مربع نص" TextBox له خاصية "الخط" Font والتى تحدد الخط الذى يستخدمه ، وخاصية ForeColor التى تحدد لون النص بداخله .

الأساليب Methods :
الأسلوب Method هو سمة لعنصر التحكم والذي يجعل عنصر التحكم ينفذ بعض الأفعال (الإجراءات). فالكود الخاص بك يمكن أن يستدعى call "إسلوب" method لجعل عنصر التحكم يقوم بفعل شيئا ما . على سبيل المثال ، قد يكون لعنصر التحكم Car أساليب مثل "البدء" Start و "الإيقاف" Stop و "نزول الراكب" EjectPassenger  وغيرها . يمكن للبرنامج استدعاء أى من هذه الأساليب .
وعلى سبيل المثال ، يحتوي مربع النص على الإسلوب Clear ، الذى يقوم بتفريغ (مسح) النص ، والإسلوب AppendText     ، الذى يضيف نصا إلى نهاية كل ما يعرضه عنصر التحكم حاليا.

الأحداث Events :
يحدث الحدث عندما يحدث شيء مثير للاهتمام لعنصر التحكم . يشعل fire عنصر التحكم الحدث ليقول للبرنامج أن شيئا ما قد حدث . على سبيل المثال ، قد يكون لعنصر التحكم Car أحداث مثل RanOutOfGas و Crashed  . عنصر التحكم Car سوف يشعل (يطلق) الحدث Crashed  لإخبار البرنامج بأن المستخدم قد اصطدم بشجرة . عندئذ يمكن للبرنامج اتخاذ إجراءات مثل استدعاء سيارة إسعاف .
وعلى سبيل المثال ، يحتوي مربع النص TextBox على حدث "النص قد تغير"  TextChanged  والذي يخبر البرنامج أن النص قد تغير. عند حدوث الحدث ، يمكن للبرنامج فحص النص لمعرفة ما إذا كان المستخدم قد أدخل إدخال صحيح . على سبيل المثال ، إذا كان مربع النص يجب أن يحمل عددا وأدخل المستخدم “One”   يمكن للبرنامج إطلاق صفير (بيب) وتغيير الخاصية BackColor الخاصة بمربع النص إلى "الأصفر" Yellow للإشارة إلى خطأ.

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

إنشاء عناصر التحكم CREATING CONTROLS :
إضافة عناصر التحكم إلى نموذج أمر سهل ، في الواقع سهل جدا ، فهناك العديد من الطرق المختلفة لإضافة عناصر التحكم إلى النموذج (الفورم) وهذا يستغرق بعض الوقت لوصف كل منها .

إبدأ بإنشاء مشروع جديد كما هو موضح في الدرس الأول . افتح النموذج في مصمم النماذج (إذا لم يكن النموذج مفتوحا بالفعل ، فانقر عليه نقرا مزدوجا في مستكشف الحلول) .
فيما يلى وصف لبعض الطرق التي يمكنك من خلالها وضع عناصر التحكم في النموذج :
1- انقر على "أداة" tool عنصر التحكم فى صندوق الأدوات ToolBox لتحديدها (اختيارها) . ثم انقر على النموذج واسحب الماوس . عند تحرير الماوس فإن الفيجوال ستوديو يقوم بإنشاء عنصر التحكم في المنطقة التي حددتها ثم يحدد المؤشر Pointer في صندوق الأدوات.
2- انقر على أداة في صندوق الأدوات لتحديدها . ثم اضغط باستمرار على مفتاح Ctrl أثناء النقر والسحب على النموذج لوضع نسخة من عنصر التحكم في النموذج . عند تحرير الماوس فإن فيجوال ستوديو يقوم بإنشاء عنصر التحكم في المنطقة التي حددتها ويحافظ على أداة التحكم المحددة في صندوق الأدوات بحيث يمكنك إجراء وضع عنصر تحكم آخر من هذا النوع .
3- انقر نقرا مزدوجا فوق أداة في صندوق الأدوات لإنشاء مثيل لعنصر التحكم في النموذج في الحجم والمكان الافتراضي . (ستحتاج على الأرجح إلى تغيير الحجم وتغيير المكان ).
4- حدد واحد أو أكثر من عناصر التحكم الموجودة بالفعل في النموذج (النقر ثم السحب على مساحة ) ، واضغط على Ctrl+C  لنسخها ، ثم اضغط على Ctrl+V  للصقها في النموذج .
5- حدد عنصر تحكم واحد أو أكثر في النموذج . أثناء الضغط مع الاستمرار على مفتاح Ctrl ، اسحب عناصر التحكم إلى موقع جديد. يقوم فيجوال ستوديو بعمل نسخة من عناصر التحكم ، وترك النسخة الأصلية حيث بدأت .

ملحوظة :
لديك عدة طرق لتحديد عناصر التحكم في مصمم النماذج . النقر على عنصر التحكم لتحديده . النقر والسحب لتحديد عناصر تحكم متعددة .
اضغط باستمرار على المفتاح Shift أو Ctrl أثناء النقر أو النقر والسحب للتبديل فيما إذا كانت عناصر التحكم في التحديد الحالي أم لا.
وإذا أردت إلغاء تحديد جميع عناصر التحكم ، فانقر على جزء فارغ من النموذج أو اضغط على Esc  .
الطريقة الأولى (حدد أداة ثم انقر ثم اسحب لإنشاء عنصر تحكم) غالبا ما تستخدم في معظم الأحيان ، ولكن بعض الطرق الأخرى مفيدة بشكل خاص لإنشاء مجموعات من عناصر تحكم مماثلة.
على سبيل المثال ، الفورم بالشكل (2-1)  يعرض خمسة صفوف ، كل منها يتضمن تسمية Label  و مربع نص TextBox. يمكن بسهولة بناء كل من عناصر التحكم هذه بشكل فردي ، ولكن يمكنك بناؤها بشكل أسرع باستخدام النسخ واللصق . فى البداية يتم وضع تسمية واحدة و مربع نص واحد على النموذج ، ثم ترتيبها بجانب بعضها البعض ، وإعطائها أي قيم للخواص المشتركة . (على سبيل المثال ، قد ترغب في تعيين الخطوط أو الألوان) . الآن انقر واسحب لتحديد كل من عنصرى التحكم ، وانسخ والصق ، واسحب عناصر التحكم الجديدة إلى الموضع المطلوب . كرر هذه العملية ثلاث مرات أخرى وسيكون لديك جميع عناصر التحكم فى مكانها . سيظل عليك تغيير نص "التسميات" Labels’ text  ولكن سيتم إجراء الترتيب الأساسي بدون الانتقال إلى صندوق الأدوات ذهابا وإيابا .



FIGURE 2-1

تعيين (ضبط) خصائص عنصر التحكم SETTING CONTROL PROPERTIES
بعد إضافة عناصر التحكم إلى النموذج ، يمكنك استخدام نافذة الخصائص لعرض قيم الخاصية وتغييرها. إذا كان لديك أكثر من عنصر تحكم محدد ، تعرض نافذة الخصائص فقط الخصائص التي تكون عناصر التحكم مشتركة فيها .
على سبيل المثال ، إذا قمت بتحديد مربع نص TextBox و تسمية Label ، تعرض نافذة الخصائص خاصية النص Text لأن كل منهما لها خاصية النص . ومع ذلك ، لن يتم عرض خاصية تعدد الأسطر لأن عنصر تحكم مربع النص يحتوي على هذا الخاصية ولكن عنصر التحكم تسمية لا يحتوى على هذه الخاصية .
توفر نافذة الخصائص دعم خاص للعديد من خصائص التحكم . على سبيل المثال ، يعرض الشكل (2-2) نافذة الخصائص عند تحديد مربع نص TextBox .



FIGURE 2-2

لاحظ أن خاصية الخط Font تحتوي على خصائص فرعية خاصة بها : Name, Size, Unit, Bold وغيرها . انقر على علامة الزائد أو الناقص بجوار الخاصية لتوسيعها أو تصغيرها لإظهار أو إخفاء خصائصها الفرعية.
لاحظ أيضا في الشكل (2-2) رمز الانتقال (…) الموجود إلى يمين خاصية الخط . إذا نقرت عليه ، يظهر مربع الحوار الموضح في الشكل (2-3) . يمكنك استخدام مربع الحوار هذا لتعديل الخصائص الفرعية للخط ورؤية نموذج (عينة) من الخط .



FIGURE 2-3



يعرض الشكل (2-4) المحرر الذي يعرض نافذة الخصائص عند النقر فوق السهم المنسدل إلى يمين الخاصية BackColor لمربع النص . تتيح لك علامة التبويب Custom  اختيار لون من لوحة الألوان ، وتتيح لك علامة التبويب Web اختيار ألوان صفحة الويب القياسية ، وتتيح لك علامة التبويب System اختيار ألوان النظام مثل لون خلفية التحكم العادي أو لون تمييز القائمة.



FIGURE 2-4
باستخدام محررات نافذة الخصائص وكتابة القيم عندما لا يكون هناك محرر، يمكنك تغيير مظهر عنصر التحكم وسلوكه.

أسماء عناصر التحكم Control Names Control Names
كلما قمت بإنشاء عنصر تحكم ، فإن الفيجوال ستوديو يعطيه اسم غير موضح نوعا ما مثل label2 أو TextBox5 أو pictureBox1 . على الرغم من أن هذه الأسماء تخبرك عن نوع العنصر الذي يتم التحكم فيه ، إلا أنها لا تخبرك بما هو من أجله ، وهذا أكثر أهمية عند الحاجة لاحقا لاستخدام عنصر التحكم في التعليمات البرمجية (الكود) . الأسماء مثل  firstNameTextBox, hatSizeTrackBar, mediaTypeComboBox   تكون أكثر وضوحا بكثير من TextBox3 و TextBox7.
لاحظ أنك لا تحتاج إلى إعطاء أسماء جيدة لكل عنصر تحكم ، فقط تلك التي سوف تحتاج إلى استخدامها في وقت لاحق في الكود . ففي كثير من الأحيان لا تحتاج إلى تسمية التسميات Labels ، GroupBoxes  ، وغيرها من عناصر التحكم الزخرفية decorative البحتة.

الخصائص الشائعة  Popular Properties
الجدول (1-2) يلخص بعض من الخصائص الأكثر فائدة . لاحظ أنه  ليست كل عناصر التحكم تحتوي على كل خاصية . على سبيل المثال، "الزر" Button  لا يمكنه أن يعرض الحدود border (أو أنه يعرض دائما الحدود اعتمادا على نقطة رؤيتك ) لذلك فهو لا يحتوي على خاصية BorderStyle .
الخاصية ، والوصف
Anchor
تحديد كيف يقوم عنصر التحكم بتغيير حجم نفسه لاستخدام المساحة المتوفرة. سوف يتم وصف هذه الخاصية بشكل أكبر في الدرس الثالث .
AutoSize
تحديد ما إذا كان عنصر التحكم يعيد حجمه تلقائيا ليتناسب مع محتوياته. ويمكن أن يكون True أو False . فى الوضع الافتراضى ، تولد التسميات Labels مع AutoSize = True
BackColor
تحديد لون خلفية عنصر التحكم .
BackgroundImage
تحديد الصورة التي يعرضها نصر التحكم.
BorderStyle
تحديد ما إذا كان عنصر التحكم يعرض الحدود . يمكن أن يكون
FixedSingle, Fixed3D None,
Dock
تحديد كيف يقوم عنصر التحكم بتغيير حجم نفسه لاستخدام المساحة المتوفرة. سوف يتم وصف هذه الخاصية بشكل أكبر في الدرس الثالث .
Enabled
تحديد ما إذا كان عنصر التحكم سيتفاعل مع المستخدم أم لا. العديد من عناصر التحكم تظهر مظهر خاص عند التعطيل مثل اللون الرمادي . قيمة هذه الخاصية يمكن أن تكون True أو False .
Font
تحديد الخط الذي يستخدمه عنصر التحكم لعرض النص .
ForeColor
تحديد لون المقدمة في عنصر التحكم . بالنسبة إلى عناصر التحكم التي تعرض النص ، تكون هذه الخاصية عادة لون النص.
Image
تحديد الصورة التي يعرضها عنصر التحكم . (بعض عناصر التحكم يكون لها صورة ، والبعض الآخر يكون لديه صورة خلفية BackgroundImage  ، وعدد قليل منهم يكون لديهم الاثتين على حد سواء ، والكثير منها لا يعرض أي صورة) .
Items
بالنسبة إلى عناصر التحكم مثل ListBox , ComboBox  ،  فهذه قائمة بالعناصر (البنود) items التي يمكن للمستخدم تحديدها .
Location
يعطي موقع عنصر التحكم بالبكسل من الزاوية العلوية اليسرى من أي شيء فيه (في الوقت الراهن ، افترض أنه في نموذج form ). يتضمن الموقع الخصائص الفرعية X و Y. على سبيل المثال ، القيمة (10, 20) تعني أن عنصر التحكم يكون على بعد 10 بكسل من الحافة اليسرى للنموذج (X) و 20 بكسل من الحافة العلوية له (Y) .
Name
يعطى عنصر التحكم اسما يمكن أن يستخدمه الكود للإشارة إليه لاحقا. يجب عليك دائما إعطاء اسم جيد لأي عنصر تحكم ستشير إليه في الكود .
Size
يعطي عرض عنصر التحكم وارتفاعه بالبكسل . على سبيل المثال، القيمة 30)   (75,   تعنى أن عنصر التحكم بعرض 75 بكسل وطول (ارتفاع)  30 بكسل .
Tag
يمكن لهذه الخاصية الاحتفاظ بأي قيمة تريد تخزينها مع عنصر التحكم . على سبيل المثال ، قد تضع نصا أو رقما في خصائص العلامة ( وسم ، ملصق) Tag  لبعض الأزرار حتى يتمكن الكود من معرفة الأزرار بسهولة .
Text
تحتوي العديد من عناصر التحكم على خاصية النص Text تحدد ما الذي يعرضه عنصر التحكم . للتسميات Labels  وصناديق النص  TextBoxes ، النص Text يحدد النص الذي يظهره (واضح جدا) . بالنسبة إلى عناصر التحكم مثل ComboBoxes , ListBoxes ، يحدد النص التحديد الحالي لعنصر التحكم . بالنسبة للنموذج form ، وهو بالمعنى الحقيقي نوع آخر من عناصر التحكم ، يحدد النص ما يتم عرضه في شريط العنوان .
TextAlign
لتحديد كيفية محاذاة النص داخل عنصر التحكم .
Visible
لتحديد ما إذا كانت عنصر التحكم مرئيا أم لا. يمكن أن يكون هذا True أو False . يتم تعيينها إلى False لإخفاء عنصر تحكم من المستخدم .

إذا كنت تريد بعض الممارسة (التمرين) على هذه الخصائص ، قم بإنشاء مشروع جديد وجرب المحاولة مع هذه الخصائص . قم بإنشاء زر Button  وتعيين خاصية النص Text الخاصة به. انقر أيضا على النموذج form وقم بتعيين الخاصية Text . قم بتغيير خاصية الخط Font الخاصة بالنموذج واطلع على ما يحدث للنموذج والزر الذي يحتوي عليه. جرب بعض الخصائص الأخرى مثل Image و ForeColor إذا أردت .

تعديل الخصائص في الكود Modifying Properties in Code
هذا الدرس لا يذهب حقيقة إلى التعامل مع (معالجة) أحداث عنصر التحكم كثيرا (فهذا هو موضوع الدرس الرابع ) ، ولكنى أريد أن أشرح "كيفية تعيين (ضبط) الخصائص في الكود" ، فأنت تحتاج إلى معالجات الحدث event handlers للقيام بذلك . الى جانب ذلك ، فهى سهلة ونوع من المتعة ، وسوف تتيح لك القيام بعمل البرنامج الذي يفعل شيئا ، وليس مجرد الجلوس .
لعمل "معالج حدث" event handler بسيط لعنصر تحكم ، انقر نقرا مزدوجا فوق عنصر التحكم في نافذة مصمم النماذج Form Designer ، يؤدي ذلك إلى فتح محرر الكود Code Editor وإنشاء "معالج حدث" فارغ للحدث الافتراضي لعنصر التحكم . بالنسبة إلى عناصر تحكم الأزرار Button ، هذا الحدث يكون "النقر" Click . كلما نقر المستخدم على عنصر التحكم في "وقت التشغيل" ، فإنه يشعل (يطلق) حدث النقر ويتم تنفيذ هذه الكود .
لتغيير خاصية في الكود ، اكتب اسم name عنصر التحكم ، ثم نقطة (.) ، ثم اسم الخاصية ، ثم علامة تساوي ، وأخيرا القيمة التي تريد أن تعطيها للخاصية . يتم إنهاء سطر الكود بالفاصلة المنقوطة ( . على سبيل المثال ، العبارة التالية تحدد الخاصية Left للتسمية label المسماة باسم greetingLabel بالقيمة “100” . يؤدي ذلك إلى نقل التسمية بحيث تكون على بعد “100” بكسل من الحافة اليسرى لحاويتها :

greetingLabel.Left = 100;

الكود التالى يبين "معالج الحدث" بالكامل :

 // Move the Label.
private void moveLabelButton_Click(object sender, EventArgs e)


{
greetingLabel.Left = 100;
}

في هذا الكود ، كتبت السطر الأول الذي يبدأ بالأحرف (//) . هذا السطر هو "تعليق" comment ، وهو قطعة من النص والذي يرد في الكود ولكن لا يتم تنفيذه من قبل البرنامج . يتم تجاهل أي نص يأتي بعد الأحرف (//) وحتى نهاية السطر الحالي . يمكنك أن تستخدم (وينبغي أن تستخدم) التعليقات لجعل الكود أسهل فى الفهم . فأنها لا تجعل البرنامج القابل للتنفيذ أكبر أو أبطأ ، لذلك لا تكون بخيلا مع تعليقاتك.
كما قمت بكتابة السطر الذي يحدد الخاصية Left للتسمية.
الفيجوال ستوديو كتب البقية عندما نقرت نقرا مزدوجا فوق الزر (عنصر التحكم) المسمى "زر حركة التسمية" moveLabelButton . لا داعي للقلق بشأن تفاصيل هذا الكود في الوقت الراهن ، ولكن باختصار البارامتر sender هو الكائن الذي يشعل الحدث (الزر في هذا المثال) والبارامتر e يعطي معلومات إضافية حول الحدث . المعلومات الإضافية قد تكون مفيدة لبعض الأحداث (على سبيل المثال ، في حدث "نقر الماوس" MouseClick فإنه يخبرك بالمكان حيث تم النقر على الماوس)، ولكنه ليس مثير للاهتمام جدا لحدث مثل "النقر" على الزر .
القيم الرقمية (العددية) البسيطة مثل “100” المستخدمة في هذا المثال تكون من السهل تعيينها في الكود ، ولكن بعض الخصائص ليست أرقام (أعداد) . في هذه الحالة ، يجب عليك تعيينها بالقيم التي لها نوع البيانات المناسبة.
على سبيل المثال ، الخاصية Text للتسمية عبارة عن قيمة سلسلة نصية string لذلك يجب أن تعطي قيمة سلسلة نصية . فى الكود التالى يتم تعيين الخاصية "نص" Text للتسمية المسماة greetingLabel بالسلسلةالنصية Hello :

greetingLabel.Text = "Hello";

ملاحظة :
لاحظ أنه يجب تضمين السلسلة النصية Hello في علامات اقتباس مزدوجة لإخبار C# أن هذه تكون سلسلة حرفية وليس نوعا من أوامر C# . إذا نسيت علامات الاقتباس ، فإن C# يحصل له خلط ويعطيك الخطأ :
“The name ‘Hello’ does not exist in the current context.”
مع مرور الوقت، سوف تعتاد على رسائل مثل هذه وسوف تكون منطقية. في هذه الحالة ، الرسالة تعني فقط :
“I don’t know what the word ‘Hello’ means.”

قيم الخصائص الأخرى لها أنواع بيانات أكثر غرابة مثل Date, AnchorStyles, Point, BindingContext . عند تعيين هذه الخصائص ، يجب التأكد من أن القيم التي تعطيها لها يكون لهل أنواع البيانات الصحيحة. سوف أتجاهل معظمها الآن ، ولكن أحد أنوع البيانات البسيطة نسبيا والمفيد هو نوع "اللون" Color .
الخصائص ForeColor و BackColor لعنصر التحكم لديها نوع البيانات Color لا يمكنك ببساطة تعيين قيمة لها مساويا لسلاسل نصية strings مثل الأحمر Redأو الأزرق Blue . بدلا من ذلك يجب تعيينها بقيمة تساوي شيء يحتوي أيضا على نوع اللون Color . أسهل طريقة للقيام بذلك هي استخدام الألوان المحددة مسبقا من قبل فئة اللون Color class . قد يبدو هذا مربكا بعض الشيء، ولكن في الواقع هى سهلة جدا .
على سبيل المثال ، العبارات التالية تحدد الخواص BackColor , ForeColor لعنصر التسمية Label بالقيم HotPink , Blue على التوالي:

greetingLabel.BackColor = Color.HotPink;
greetingLabel.ForeColor = Color.Blue;

الكود التالى يوضح كيفية تغيير العديد من خواص عنصر التسمية Label عند النقر على عنصر المفتاح Button المسمى moveLabelButton :

// Change a Label's properties.
private void moveLabelButton_Click(object sender, EventArgs e)
{
greetingLabel.Left = 100;
greetingLabel.Text = "Hello";
greetingLabel.BackColor = Color.HotPink;
greetingLabel.ForeColor = Color.Blue;
}

[F.Abdelaziz]

ترتيب (تنظيم) عناصر التحكم ARRANGING CONTROLS
يوفر مصمم النماذج Form Designer العديد من الأدوات لمساعدتك في ترتيب عناصر التحكم في وقت التصميم . تصف الأقسام التالية بعض منها وهى الأكثر فائدة : خطوط الدليل (العلام) ، مفاتيح الأسهم ، قائمة التنسيق ، وشريط أدوات التخطيط .

خطوط الدليل (العلامة ) Snap Lines
عندما تقوم بسحب عنصر تحكم فى أنحاء النموذج ، يعرض مصمم النموذج خطوط الدليل التي تظهر كيف يتطابق عنصر التحكم مع النموذج ومع عناصر التحكم الأخرى .
يوضح الشكل (2-5) مصمم النموذج و خطوط الدليل ، باللون الأزرق الفاتح ، تشير إلى أن عنصر التحكم يكون على مسافات قياسية بعيدا عن الحافة العليا والحافة اليسرى للنموذج .



FIGURE 2-5

يمكنك سحب عنصر التحكم بعيدا عن هذا الوضع ، وإذا قمت بذلك ، تختفي خطوط الدليل (العلامة) . عند سحب عنصر التحكم بالقرب من أحد حواف النموذج ، يقفز عنصر التحكم إلى المسافة القياسية ويعرض مصمم النموذج خطوط الدليل مرة أخرى .
يعرض مصمم النماذج أيضا خطوط الدليل لإظهار كيفية محاذاة عناصر التحكم . في الشكل (2-6) ، تم سحب الزر الثاني تحت الزر الأول .



FIGURE 2-6

خطوط الدليل المختلفة تبين أن :
• الزر الثاني يكون على المسافة القياسية من الحافة اليسرى للنموذج .
• تتطابق الحواف اليسرى واليمنى الزر الثاني مع الحواف المناظرة للزر الأول .
• الزر الثاني يكون على مسافة قياسية أسفل الزر الأول .

خطوط الدليل الأخرى تبين كيفية اصطفاف محتويات عنصر التحكم . في الشكل (2-7) خطوط الدليل تبين أن التسمية Greetings تكون على المسافة القياسية من الزر الثاني وأن خط أساس "نص" Text التسمية يصطف مع خط أساس :نص" الزر الثاني .



FIGURE 2-7


للحصول على مثال أكثر واقعية ، انظر إلى الشكل (2-8) . في هذا الشكل تم تخطيط نموذج form صغير لإدخال البيانات ، والمطلوب اصطفاف التسميات ومربعات النص بشكل أنيق . في هذا الشكل ، تظهر خطوط الدليل أن "نص" مربع نص الشارع Street يصطف على اليسار واليمين مع مربعات النص الآخرى ، وأنه يكون على مسافة قياسية من مربع النص أعلاه وأدناه ، وهو على مسافة قياسية من الحافة اليمنى للنموذج ، وله خط أساس مصطف مع "تسمية" الشارع Street.



FIGURE 2-8

مفاتيح الأسهم Arrow Keys
بالإضافة إلى سحب عناصر التحكم باستخدام الماوس ، يمكنك نقل عناصر التحكم عن طريق الضغط على مفاتيح الأسهم . حدد عنصر تحكم واحد أو أكثر، ثم استخدم مفاتيح الأسهم لليسار واليمين ولأعلى ولأسفل لنقل move عنصر / عناصر التحكم واحد بكسل في المرة الواحدة . هذه الطريقة أبطأ من استخدام الماوس ولكن تمنحك تحكم أدق .
عند نقل عناصر التحكم باستخدام مفاتيح الأسهم ، لا يعرض "مصمم النماذج" خطوط الدليل لذلك قد ترغب في إبقاء العين على الخاصية "موقع" Location عنصر التحكم في نافذة الخصائص لمعرفة أين هو.

قائمة التنسيق Format وشريط أدوات التخطيط Layout Toolbar
تحتوي قائمة التنسيق Format على العديد من الأوامر التي ترتب عنصر تحكم واحد أو أكثر. يلخص الجدول (2-2) القوائم الفرعية لقائمة التنسيق.

القائمة الفرعية الوصف

Align
محاذاة مجموعات من عناصر التحكم لجهة يسارها lefts ، أو منتصفها middles ، أو يمينها rights ، أو أعلاها tops ،أو أسفلها bottoms ، أو فى مراكزها ) (وسطها) centers .

Make Same Size
لجعل عناصر التحكم لها نفس العرض width أو الارتفاع height أو كليهما.

Horizontal Spacing
لضبط التباعد الأفقي بين عناصر التحكم . يمكنها أن تجعل المسافة بين عناصر التحكم متساوية ، أصغر، أكبر، أو صفر.

Vertical Spacing
تعمل مثل القائمة الفرعية "تباعد أفقي" إلا أنها تضبط "التباعد الرأسي" بين عناصر التحكم .

Center in Form
تمركز عناصر التحكم "رأسيا" أو "أفقيا" في حاويتها . إذا كانت عناصر التحكم داخل حاوية مثل اللوحة Panel أو مربع مجموعة GroupBox ، فإن هذه الأوامر تمركز عناصر التحكم داخل الحاوية ، وليس النموذج .

Order
ترسل هذه الأوامر عنصر تحكم إلى الجزء الأمامي أو الخلفي من أمر التراص (التكويم) stacking . هذا مفيد إذا كان لديك عناصر تحكم والتي تتداخل overlap بحيث يكون بعضها وراء البعض الآخر .


يحتوي شريط أدوات التخطيط Layout toolbar على الأوامر نفسها كقائمة التنسيق Format ولكن فى شريط الأدوات تكون فى متناول اليد بحيث يسهل استخدامها. تعرض الأزرار صورا صغيرة تظهر كيفية محاذاة عناصر التحكم.

ملحوظة :
كيف تقوم هذه الأدوات بترتيب عناصر التحكم يعتمد على كيفية اختيارك لعناصر التحكم ، واحد من عناصر التحكم ، وعادة يكون أول واحد قمت بتحديده ، يكون هو المهيمن على المجموعة . يتم تعليم عنصر التحكم المهيمن بمربعات بيضاء في زواياه ، في حين أن باقى عناصر التحكم يتم تعليمها بواسطة مربعات سوداء.
عندما تستخدم أداة الترتيب ، يحدد عنصر التحكم المهيمن كيف يتم ترتيب العناصر الأخرى . على سبيل المثال ، إذا قمت بتحديد الأمر تنسيق ثم محاذاة ثم يسار Format ➪ Align ➪ Lefts ، يتم نقل عناصر التحكم الأخرى بحيث تصطف حوافها اليسرى مع الحافة اليسرى لعنصر التحكم المهيمن .
لتغيير عنصر التحكم المهيمن في مجموعة محددة ، انقر فوق عنصر تحكم تريد أن يكون مهيمن (دون الضغط باستمرار على مفاتيح Ctrl أو Shift ).

[F.Abdelaziz]

تدريب :
فى هذا التدريب ، سوف تحصل على بعض الممارسة (التمرين) لبناء واجهة مستخدم user interface . سوف تضع عناصر التحكم controls  على النموذج form  وإعادة ترتيبها بحيث تصطف بشكل أنيق . يمكنك أيضا الحصول على بعض الممارسة لضبط خصائص properties عناصر التحكم في وقت التصميم design time وتغييرها في وقت التشغيل run time .

متطلبات التدريب :
1- إضافة عناصر تحكم controls إلى النموذج form وترتيبها كما هو مبين بالشكل (2-9) ( لاحظ عنوان الفورم وأن حدود الفورم غير قابلة لإعادة تغيير الحجم ) .
2- إعطاء عناصر التحكم الأساسية "أسماء" names .
3- ضبط الخواص "وقت التصميم" للمسمى label الذى يعطى النتيجة ( الموجود فى قاع الشكل 2-9 ) لجعل المسمى يقوم بالآتى :
# مركزة (وسطنة)  "النص" Text المعروض .
#  إظهار الحدود border .
# استخدام خط 16-point .
# يظل "غيرمرئى" invisible حتى ينقر المستخدم أحد الأزرار .




FIGURE 2-9

4- جعل الزر OK يكون هو زر النموذج الافتراضى وبحيث يشعل fires عندما يضغط المستخدم على زر الإدخال Enter .
5- جعل الزر Cancel يكون هو زر إنهاء النموذج وبحيث يشعل عند الضغط على زر الهروب Esc .
6- إضافة كود من وراء الزر OK بحيث يعرض تسمية النتيجة بخلفية خضراء كما هو مبين بالشكل 2-9 .
7- إضافة كود من وراء الزر Cancel بحيث يعرض تسمية النتيجة بخلفية "وردى"  pink و ونص “Operation Canceled” .

توجيهات :
• فى البداية يتم إنشاء تسمية label ، و ومربع نص TextBox وترتيبهما . ثم بعد ذلك يستخدم النسخ copy واللصق paste فى عمل باقى التسميات ومربعات النص .
• تستخدم قائمة التنسيق Format وشريط أدوات التخطيط Layout لوسطنة الأزرار Buttons وتسمية النتيجة .

التنفيذ خطوة بخطوة :

الخطوة الأولى : إضافة عناصر التحكم controls إلى النموذج form وترتيبها (تنظيمها) كما هو مبين بالشكل (2-9) . مع ملاحظة عنوان title النموذج وأن حدوده border غير قابلة لإعادة تغيير الحجم .
1- إبدأ مشروع جديد باسم NewCustomer (عميل جديد) . تذكر أن تضعه فى مكان يسهل الوصول إليه (سطح المكتب على سبيل المثال) .
2- استخدم نافذة الخواص Properties لضبط قيمة خاصية "النص" Text للنموذج لتكون New Customer .
3-  استخدم نافذة الخواص لضبط قيمة الخاصية "نمط حدود النموذج" FormBorderStyle" لتكون بالقيمة FixedDialog ( لا تترد فى تجربة القيم الأخرى ) .
4- إنشاء "صندوق نص" TextBox :
أ‌- من "صندوق الأدوات " Toolbox انقر على الأداة "صندوق النص"  TextBox ومن ثم انقر واسحب لوضع "صندوق النص" على النموذج .
ب‌- اسحب صندوق النص إلى الركن العلوى الأيمن من النموذج حتى تظهر خطود الدليل snap lines لتبين أنه على المسافة القياسية من الحدود العلوية والحدود اليمنى للنموذج .
5- إنشاء تسمية label بمسمى "الاسم الأول"  First Name :
أ‌- من صندوق الأدوات انقر على الأداة "تسمية" Label ، ومن ثم انقر واسحب لوضع التسمية على النموذج .
ب‌- اسحب التسمية إلى الركن العلوى الأيسر من النموذج حتى تظهر خطوط الدليل لتبين أنها على المسافة القياسية من الحدود اليسرى للنموذج وأن خط أساسها يكون بمحاذاة خط الأساس لصندوق النص .
ت‌- لتحديد "عرض" التسمية ، تحتاج لضبط خاصية النص Text لها . استخدم نافذة الخواص لضبط خاصية النص للتسمية لتكون First Name .
ث‌- انقر على صندوق النص  TextBox (لتحديده) . انقر واسحب المقبض الموجود بالحافة اليسرى لصندوق النص واسحبه حتى يصبح على مسافة قياسية من التسمية Label  .
6- عمل نسخة من التسمية وصندوق النص :
أ‌- انقر واسحب لاختيار كل من التسمية وصندوق النص .
ب‌- اضغط على المفاتيح Ctrl+C لنسخ عناصر التحكم المحددة ، ومن ثم اضغط على Ctrl+V للصق نسخة جديدة من عناصر التحكم هذه.
ت‌- عناصر التحكم الجديدة ما تزال محددة ، لذلك انقر واسحب صندوق النص حتى تبين خطوط الدليل المسافات القياسية من صندوق النص العلوى ومن الحافة اليمنى للنموذج .
ث‌- استخدم نافذة الخواص لضبط خاصية النص للتسمية الجديدة لتكون "اسم العائلة " (الكنية) Last Name .
ج‌- كرر هذه العملية أربع مرات أخرى ( مستخدما قيم النص Text المناسبة ) حتى يكون لديك خمسة صفوف من التسميات وصناديق النص .
7- عمل تسمية "كود البريد" ZIP Label :
أ‌- اضبط خاصية Text لصندوق النص الأسفل لتكون 12345-6789 ، ثم استخدم المقبض الأيسر فى صندوق النص لتغيير حجمه بحيث يكون أكبر قليلا من قيمة النص (انظر الشكل 2-9 ) .
ب‌- قم بإنشاء تسمية Label من أجل الكود البريدى ZIP واضبط خاصية النص له لتكون ZIP ، ثم اسحبه بحيث تبين خطود الدليل أن خط أساسه يكون محازى لخط أساس التسمية وصندوق النص .
ت‌- استخدم نافذة الخصائص لضبط خاصية "محاذة النص" TextAlign لصندوق النص لتكون جهة "اليمين"  Right .
8- عمل "صندوق تحرير"  ComboBox باسم "الولاية"  State :
أ‌- استخدم صندوق الأدوات فى عمل "صندوق تحرير" ComboBox ، واضبط خاصية النص Text له لتكون WW واجعل حجمه مناسب للنص .
ب‌- اسحب صندوق التحرير حتى تظهر خطوط الدليل لتبين أن خط أساسه يكون بمحازاة التسميات الموجودة معه فى نفس الصف وأن حافته اليسرى تكون بمحازاة الحواف اليسرى مع صناديق النص الموجودة فوقه .
ت‌- مع كون صندوق التحرير محددا ، انظر فى نافذة الخواص وانقر على خاصية "البنود" Items ، ثم انقر على زر رمز الانتقال  (…) الموجود على اليمين لفتح محرر مجموعة السلاسل String Collection Editor ، وأدخل الآتى CO, AZ, WY, UT وأى اختصار لولايات أخرى تريد أن تستخدمها وانقر على OK .
ث‌- استخدم نافذة الخواص لضبط خاصية "نمط الإنسدال " DropDownStyle لتكون "قائمة منسدلة"  DropDownList .

ملاحظة :
الخاصية DropDownStyle :
• مع القيمة "بسيط" Simple تجعل " صندوق التحرير" يعرض " صندوق نص" حيث يمكن للمستخدم الكتابة وعمل قائمة أدناه حيث يمكن للمستخدم إجراء اختيارات .
• ومع القيمة DropDown تجعل مربع التحرير يعرض صندوق نص حيث يمكن للمستخدم كتابة واستخدام الأسهم المنسدلة والتى يجعل القائمة المنسدلة تظهر .
• ومع القيمة DropDownList مشابهه لما مع القيمة DropDown إلا أنه يمكن للمستخدم الاختيار فقط من القائمة المنسدلة ولا يمكن كتابة قيم جديدة . القيمة DropDownList  غالبا ما تكون الخيار الأفضل لأنه يمنع المستخدم من كتابة القيم غير الصالحة .

9- عمل الأزرار Buttons
أ‌- فى صندوق الأدوات إنقر نقرا مزدوجا أداة "الزر" Button مرتين لعمل 2 زر بالحجم القياسى .
ب‌- اسحب أحد الزرين بحيث يكون على مسافة مناسبة تحت صناديق النص . اسحب الزر الآخر بحيث يكون بالمحاذاة الرأسية مع الزر الأول ، وضعه على مسافة معقولة بجانبه ( المسافة الدقيقة لا تهم هنا ) .
ت‌- انقر واسحب لاختيار كلا الزرين واختار : "تنسيق" Format – ثم "وسطنة فى الفورم" Center in Form  – ثم " أفقيا" Horizontally .
ث‌- استخدم نافذة الخصائص لإعطاء خاصية النص Text للأزرار القيم OK و Cancel .
10- استخدم صندوق الأدوات لعمل "تسمية" Label النتيجة . (لا تهتم كثيرا حول حجمها ومكانها الآن . فقط اسقطها فى مكان ما قريبا مما هو مبين بالشكل 2-9 ) .

الخطوة الثانية : إعطاء عناصر التحكم الرئيسية "أسماء" names .
1- أعطى عناصر التحكم الرئيسية الأسماء الموضحة بالجدول 2-3 . أنت لا تحتاج لإعطاء أسماء لعناصر التحكم الأخرى لأن البرنامج لا يحتاج الرجوع إليها .      

CO N TRO L N A ME
First Name TextBox firstNameTextBox
Last Name TextBox lastNameTextBox
Street TextBox streetTextBox
City TextBox cityTextBox
State ComboBox stateComboBox
ZIP TextBox zipTextBox
OK Button okButton
Cancel Button cancelButton
Result Label resultLabel

الخطوة الثالثة : ضبط الخصائص عند وقت التصميم لتسمية النتيجة ، الموجودة أسفل الشكل 2-9  :
أ‌- عرض نصها فى الوسط :
1- اضبط الخاصية TextAlign للتسمية لتكون بالقيمة MiddleCenter (استخدم محرر محازاة النص بنافذة الخصائص لاختيار الوضع الأوسط ) .
2- اضبط الخاصية AutoSize للتسمية لتكون بالقيمة False .  
3- اضبط الخاصية Size للتسمية لتكون (250,40) (أو وسع الخاصية Size ، بالنقر على علامة الزائد واضبط العرض والارتفاع كل على حدة ) .
4- استخدم قائمة التنسيق أو شريط أدوات التخطيط لوسطنة التسمية على النموذج .
ب‌- إظهار الحدود :
1- اضبط الخاصية BorderStyle للتسمية لتكون بالقيمة Fixed3D .
ت‌- استخدام خط 16 نقطة 16-point :
1- وسع مدخل خاصية الخط Font بنافذة الخصائص . اضبط خاصية الحجم Size الفرعية لتكون بالقيمة 16 .
ث‌- البقاء غير مرئية حتى ينقر المستخدم أحد الأزرار :
1- ضبط الخاصية Visible للتسمية لتكون بالقيمة False .

الخطوة الرابعة : جعل الز OK هو الزر الافتراضى للفورم بحيث يشتعل (ينطلق) fires عندما يضغط المستخدم المفتاح Enter ، وجعل الزر Cancel هو زر إلغاء cancel الفورم بحيث يشتعل (ينطلق) عندما يضغط المستخدم المفتاح Esc :
1- انقر الفورم واستخدم نافذة الخواص لضبط الخاصية AcceptButton للفورم لتكون بالقيمة okButton .
2- بالمثل ، اضبط الخاصية CancelButton للفورم لتكون بالقيمة cancelButton .

الخطوة الخامسة : إضافة كود خلف الزر OK لعرض تسمية النتيجة بخلفية خضراء كما هو مبين بالشكل 2-9 :
1- انقر نقرا مزدوجا على الزر OK لإنشاء معالج حدث من أجل حدث نقره Click .
2- أكتب النص الثقيل فى الكود التالى بحيث يبدو معالج الحدث بالشكل التالى :

// Create the new customer.
private void okButton_Click(object sender, EventArgs e)
{
resultLabel.Text = "New Customer Created";
resultLabel.BackColor = Color.LightGreen;
resultLabel.Visible = true;
}  

الخطوة السادسة : إضافة كود خلف الزر Cancel لعرض تسمية النتيجة بخلفية وردى (بنك)  pink  وعرض النص  “Operation Canceled” :
1- انقر نقرا مزدوجا على الزرCancel لإنشاء معالج حدث من أجل حدث نقره Click .
2- أكتب النص الثقيل فى الكود التالى بحيث يبدو معالج الحدث بالشكل التالى :

// Don't create the new customer.
private void cancelButton_Click(object sender, EventArgs e)
{
resultLabel.Text = "Operation Canceled";
resultLabel.BackColor = Color.HotPink;
resultLabel.Visible = true;
}

الخطوة النهائية : الآن قم بتشغيل البرنامج وجربه . لاحظ ما يحدث عندما تضغط المفتاح Enter والمفتاح Esc عندما يكون التركيز على مربع نص وعندما يكون التركيز على أحد الأزرار .

[fathi-mohmed]

ألف شكر أستاذي الفاضل

[F.Abdelaziz]

الدرس الثالث :
جعل عناصر التحكم ترتب (تنظم) نفسها Making Controls Arrange Themselves
فى الدرس الثانى تم شرح كيفية إضافة عناصر التحكم إلى النموذج (الفورم) وترتيبها بشكل أنيق . باستخدام هذه التقنيات ، يمكنك إنشاء نماذج مثل تلك المبينة في الشكل 3-1 . (على الرغم من أننا لم نقم بتغطية الكود خلف برنامج النموذج بعد.)



FIGURE 3-1

النموذج يبدو جيدا في الشكل 3-1 ، ولكن ماذا لو قام المستخدم بتوسيع النموذج كما هو مبين في الشكل 3-2؟ على الرغم من أن النموذج أكبر، لكن المناطق التي تحتوي على البيانات ليست كذلك .



Figure 3-2

عنوان صفحة الويب URL للكتاب المحدد في الشكل 3-2 طويل جدا بحيث لا يتناسب مع "صندوق المجموعة" GroupBox ، لذلك يتم اقتطاعه على الرغم من أن النموذج يحتوي على مساحة إضافية ضائعة على اليمين. "صندوق القائمة" ListBox ليس كبير بما فيه الكفاية لعرض جميع العناصر على الرغم من أن هناك مساحة ضائعة في الجزء السفلي . سيكون من الرائع إذا قامت عناصر التحكم بإعادة ترتيب نفسها لاستخدام المساحة المتاحة وعرض عنوان الويب كاملا وعرض المزيد من عناصر القائمة.

ويبين الشكل 3-3 مشكلة أخرى بهذا النموذج . إذا قام المستخدم بتقليص النموذج ، يتم قطع "صناديق النص" TextBoxes و"تسمية رابط العنوان" LinkLabel ، ويتم قطع "التسمية" Year وصندوق النص إلى النصف رأسيا ، وصندوق القائمة يكون غير مناسب ، وصورة الغلاف تفقد تماما.




FIGURE 3-3
البرنامج سوف يبدو أجمل إذا انكمشت عناصر التحكم بحيث تتمكن من رؤية حوافها على الأقل . بعض القيم لا تزال لا تناسب ، ولكن على الأقل النموذج سوف لا يبدو لهاوى . يمكنك حتى جعل النموذج يرفض الإنكماش (التقليص) حتى لا يكون قصير جدا لعرض عنصر تحكم السنة .

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

تقييد حجم النموذج RESTRICTING FORM SIZE
النماذج (وفي الواقع كل عناصر التحكم) لها الخصائص "الحجم الأدنى" MinimumSize و"الحجم الأقصى" MaximumSize والتي يمكنك استخدامها لتقييد حجم النموذج . ببساطة قم بتعيين هذه الخصائص من حيث العرض والارتفاع (أو قم بتعيين الخصائص الفرعية للعرض Width والارتفاع Height) ويقوم النموذج بالباقي .
على سبيل المثال ، لمنع المستخدم من جعل النموذج المبين في الشكل 3-3 صغير جدا، يمكنك تعيين الخاصية MinimumSize للنموذج بالقيم (663, 233) .

استخدام خصائص "المرساة" USING ANCHOR PROPERTIES
تمنع الخاصية MinimumSize المستخدم من عمل نموذج صغير جدا ولكنها لا تحل المشكلة الموضحة في الشكل 3-2 . عندما يقوم المستخدم بتغيير حجم النموذج ، سيكون من الرائع إذا غيرت عناصر التحكم أحجامها لتتوائم .
تتيح خاصية "المرساة" Anchor لعنصر التحكم بنماذج الويندوز تغيير حجم نفسه عند تغيير حجم حاويته . يمكن أن تأخذ هذه الخاصية واحدة أو أكثر من القيم Top, Bottom, Left, Right ، في أي مجموعة (توليفة) . وتشير هذه القيم إلى أن حافة عنصرالتحكم ينبغي أن تظل على نفس المسافة من الحافة المقابلة من حاويتها.
على سبيل المثال ، في البداية يتم تعيين الخاصية "مرساة" Anchor لعنصر التحكم بالقيمة "أعلى ، يسار" Top, Left بحيث تبقى على نفس المسافة من أعلى الحاوية والحواف اليسرى لها. إذا قمت بتغيير حجم النموذج ، لا يتحرك عنصر التحكم .
للحصول على مثال أكثر إثارة للاهتمام ، لنفترض أنك وضعت صندوق نص على نموذج ، وتم تعيين الخاصية Multiline بالقيمة True ، وتم ترتيبه بحيث تكون حوافه على بعد 12 بكسل من حواف النموذج ، وتعيين خاصية "المرساة" Anchor بالقيمة (أعلى، أسفل، يسار، يمين) Top, Bottom, Left, Right . عند تغيير حجم النموذج ، يقوم صندوق النص بتغيير حجم نفسه بحيث تبقى جميع حوافه على بعد 12 بكسل من الحواف المقابلة للنموذج .


ملاحظة :
إذا كانت قيم خاصية المرساة Anchor لا تشمل أى من يسار / يمين أو أعلى / أسفل ، يتحرك عنصر التحكم للحفاظ على نفسه على نفس المسافة من منتصف النموذج .
على سبيل المثال، إذا كانت الخاصية Anchor لزر هى "أسفل" Bottom ، فإنه يتحرك بحيث يظل على نفس المسافة من الوسط الأفقي للنموذج.
هذه الحقيقة تمكنك من الحفاظ على واحد أو أكثر من عناصر التحكم فى الوسط . على سبيل المثال ، ضع عدة أزرار بالقرب من أسفل النموذج واختر Format ➪ Center in Form ➪ Horizontally لوسطنتها (مركزتها) أفقيا . الآن إذا قمت بتعيين الخاصية Anchor لهم بالقيمة Buttons ، فإن مجموعة الأزرار تظل متمحورة (متمركزة) عند تغيير حجم النموذج .

ملاحظة :
الخاصية Anchor لا يمكنها تغيير حجم عنصر تحكم مثل التسمية Label أو LinkLabel إذا تم تعيين الخاصية AutoSize لعنصر التحكم هذا بالقيمة True . في هذه الحالة ، عنصر التحكم يكون لديه أفكاره الخاصة حول مدى الكبر الذى ينبغي أن يكون.
لتعيين الخاصية Anchor في وقت التصميم ، يمكنك كتابة قيمة مثل Top, Left, Right في نافذة الخصائص أو يمكنك استخدام محرر المرساة بنافذة الخصائص .
لاستخدام المحرر، انقر فوق الخاصية مرساة Anchor في نافذة الخصائص ، ثم انقر فوق سهم القائمة المنسدلة إلى اليمين لجعل المحرر يظهر كما هو مبين في الشكل 3-4 . انقر على المستطيلات النحيفة لتحديد أو إلغاء تحديد المراسي التي تريد استخدامها. (في الشكل 3-4 يتم تحديد المراسي العلوية والسفلية واليمنى.) عند الانتها ء، اضغط على Enter لقبول التغييرات أو Esc لإلغائها.




FIGURE 3-4


باستخدام خاصية Anchor ، يمكنك حل المشكلة الموضحة في الشكل 3-2 . ويعطي الجدول 3-1 قيم خصائص المرساة Anchor التي تستخدمها عناصر التحكم للسماح لها بالاستفادة من المساحة المتاحة للنموذج .

CONTROL ANCHOR PROPERTY
booksListBox Top, Bottom, Left
detailsGroupBox Top, Bottom, Left, Right
titleTextBox Top, Left, Right
authorTextBox Top, Left, Right
isbnTextBox Top, Left, Right
urlLinkLabel Top, Left, Right
coverPictureBox Top, Bottom, Right

TABLE 3-1

الآن عند تغيير حجم النموذج :
• يمتد صندوق القائمة ListBox رأسيا ليتناسب مع ارتفاع النموذج .
• يمتد صندوق المجموعة GroupBox رأسيا وأفقيا لاستخدام أكبر قدر ممكن من عرض النموذج وارتفاعه .
• تمتد صناديق النص TextBoxes وتسمية الرابط LinkLabel أفقيا لتكون عريضة قدر الإمكان في حين لا تزال مناسبة داخل صندوق المجموعة .
• يتحرك صندوق الصورة PictureBox مع الحافة اليمنى لصندوق المجموعة بحيث يترك أكبر قدر ممكن من المساحة إلى يسار صناديق النص وتسمية الرابط . كما أنها تمتد رأسيا قدر الإمكان في حين تكون مناسبة داخل صندوق المجموعة .

ويبين الشكل 3-5 النتيجة. الآن صندوق القائمة كبير بما يكفي لإظهار كل بنوده وأن تسمية الرابط كبيرة بما يكفي لعرض عنوان صفحة الويب بالكامل .



FIGURE 3-5

لاحظ أن صناديق النص وتسمية الرابط لا تمتد أفقيا عند تغيير حجم النموذج (الفورم) ؛ فهى تمتد عندما يتم تغيير حجم صندوق المجموعة GroupBox الذي يحتوي عليها. في هذا المثال ، عندما يمتد النموذج ، يتم توسيع (تمديد) صندوق المجموعة وعندما يمتد صندوق المجموعة ، تمتد صناديق النص و تسمية الرابط ، وبالتالي فإن النتيجة تكون هي نفسها .

استخدام خصائص المرفأ (دوك) USING DOCK PROPERTIES
الخاصية مرساة (مخطاف) Anchor يمكن أن تتعامل مع معظم احتياجات الترتيب الخاص بك ، ولكن بعض مجموعات من قيم الخاصية مرساة تكون شائعة جدا حتى أن لغة C# توفر خاصية أخرى لتمكنك من التعامل مع هذه الحالات بسهولة أكبر ، هذه الخاصية هى خاصية "الدوك" (المرفأ) Dock . خاصية "الدوك" تتيح لك إخبار عنصر التحكم لإرفاق (ربط) attach نفسه إلى واحد من حواف حاوته.
على سبيل المثال ، عادة ما تمتد القوائم menu عبر الجزء العلوي من النموذج . يمكن توفير هذا السلوك عن طريق تعيين (ضبط) الخاصية مرساة Anchor للقائمة بالقيمة Top, Left, Right ، ولكن ضبط خاصية "الدوك" Dock بالقيمة Top يكون أسهل.
خاصية "الدوك" يمكن أن تأخذ واحدة من ستة قيم . القيم Left, Right, Top, Bottom تربط عنصر التحكم إلى الحافة المقابلة من حاويته ،والقيمة Fill تجعل عنصر التحكم يأخذ أي مساحة متبقية بعد أن تكون خاصية "الدوك" لأى من عناصر التحكم الأخرى قد أخذت طريقها (عملها). لا شيء يمنع عنصر التحكم من ضبط الخاصية مرساة أيضا .

ملاحظة :
لا يمكن للخاصية "دوك" تغيير حجم عنصر تحكم مثل التسمية أو تسمية الرابط إذا تم ضبط الخاصية AutoSize لعنصر التحكم بالقيمة True .

تقوم الخاصية دوك بمعالجة طلبات تحديد المواقع بقاعدة "من يأتى أولا يتم خدمته أولا" استنادا إلى ترتيب تراص عناصر التحكم في النموذج . وبعبارة أخرى ، فإنها تضع عنصر التحكم الأول الذى يلفت انتباهها أولا. عنصر التحكم الثانى يضع نفسه في أي مكان متروك زيادة . بعد ذلك عنصر التحكم الثالث يضع نفسة في المساحة المتبقية ، وهلم جرا.
عادة يتم تحديد ترتيب التراص حسب ترتيب إضافة عناصر التحكم إلى النموذج ، ولكن يمكنك تغيير الترتيب بالنقر بزر الماوس الأيمن على عنصر تحكم وتحديد "أحضر إلى الأمام" Bring to Front أو "أرسل إلى الخلف" Send to Back . ومع ذلك ، إذا كنت تعمل مع مجموعة معقدة من خصائص "الدوك" وأن ترتيب التراص أصبح مفقود (فوضى) ، فإنه من السهل في كثير من الأحيان حذف كافة عناصر التحكم والبدء من جديد من الصفر.

ويبين الشكل 3-6 نموذجا يحمل خمسة تسميات docked Labels (مع AutoSize = False ). الأرقام في خصائص النص لعناصر التحكم تعطي الترتيب الذي تم إنشاؤها ، والذي هو أيضا ترتيب التراص.



FIGURE 3-6

توضح القائمة التالية كيفية تقسيم مساحة النموذج بين التسميات :
1- أول تسمية لديها Dock = Top ، لذلك تأخذ العرض الكامل للجزء العلوي من النموذج .
2- التسمية الثانية لديها Dock = Left ، لذلك تأخذ الحافة اليسرى من المنطقة المتبقية (بعد وضع أول تسمية).
3- التسمية الثالثة لديها Dock = Right ، لذلك تأخذ الحافة اليمنى من المنطقة المتبقية.
4- التسمية الرابعة لديها Dock = Bottom ، لذلك تأخذ الحافة السفلية من المنطقة المتبقية.
5- التسمية النهائية لديها Dock = Fill ، لذلك تشغل كل المساحة المتبقية.

القوائم الراسية DOCKED MENUS
في سيناريو (برنامج) نموذجي للرسو docking ، يحتوي نموذج على شريط قائمة MenuStrip مع خاصية الدوك بالقيمة Dock = Top ، وحاوية مثل "اللوحة" Panel مع Dock = Fill بحيث تأخذ بقية النموذج ، وتوضع جميع عناصر التحكم الأخرى داخل اللوحة .
يمكنك أيضا إضافة "شريط أدوات" ToolStrips و"أشرطة الحالة" StatusBars مع خصائص "الدوك" المناسبة لوضع وسائل التحكم تلك في الأماكن الصحيحة. ويبين الشكل 3-7 نموذج يحوى شريط قائمة MenuStrip (Dock = Top) ، و"حاوية شريط أدوات" ToolStripContainer (Dock = Top) والتي تحتوي على اثنين "أشرطة الأدوات" ToolStrips ، و"شريط حالة" StatusStrip (Dock = Bottom) ، ولوحة Panel (Dock = Fill) . لقد تم جعل اللوحة أكثر قتامة قليلا لذلك فمن السهل أن نرى أين هى .



FIGURE 3-7

حاويات التخطيط (التنسيق) LAYOUT CONTAINERS
يوفر الفيجوال ستوديو العديد من "عناصر التحكم" controls التي ترتب عناصر التحكم الأبناء child التي تحتوي عليها بطرق مختلفة .
القسم التالى يلخص حاويات تخطيط نماذج الويندوز .

عناصر التحكم فى نوافذ الوندوز Windows Forms Controls
لا تستخدم تطبيقات نماذج الويندوز سوى عناصر تحكم تخطيط قليلة. غالبا ما يتم وضع معظم عناصر تحكم النموذج مباشرة على النموذج .
تلخص القائمة التالية عناصر تحكم تخطيط نماذج ويندوز الأكثر فائدة.
1- النموذج Form
النموذج نفسه عبارة عن حاوية تخطيط تسمح لك بترتيب عناصر التحكم عن طريق تحديد الخصائص :
Top, Left, Width, Height, Anchor, and Dock

2- لوحة تخطيط التدفق FlowLayoutPanel
ترتب عناصر التحكم من اليسار إلى اليمين، أو من اليمين إلى اليسار، أو من أعلى إلى أسفل، أو من أسفل إلى أعلى ، والالتفاف wrappingإلى صفوف أو أعمدة جديدة إذا لزم الأمر.

3- اللوحة Panel
تتيح لك ترتيب عناصر التحكم بقدر ما يفعل النموذج من خلال تحديد الخصائص
Top, Left, Width,Height, Anchor, Dock

4- لوحة تخطيط الجدول TableLayoutPanel
تتيح لك ترتيب عناصر التحكم في صفوف وأعمدة ، من خلال تحديد الخواص التالية لعنصر تحكم :
RowSpan , ColumnSpan للسماح بتمديد صفوف أو أعمدة متعددة.
عناصر التحكم القليلة تلك تمكنك من ترتيب عناصر التحكم بمرونة جدا.

تدريب :
في هذا التدريب ، يمكنك الحصول على ممارسة استخدام الخصائص Anchor , Dock من خلال بناء التطبيق المبين في الشكل 3-8 .



FIGURE 3-8

عند تغيير حجم النافذة ، تمتد صناديق النص و تسمية الرابط أفقيا ، وصندوق الصورة يمتد رأسيا . لاحظ في الشكل 3-8 أن صورة الغلاف طويلة ورقيقة نوعا ما. عندما يصبح صندوق الصورة أطول ، فإنه يمكنه عرض نسخة أكبر من صورة الغلاف . يعرض عنصر التحكم الصورة بأكبر قدر ممكن دون تشويهها.

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

متطلبات التدريب :
فى هذا التدريب سوف تقوم بما يلى :
1- إنشاء برنامج بثلاثة عناصر تحكم رئيسية شريط قائمة MenuStrip ، و شريط حالة StatusStrip و لوحة Panel ، واستخدام خصائص Dock لجعل هذة العناصر الثلاثة تبقى فى مكانها المناسب .
2- إضافة عناصر تحكم إلى اللوحة Panel .
3- استخدام خاصية Anchor لجعل صندوق القائمة ListBox يمتد رأسيا عند تغيير حجم الفورم .
4- استخدام خاصية Anchor لجعل صناديق النص TextBoxes و تسمية الرابط LinkLabel تمتد أفقيا عند تغيير حجم الفورم .
5- استخدام خواص Anchor لجعل صندوق الصورة PictureBox يغير حجمه رأسيا عند تغيير حجم الفورم .

توجيهات Hints :
• تذكر أن صناديق النص TextBoxes وتسمية الرابط LinkLabel تمتد مع صندوق المجموعة GroupBox الذى يحتويها ، وليس مع النموذج نفسه. إذا لم تقم بتمديد صندوق المجموعة ، فإن عناصر التحكم التي يحتوي عليها لن تمتد .

• لعمل قائمة الملف File ، قم بإضافة شريط قائمة MenuStrip إلى النموذج ، حدده ، انقر فوق الصندوق "اكتب هنا" Type Here الذي يظهر، واكتب &File . (حرف العطف & يجعل الحرف الذى يليها وهو "F" تحته خط) . جعل القائمة تفعل شيئا مفيدا يتم تغطيته فى الدرس الخامس ، لذلك لا تقلق بشأن ذلك الآن .
• لعمل "تسمية شريط الحالة" ، أضف شريط حالة StatusStrip إلى النموذج وحدده . انقر على السهم المنسدل الصغير في StatusStrip وحدد StatusLabel . انقر فوق تسمية الحالة الجديدة StatusLabel واستخدام نافذة الخصائص لتعيين نصه Text ليكون This is a StatusStrip .
• أضف بعض البنود items إلى صندوق القائمة ListBox ، أضف صورة إلى صندوق الصورة PictureBox ، وأضف نص Text إلى عناصر التحكم الأخرى ، ولكن لا تقلق بشأن جعل البرنامج يتخذ أي إجراءات .

التدريب خطو بخطوة :

• الخطوة الأولى : إنشاء الثلاثة عناصرالرئيسية فى البرنامج وهى "شريط القائمة" MenuStrip و"شريط الحالة" StatusStrip و"لوحة" Panel . استخدام خصائص Dock لجعل هذه العناصر فى مكانها المناسب .
1- إبدأ مشروع جديد بالمسمى Better Book List . اضبط الخواص Siz و MinimumSize للفورم بالقيم (726 , 286) .
2- أضف MenuStrip إلى النموذج . (لاحظ أنه بشكل افتراضى ، شريط القائمة يرسو فى الأعلى ، أى Dock = Top ) استخدم التنويه السابق والخاص بشريط القائمة لإنشاء قائمة ملف File فارغة.
3- أضف StatusStrip إلى النموذج . (لاحظ أنه بشكل افتراضي ، شريط الحالة يرسو فى الأسفل ، أى Dock = Bottom ) استخدم التنويه السابق والخاص بشريط الحالة لإنشاء التسمية This is a StatusStrip .
4- أضف لوحة Panel إلى النموذج . اضبط الخاصية Dock لتكون Fill .اضبط الخاصية BackColor لتكون أخضر فاتح light green .


• الخطوة الثانية : إضافة عناصر تحكم إلى اللوحة Panel .
1- أضف عناصر تحكم إلى النموذج في المواضع المبينة في الشكل 3-8 بشكل تقريبى .
2- قم بضبط الخاصية AutoSize لتسمية الرابط LinkLabel لتكون False واجعلها بنفس حجم صناديق النص TextBoxes .
3- أدخل بعض قيم النص Text في صناديق النص وتسمية الرابط بحيث يكون لديك شيء ينظر إليه . أدخل ما يكفي من البنود items في صندوق القائمة ListBox بحيث لا تتلاءم جميعها عندما يكون النموذج بالحجم الابتدائى .
4- قم بضبط الخاصية SizeMode لصندوق الصورة PictureBox لتكون Zoom . ضع صورة طويلة ، ورفيعة نسبيا ، في خاصية الصورة Image الخاصة به .

• الخطوة الثالثة : استخدام الخاصية Anchor لجعل صندوق القائمة ListBox يمتد رأسيا عندما يتم تغيير حجم الفورم .
1- اضبط الخاصية Anchor لصندوق القائمة لتكون بالقيم Top, Bottom, Left .

• الخطوة الرابعة : استخدام الخاصية Anchor لجعل صناديق النص وتسمية الرابط تمتد أفقيا عند تغيير حجم الفورم .
1- اضبط الخاصية Anchor لصندوق المجموعة GroupBox لتكون بالقيمة Top, Bottom, Left, Right .
2- اضبط الخاصية Anchor لكل من صناديق النص وتسمية الرابط لتكون Top, Left, Right .

• الخطوة الخامسة : استخدام الخاصية Anchor لجعل صندوق الصورة PictureBox يتغير فى الحجم رأسيا عندما يتغير حجم الفورم .
1- اضبط الخاصية Anchor لصندوق الصورة لتكون Top, Bottom, Left .
قم بتشغيل البرنامج وشاهد ما يحدث عند تغيير حجم الفورم .

[F.Abdelaziz]

اقتباس المشاركة الأصلية كتبت بواسطة fathi-mohmed ألف شكر أستاذي الفاضل

عفوا أخى الفاضل
مع تمنياتى بدوام التوفيق