تعلم التصميم المتجاوب في الوندوز فورم

1. BY : Safaa J. Kaheed

2. ‫املتجاوب‬ ‫التصميم‬)DesignResponsive(
‫كبرت‬ ‫فكلما‬ ‫الشاشة‬ ‫دقة‬ ‫مع‬ ‫يتجاوب‬ ‫الذي‬ ‫التصميم‬ ‫هو‬
‫هيكل‬ ‫في‬ ‫تغييرات‬ ‫حصلت‬ ‫كلما‬ ‫الشاشة‬ ‫دقة‬ ‫صغرت‬ ‫أو‬
‫التصميم‬.
‫اخذها‬ ‫يجب‬ ‫التي‬ ‫االمور‬ ‫اهم‬ ‫من‬ ‫يعتبر‬ ‫املتجاوب‬ ‫التصميم‬
.‫البرمجي‬ ‫ملشروعك‬ ‫التصميمة‬ ‫البيئة‬ ‫وضع‬ ‫عند‬ ‫االعتبار‬ ‫بنضر‬
‫بيئة‬ ‫لك‬ ‫توفرها‬ ‫التي‬ ‫الخيارات‬ ‫عن‬ ‫الكتب‬ ‫هذا‬ ‫في‬ ‫سنتددث‬WINDOWS FORM
‫اختالف‬ ‫عن‬ ‫الناتجة‬ ‫االخطاء‬ ‫جميع‬ ‫من‬ ‫وخالية‬ ‫باحترافية‬ ‫برنامجك‬ ‫تصميم‬ ‫من‬ ‫تتمكن‬ ‫كي‬
‫برن‬ ‫يكون‬ ‫بمعنى‬ ‫اي‬ ,‫برنامجك‬ ‫عليها‬ ‫سيعمل‬ ‫التي‬ ‫الشاشات‬ ‫مقاسات‬‫مع‬ ‫متجاوب‬ ‫امجك‬
‫الشاشات‬ ‫كافه‬

3. ‫الفيديو‬ ‫شاهد‬

4. ‫استخدام‬Panel‫املتجاوب‬ ‫التصميم‬ ‫في‬

5. Panel
‫االدوات‬ ‫فيها‬ ‫وضع‬ ‫وتستطيع‬ ‫الخصائص‬ ‫من‬ ‫بمجموعة‬ ‫تتميز‬ ‫كحاوية‬ ‫وتعتبر‬ ‫التصميم‬ ‫في‬ ‫املستخدمة‬ ‫االدوات‬ ‫من‬
‫االدوات‬ ‫في‬ ‫افتراضية‬ ‫بصوره‬ ‫متوفرة‬ ‫وهي‬ , ‫واحده‬ ‫دفعة‬ ‫االدوات‬ ‫نقل‬ ‫من‬ ‫يمكنك‬ ‫حيث‬ ‫االخرى‬

6. ‫خاصية‬Dock
‫ت‬ ‫حيث‬ ‫املتجاوب‬ ‫التصميم‬ ‫عملية‬ ‫في‬ ‫االساس‬ ‫الجزء‬ ‫الخاصية‬ ‫هذه‬ ‫تعتبر‬‫ما‬ ‫وعادتا‬ ‫االداة‬ ‫موقع‬ ‫تحديد‬ ‫من‬ ‫مكنك‬
‫مع‬ ‫تستخدم‬Panel‫الشاشة‬ ‫في‬ ‫موقعها‬ ‫لتحديد‬

7. ‫خاصية‬ ‫بـــــ‬ ‫ادوات‬ ‫شريط‬ ‫تصميم‬Dock and panel
•‫اتجاه‬ ‫نجعل‬Panel‫اليسار‬ ‫الى‬
•‫للزر‬ ‫دزاين‬ ‫الفالت‬ ‫خصائص‬ ‫نضبط‬Button

8. ▪‫ي‬ ‫لم‬ ‫البرنامج‬ ‫حجم‬ ‫في‬ ‫التغيير‬ ‫ان‬ ‫الحظ‬‫الشريط‬ ‫حجم‬ ‫على‬ ‫ؤثر‬‫الجانبي‬

9. ‫باستخدام‬ ‫التقسيم‬ ‫ويتم‬ ‫البرنامج‬ ‫لطبيعة‬ ‫تبعا‬ ‫اجزاء‬ ‫عده‬ ‫الى‬ ‫البرنامج‬ ‫شاشة‬ ‫تقسيم‬ ‫يتم‬Panel‫و‬Dock

10. ‫الفيديو‬ ‫شاهد‬

11. Anchor‫املتجاوب‬ ‫التصميم‬ ‫في‬ ‫استخدامها‬ ‫واهمية‬
‫التمركز‬ ‫خاصية‬ ‫تستخدم‬Anchor‫موقعها‬ ‫لتحديد‬ ‫وذلك‬ ‫الفورم‬ ‫الى‬ ‫املضافة‬ ‫العناصر‬ ‫مع‬.
)‫واالسفل‬ , ‫االعلى‬ , ‫اليسار‬ , ‫(اليمين‬ ‫وهي‬ ‫اختيارات‬ ‫اربع‬ ‫الخاصية‬ ‫هذه‬ ‫تمتلك‬
) ‫يسار‬ , ‫اعلى‬ ( ‫هي‬ ‫االفتراضية‬ ‫الخيارات‬ ‫وتكون‬‫الى‬ ‫بالنسبة‬ ‫واليسار‬ ‫االعلى‬ ‫الى‬ ‫التمركز‬ ‫عملية‬ ‫تكون‬ ‫حيث‬
.‫الفورم‬

12. ‫(اعلى‬ ‫افتراضي‬ ‫بشكل‬ ‫التمركز‬ ‫خاصية‬ + ‫زر‬–)‫يسار‬

13. )‫فقط‬ ‫(اعلى‬ ‫افتراضي‬ ‫بشكل‬ ‫التمركز‬ ‫خاصية‬ + ‫زر‬

14. ‫(اعلى‬ ‫افتراضي‬ ‫بشكل‬ ‫التمركز‬ ‫خاصية‬ + ‫زر‬–)‫اسفل‬

15. ‫(اعلى‬ ‫افتراضي‬ ‫بشكل‬ ‫التمركز‬ ‫خاصية‬ + ‫زر‬–‫يسار‬–‫يمين‬-‫يسار‬)

16. ‫الفيديو‬ ‫شاهد‬

17. ‫استخدام‬Table layout
‫واعمدة‬ ‫صفوف‬ ‫من‬ ‫يتكون‬ ‫كجدول‬ ‫تعمل‬ ‫حاوية‬ ‫باستخدام‬ ‫الفورم‬ ‫تقسيم‬ ‫يتم‬

18. ‫الفيديو‬ ‫شاهد‬