‫أساسيات في البرمجة‬

‫الهيكلية‬
‫دكتور مهندس محمود أبوالفتوح‬
 ‫الفصل الثالث‬

‫التعامل مع التحكمات‬
 ‫التحكمات األساسية‬
‫⚫ مربع النص ومربع العنوان ومفتاح األمر‪.‬‬
‫⚫ تعتبر هذه التحكمات الثالث من أكثر التحكمات استخداما في‬
‫تطبيقات النوافذ‪.‬‬
 ‫مربع العنوان ‪Label‬‬

‫⚫ يستخدم مربع العنوان في عرض معلومات لمخرجات‬

‫البرنامج‪.‬‬
‫⚫ عادة يستخدم لتعريف أماكن إدخال البيانات علي النموذج‪.‬‬
‫⚫ خاصية ‪ Text‬لمربع العنوان تعني النص الذي سيتم‬
‫عرضه علي واجهة مربع العنوان‪.‬‬
‫⚫ يتم وضع اسم افتراضي له ‪ Label1‬والتحكم الثاني‬
‫‪...Label2‬‬
 ‫مربع العنوان ‪Label‬‬
‫⚫ خاصية ‪ AutoSize‬لمربع العنوان عندما تكون ‪True‬‬
‫يتغير حجم مربع العنوان تلقائيا ليناسب حجم النص‬
‫الموجود به‪.‬‬
‫⚫ وعندما تكون الخاصية ‪ False‬يتم تغيير حجم مربع‬
‫العنوان بواسطة المستخدم‪.‬‬
 ‫مربع العنوان ‪Label‬‬
‫الخاصية ‪ BorderStyle‬تحدد ما إذا كانت هناك خطوط محيطة‬ ‫⚫‬
‫بمربع العنوان أم ال طبقا للحاالت اآلتية‪:‬‬
‫ال يوجد اطار عندما تكون الخاصية‪None :‬‬ ‫⚫‬
‫وجود اطار مفرد عندما تكون الخاصية‪FixedSingle :‬‬ ‫⚫‬
‫اطار ثالثي عندما تكون الخاصية‪Fixed3D :‬‬ ‫⚫‬
 ‫مفتاح األمر ‪Button‬‬

‫⚫ يستخدم مفتاح األمر في التحكم في تشغيل المشروع عن‬

‫طريق النقر عليه بواسطة الفأرة‪.‬‬
‫⚫ خاصية ‪ Text‬تعني النص الذي سيتم عرضه علي واجهة‬
‫مفتاح األمر‪.‬‬
‫⚫ اإلسم االفتراضي للتحكم هو ‪ Button1‬و ‪.Button2‬‬
 ‫‪TextBox‬‬ ‫مربع النص‬

‫⚫ يتم استخدام مربعات النص في حاله إدخال بيانات إلى‬

‫البرنامج‪.‬‬
‫⚫ يتم وضع اسم افتراضي ‪ TextBox1‬لمربع النص األول‬
‫و ‪ TextBox2‬لمربع النص الثاني ‪...‬وهكذا‪.‬‬
 ‫‪TextBox‬‬ ‫مربع النص‬
‫•خاصية ‪ Text‬تعبر عن محتويات مربع النص‪.‬‬
‫•كمثال الستخدام مربع نص في عرض بيانات بداخله (كلمة مرحبا مثال)‬
‫”مرحبا“ = ‪TextBox1.Text‬‬

‫•كود إلدخال بيانات عن طريق مربع نص ‪ TextBox1‬وإظهارها في‬

‫مربع عنوان ‪،Label1‬‬
‫‪Label1.Text = TextBox1.Text‬‬

‫في هذا المثال أي بيانات يتم إدخالها في‬

‫مربع النص ‪TextBox1‬يتم إظهارها‬
‫على مربع العنوان ‪.Label1‬‬
 ‫مسح مكونات مربع نص أو عنوان‬
‫تستطيع مسح محتويات مربع نص أو مربع عنوان وذلك‬
‫باستخدام عالمات التنصيص بدون مسافة بينهما (" ")‬
‫امام خاصية ‪ : Text‬مثال على ذلك‪:‬‬
‫" " = ‪TextBox1.Text‬‬
‫او استخدام وظيفة المسح )(‪Clear‬‬
‫)(‪TextBox1.Clear‬‬
 ‫أذكر عمل جمل البيزيك اآلتية‬

‫⚫‬ ‫” “=‪TextBox3. Text‬‬

‫⚫ مسح البيانات الموجودة في مربع النص المسمي‬
‫‪TextBox3‬‬

‫⚫‬‫” “=‪Label 2. Text‬‬

‫⚫ مسح البيانات الموجودة على واجهة مربع العنوان‬
‫المسمى ‪Label 2‬‬
 ‫أذكر عمل جمل البيزيك اآلتية‬
‫⚫‬ ‫"مرحبا" = ‪Label 3. Text‬‬
‫⚫ تعني ظهور كلمة مرحبا على واجهة مربع العنوان‬
‫المسمى ‪Label 3‬‬

‫⚫‬ ‫‪Label 5. Text = TextBox1. Text‬‬

‫⚫ البيانات الموجودة في مربع النص ‪TextBox1‬يتم‬
‫تخصيصها لمربع العنوان ‪ Label5‬لتظهر بداخله‪.‬‬
 ‫معامل الربط بين نصين &‬

‫⚫ المعامل & يقوم بربط نصين وإظهارهما كنص واحد‬

‫"مرحبا" & ’’ محمد ’‘ = ‪⚫ Label6. Text‬‬

‫⚫ كلمة مرحبا ‪ +‬كلمة محمد يتم تخصيصها لمربع العنوان‬

‫‪ Label6‬لتظهر بداخلة ” مرحبا محمد “‪.‬‬
 ‫أذكر عمل جمل البيزيك اآلتية‬
‫‪" & TextBox1. Text‬مرحبا" = ‪Label5. Text‬‬
‫⚫ البيانات الموجودة في مربع نص ‪+ TextBox1‬‬
‫كلمة مرحبا يتم تخصيصها لمربع العنوان ‪Label5‬‬
‫لتظهر بداخلة‪.‬‬
 ‫مشروع‬
‫⚫ صمم مشروع يقوم بإدخال االسم األول في مربع نص ثم‬
‫االسم الثاني في مربع نص آخر‪ .‬ويتم عرض االسمين فى‬
‫مربع عنوان‪ .‬يتم وضع مفتاح أمر لعرض الرسالة فى مربع‬
‫العنوان‪ ،‬ومفتاح أمر لمسح مربعات النص ومربع العنوان‪،‬‬
‫وكذلك مفتاح أمر للخروج من البرنامج‪.‬‬
‫أوال‪ :‬تصميم واجهة المشروع‬
‫أوال‪ :‬تصميم واجهة المشروع‬
 ‫ تصميم وكتابة الخصائص‬:‫ثانيا‬
‫الكائن‬ ‫الخاصية‬ ‫اإلعداد‬
Label1 Text ‫االسم األول‬
Label2 Text ‫االسم الثاني‬
Label3 Text
AutoSize False
BorderStyle Fixed3D
Button1 Text ‫عرض‬
Button2 Text ‫مسح‬
Button3 Text ‫إنهاء‬
‫واجهة المشروع بعد تغيير الخصائص‬
 ‫ثالثا‪ :‬كتابة كود المشروع‬

‫⚫ سيتم وضع كود لكل حدث ألزرار األوامر‪.‬‬

‫⚫ كود مفتاح عرض‬

‫‪Label3.Text=TextBox1.Text &TextBox2.Text‬‬

‫⚫ كود مفتاح إنهاء‬

‫‪End‬‬
 ‫ كتابة كود المشروع‬:‫ثالثا‬
‫⚫ كود مفتاح مسح‬
⚫ TextBox1.Text = “ "
⚫ TextBox2.Text = “ "
⚫ Label3.Text = “ "
‫تنفيذ البرنامج‬
 ‫تغيير لون النص‬
‫⚫ تستطيع تغيير لون النص أو الخلفية للتحكم‬
‫⚫ خاصية (‪ )ForeColor‬للتحكم تستخدم فى تغيير‬
‫لون الكتابة داخل التحكم‬
‫⚫ أما خاصية (‪ )BackColor‬فإنها تستخدم لتغيير‬
‫لون الخلفية‪.‬‬
 ‫تغيير لون النص‬
‫يستخدم البيزك المرئى ثمانية ثوابت لتغيير لون الكتابة كاآلتى‪-:‬‬

‫‪Color.Black‬‬ ‫األسود‬
‫‪Color.Red‬‬ ‫األحمر‬
‫‪Color.Green‬‬ ‫األخضر‬
‫‪Color.Yellow‬‬ ‫األصفر‬
‫‪Color.Blue‬‬ ‫األزرق‬
‫‪Color.Magenta‬‬ ‫أرجوانى‬
‫‪Color.Cyan‬‬ ‫ابيض مائل للزرقة (لبنى)‬
‫‪Color.White‬‬ ‫األبيض‬
 ‫كود تغيير اللون‬
‫⚫ تغيير لون الكتابة في ‪ Label1‬إلي اللون األحمر‬
‫‪⚫ Label1.ForeColor = Color.Red‬‬

‫⚫ تغيير لون خلفية الكتابة في ‪ Label4‬إلي اللون األخضر‬

‫‪⚫ Label4.BackColor‬‬ ‫‪= Color.Green‬‬
 ‫كود تغيير اللون‬
‫⚫ اكتب كود لعرض كلمة ” فلسطين“ باللون األحمر في‬
‫مربع عنوان‬
‫” فلسطين “ = ‪⚫ Label1. Text‬‬
‫‪⚫ Label1.ForeColor = Color.Red‬‬

‫⚫ تغيير لون خلفية الكتابة في ‪ Label1‬إلي اللون األخضر‬

‫‪⚫ Label1.BackColor‬‬ ‫‪= Color.Green‬‬
 ‫اعداد أولوية عمل التحكمات‬

‫⚫ أثناء تنفيذ البرنامج قد تحتاج إلى ظهور نقطة اإلدراج فى‬

‫مربع نص من المتوقع أن يقوم المستخدم بإدخال بيانات به‪.‬‬
‫هذا األمر يحتاج إلى تغيير وظيفة (ٍ‪ )Focus‬كاآلتى‪:‬‬
‫) (‪TextBox1.Focus‬‬

‫⚫ مما يجعل ظهور نقطة اإلدراج فى المكان الحالى لمربع‬

‫النص المسمي ‪.TextBox1‬‬
 ‫مشروع تطبيقي‬

‫⚫ إنشاء مشروع يقوم بعرض كلمة مرحبا باللون‬

‫االحمر والخلفية باللون االخضر عند الضغط‬
‫على مفتاح عرض‪ ،‬واستخدام مفتاح مسح‬
‫إلعادة الخلفية الي اللون االبيض ومسح كلمة‬
‫مرحبا‪ ،‬وإنهاء البرنامج عند الضغط علي‬
‫مفتاح انهاء‬
‫مشروع تطبيقي‬
‫⚫ أوال ‪ :‬تصميم واجهة البرنامج ‪:‬‬
 ‫مشروع تطبيقي‬
‫⚫ ثانيا‪ :‬كتابة الخصائص‬
‫الكائن‬ ‫الخاصية‬ ‫االعداد‬
‫‪Label1‬‬ ‫‪Text‬‬
‫‪Button1‬‬ ‫‪Text‬‬ ‫عرض‬
‫‪Button2‬‬ ‫‪Text‬‬ ‫مسح‬
‫‪Button3‬‬ ‫‪Text‬‬ ‫انهاء‬
 ‫مشروع تطبيقي‬

‫ كتابة األكواد‬: ‫⚫ ثالثا‬

‫⚫ كود مفتاح عرض‬
⚫ Label1.Text="‫مرحبا‬"
⚫ Label1.ForeColor = Color.Red
⚫ Label1.BackColor = Color.Green
 ‫مشروع تطبيقي‬
‫⚫ ثالثا ‪ :‬كتابة األكواد‬
‫⚫ كود مفتاح مسح‬
‫⚫‬ ‫" "=‪Label1.Text‬‬
‫‪⚫ Label1.BackColor = Color.White‬‬

‫⚫ كود مفتاح انهاء‬

‫⚫‬ ‫‪End‬‬
 ‫مشروع تطبيقي‬

‫⚫ إنشاء مشروع يقوم بعرض مرحبا عند الضغط‬

‫على مفتاح عرض‪1‬باللون االحمر وعرض‬
‫كلمة ‪ Welcome‬عند الضغط على مفتاح‬
‫عرض‪2‬باللون االزرق‪ ،‬وإنهاء البرنامج عند‬
‫الضغط علي مفتاح انهاء ؟‬
‫أوال‪ :‬تصميم الواجهة‬
 ‫ثانيا‪ :‬كتابة الخصائص‬

‫الكائن‬ ‫الخاصية‬ ‫االعداد‬

‫‪Label1‬‬ ‫‪Text‬‬
‫‪Button1‬‬ ‫‪Text‬‬ ‫عرض‪1‬‬
‫‪Button2‬‬ ‫‪Text‬‬ ‫عرض‪2‬‬

‫‪Button3‬‬ ‫‪Text‬‬ ‫انهاء‬

 ‫ثالثا‪ :‬كتابة الكود‬

‫⚫ثالثا ‪ :‬األكواد‬
‫⚫كود عرض ‪1‬‬

‫‪⚫ Lable1.‬‬ ‫”مرحبا" = ‪Text‬‬

‫‪⚫ Lable1.‬‬ ‫‪ForeColor = Color.Red‬‬

 ‫مشروع تطبيقي‬
‫ األكواد‬: ‫⚫ ثالثا‬
2 ‫⚫كود عرض‬
⚫ Lable1. Text = "Welcome"
⚫ Lable1. ForeColor = Color.Blue

‫⚫ كود الخروج‬
⚫ End
 ‫مشروع تطبيقي‬

‫⚫ إنشاء مشروع يقوم بعرض كلمة ” فلسطين“‬

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

‫الكائن‬ ‫الخاصية‬ ‫االعداد‬

‫‪Label1‬‬ ‫‪Text‬‬
‫‪Button1‬‬ ‫‪Text‬‬ ‫عرض‬
‫‪Button2‬‬ ‫‪Text‬‬ ‫مسح‬
‫‪Button3‬‬ ‫‪Text‬‬ ‫انهاء‬
 ‫مشروع تطبيقي‬

‫⚫ثالثا ‪ :‬األكواد‬
‫⚫كود عرض‬

‫‪⚫ Label1.‬‬ ‫” فلسطين “ = ‪Text‬‬

‫‪⚫ Label1.‬‬ ‫‪ForeColor = Color.Red‬‬

 ‫مشروع تطبيقي‬
‫⚫ ثالثا ‪ :‬األكواد‬
‫⚫كود مسح‬
‫⚫‬ ‫" “ = ‪Label1. Text‬‬

‫⚫ كود الخروج‬
‫‪⚫ End‬‬
 ‫صندوق تجميع ‪GroupBox‬‬
‫⚫ يستخدم صندوق التجميع فى احتواء مجموعة من التحكمات‬
‫المختلفة‪ ،‬مما يجعل شكل واجهة البرنامج أكثر وضوحا‪.‬‬
‫⚫ يتم وضع عنوان فى الحافة العلوية لصندوق التجميع وذلك‬
‫بكتابته أمام خاصية ‪Text‬‬
 ‫مربع اختيار ‪CheckBox‬‬
‫⚫ يسمح مربع االختيار باختيار أو عدم اختيار فعل معين‬
‫⚫ يمكن كتابه أى برنامج فرعى يتم تنفيذه عند اختيار هذا الصندوق‪.‬‬
‫⚫ االسم االفتراضي لمربع االختيار هو ‪CheckBox‬‬
‫⚫ يتم استخدام خاصية (‪ )Text‬لوضع النص المطلوب بجوار مربع‬
‫االختيار‬
 ‫مفتاح اختيار ‪RadioButton‬‬
‫⚫ تستخدم مفاتيح االختيار عند اختيار مفتاح واحد من مجموعة‬
‫مفاتيح الختيار فعل معين ‪.‬‬
‫⚫ يجب أوال وضع صندوق تجميع ثم إنشاء المفاتيح بداخله‪.‬‬
‫⚫ يتم كتابه النص المطلوب ظهوره بجوار مفتاح االختيار أمام‬
‫خاصية (‪.)Text‬‬
‫⚫ االسم االفتراضي لمفتاح االختيار هو ‪RadioButton‬‬
 ‫تحكم الصورة ‪PictureBox‬‬
‫⚫ يستخدم تحكم الصورة في إظهار صورة علي نموذج‪.‬‬
‫⚫ يتم ذلك بوضع تحكم الصورة على النموذج ثم بعد ذلك يتم‬
‫إحضار صورة من ملف به صور‪.‬‬
‫⚫ وإلحضار صورة من ملف معين يتم اختيار خاصية‬
‫‪ Image‬لتحكم الصورة من نافذة الخصائص‬
 ‫تعريف مفاتيح لإلدخال من لوحة المفاتيح‬
‫⚫ يفضل بعض المستخدمين استخدام لوحة المفاتيح بدال من‬
‫الفأرة‪.‬‬
‫⚫ كل تطبيقات النوافذ يمكن التعامل معها إما باستخدام الفأرة أو‬
‫لوحة المفاتيح‪.‬‬
‫⚫ على سبيل المثال نستطيع اختيار مفتاح ‪File‬وذلك باستخدام‬
‫مفتاحى ‪F + Alt‬‬
‫⚫ تستطيع إعداد مفاتيح إدخال من لوحة المفاتيح للعمل مع‬
‫أزرار أوامر وذلك عند كتابة عناوينها مع خاصية (‪.)Text‬‬
‫⚫ يتم ذلك بوضع هذه العالمة (&) أمام الحرف المطلوب‬
‫استخدامه لإلدخال‬
 ‫تعريف مفاتيح لإلدخال من لوحة المفاتيح‬
‫⚫ يقوم برنامج البيسك المرئى بوضع خط أسفل هذا الحرف‬
‫للداللة عليه‪ .‬على سبيل المثال‬
‫‪⚫ & Ok‬‬ ‫‪for Ok‬‬
‫‪⚫ E & xit‬‬ ‫‪for Exit‬‬
‫عرض‬ ‫⚫&عرض‬
‫انهاء‬ ‫⚫ان&هاء‬
 ‫إعداد خواص أزرار األوامر لبداية التشغيل ولإليقاف‬
‫⚫ تستطيع إعداد أحد أزرار األوامر لتكون مسئولة عن بداية‬
‫التشغيل بمعنى أنها تستجيب لمفتاح اإلدخال ‪ Enter‬في‬
‫لوحة المفاتيح‪.‬‬
‫⚫ يتم ذلك بإعداد خاصية ‪AcceptButton‬للنموذج الموجود‬
‫عليه تحكمات المشروع‪ ،‬وذلك بتحديد اسم المفتاح المطلوب‬
‫له هذه الخاصية أمام خاصية ‪.AcceptButton‬‬
‫⚫ أيضا يمكن إعداد زر آخر إلنهاء البرنامج ويستجيب لمفتاح‬
‫(‪ )Esc‬من لوحة المفاتيح‪ .‬وذلك بإعداد خاصية‬
‫‪ CancelButton‬للنموذج وذلك بتحدديد المفتاح المطلوب‬
‫له هذه الخاصية أمام خاصية ‪.CancelButton‬‬
 ‫مشروع تطبيقي‬
‫⚫ إنشاء مشروع يقوم بعرض كلمة ( مصر اوال ) في‬
‫مربع عنوان عند الضغط على مفتاح عرض‪ .‬يتم‬
‫تغيير لون الكتابة الموجودة فى مربع العنوان الي‬
‫اللون األحمر أو األخضر باسستخدام مفتاحين‬
‫اختيار‪ .‬يتم استخدام مفتاح مسح وإنهاء‪ ،‬واستخدام‬
‫لوحة المفاتيح فى تشغيل أزرار األوامر‪.‬‬
‫أوال ‪ :‬تصميم واجهة البرنامج ‪:‬‬
 ‫ تصميم وكتابة الخصائص‬:‫ثانيا‬
‫الكائن‬ ‫الخاصية‬ ‫اإلعداد‬
Label1 Text
AutoSize False
BorderStyle Fixed3D
GroupBox1 Text ‫لون الخط‬
RadioButton1 Text ‫احمر‬
RadioButton2 Text ‫اخضر‬

Button1 Text ‫&عرض‬

Button2 Text ‫& مسح‬
Button3 Text ‫إ& نهاء‬
Form1 AcceptButton Button1
CancelButton Button3
‫ثانيا‪ :‬كتابة الخصائص‬
 ‫ األكواد‬: ‫ثالثا‬

‫كود عرض‬ ⚫
⚫ Lable1. Text = ” ‫" مصر اوال‬
‫كود مسح‬ ⚫
⚫ Lable1. Text = " "
‫كود مفتاح أحمر‬ ⚫
⚫ Lable1. Fore Color = Color.Red
‫كود مفتاح أخضر‬ ⚫
⚫ Lable1. Fore Color = Color.Green
‫كود إنهاء‬ ⚫
⚫ End
‫تشغيل البرنامج‬
‫تشغيل البرنامج‬
‫⚫ تشغيل البرنامج‬