L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef بسم الله الرحمن الرحيم

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef في المحاضره السابقة  التعامل مع الملفات العشوائيه والتتابعيه.  الدوال الكثر إستخدام لتعامل مع تلك الملفات.

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef المحاضرة التاسعه

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  التعامل مع الرسومات و الصور :  المتحكمات البيانية : الخطوط والأشكال. Line & Shape controls  متحكمات الصور و الرسومات. Image & PictureBox controls  استخدام صندوق قائمة الملفات File-List box  الملخص. المحاضرة التاسعه

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef استخدام الرسومات Using Graphics:  تساعد الرسومات و الأشكال و الصور في توضيح المعلومات و تقديم البيانات في صورة أوضح و أكثر تفاعلا مع المستخدم.  هناك طريقتين للتعامل مع الرسومات و الاشكال في ال VB: المتحكمات Controls  المتحكمات Controls: ونضيفها الى النموذج من صندوق الأدوات في وضع التصميم ثم يمكن التحكم في خصائصها و طريقة عرضها أثناء وضع التشغيل. الطرق Methods  الطرق Methods: هي دوال خاصة ( تستدعى في وضع التشغيل ) يمكنها أن تنتج رسومات و أشكال و كذلك التحكم في خصائصها.

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  المتحكمات البيانية Graphics Controls:  لدينا متحكم الخطوط Line و متحكم الأشكال Shape : مثال

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  متحكم الخط Line Control: التأثير اسم الخاصية شكل أو نوع الخط Border Style سمك الخط Border Width لون الخط Border color احداثيات نقطة البداية X1,Y1 احداثيات نقطة النهاية X2,Y2 الاسم الكودى Name مرئى Visible  أهم الخصائص: شفاف غير ظاهر Transparent0 Solid1 Dash2 Dot3 Dash Dot4 Dash Dot Dot 5 Inside Solid6 Border Style

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  متحكم الخط Line Control:  معظم هذه الخصائص يتم ضبطها في وضع التصميم.  تحديد مكان الخط على النموذج: من خلال نقطتي البداية و النهاية.  خاصية مظهر الخط Border Style يمكن أيضا ضبطها في وضع التشغيل و لكن نستخدم القيم العددية.

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef متحكم الأشكال Shape Control:  أهم الخصائص:  معظم هذه الخصائص يتم ضبطها في وضع التصميم. التأثير اسم الخاصية نوع الشكل Shape سمك الخط Border Width لون ملء الشكل Fill Color طريقة ملء الشكل Fill Style حجم الشكل Height Width وضع الشكل Top Left الاسم الكودى Name مرئى Visible لون الخط الخارجي Border color شكل الخط الخارجي Border Style Rectangle0 Square1 Oval2 Circle3 Rounded Rectangle 4 Rounded Square5 Shape

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef متحكم الأشكال Shape Control: مثال 1  مثال 1: مطلوب رسم الواجهة التالية:  محورين بطول و عرض النموذج.  دائرة داخل مثلث فى مركز النموذج.

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  متحكم الأشكال Shape Control: حلمثال 1  حل مثال 1: وضع التصميم:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  متحكم الأشكال Shape Control: حل مثال 1  حل مثال 1: الكود:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  متحكم الأشكال Shape Control: حل مثال 1  حل مثال 1: الكود:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef متحكمات الصور والرسومات Image and PictureBox Controls:  يمكن عرض صور على أي من النموذج, متحكم الصور Image control أو متحكم صندوق الرسومات PictureBox control.  يمكن تحميل الصورة في وضع التصميم و كذلك في وضع التشغيل.  ال VB يتعرف على الصور ذات الامتداد المعروف مثل : BMP, WMF, EMF, GIF, JPEG, ICO, ICON,... مثال

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  خاصية Picture : تتوافر مع النموذج و كذلك متحكمى الرسومات و الصور.  من نافذة الخصائص يمكن تحميل صورة في وضع التصميم. متحكم PictureBox متحكمات الصور والرسومات Image and PictureBox Controls:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  خاصية Picture : تتوافر مع النموذج و كذلك متحكمى الرسومات و الصور.  من نافذة الخصائص يمكن تحميل صورة في وضع التصميم. متحكمات الصور والرسومات Image and PictureBox Controls:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  أما في وضع التشغيل نستخدم طريقة حيث أن picture path تمثل مسار ملف الصورة داخل الحاسب. LoadPicture (picture path) متحكمات الصور والرسومات Image and PictureBox Controls:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef نسخ صورة  نسخ صورة من متحكم الى متحكم أخر : متحكمات الصور والرسومات Image and PictureBox Controls:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef حفظ صورة  حفظ صورة من داخل صندوق الرسومات او متحكم الصور : SavePicture Object.Picture, picture path  متحكمات الصور والرسومات Image and PictureBox Controls:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef تحميل صورة على النموذج :  تحميل صورة على النموذج :   لا يمكن تغيير حجم الصورة أو تحريكها.  لا يمكن اخفاء الصورة.  لايمكن وضع أكثر من صورة علي النموذج ( باستخدام خاصية Picture).  يمكن أن يختفى جزء من الصورة اذا كان حجمها أكبر من النموذج. لاحظ انه عند :

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef تحميل صورة على النموذج :  تحميل صورة على النموذج :  يمكن الكتابه علي الصورة باستخدام Print و كذلك يمكن استخدام طرق الرسم Drawing methods اضافة رسومات لها.  لاتظهر الصورة على خلفية المتحكمات الموجودة على النموذج باستثناء اللافته Label, ومتحكم الأشكال Shape Control اذا كانت خاصية ال BackStyle لأى منهما Transparent. لاحظ انه عند :

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef تحميل صورة على متحكم الصور :  تحميل صورة على متحكم الصور Image control:   يمكن وضع الصورة في أي مكان على النموذج عن طريق تحريك المتحكم نفسه.  توجد خاصية هامة و هي التمديد Stretch وتأخذ القيمة :  دائما تظهر الصورة كاملة في المتحكم ( ولكن قد يحدث لها انكماش كما هو مذكور سابقا ). حجم المتحكم ثابت, بينما يتغير حجم الصورة ليناسب حجم المتحكم True حجم المتحكم يتغير تلقائيا ليستوعب الصورة False متحكمات الصور والرسومات Image and PictureBox Controls:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef تحميل صورة على متحكم صندوق الرسومات PictureBox control:  تحميل صورة على متحكم صندوق الرسومات PictureBox control:   يمكن وضع الصورة في أي مكان على النموذج عن طريق تحريك المتحكم نفسه.  توجد خاصية التحجيم التلقائي Autosize وتأخذ القيمة :  وبالتالى قد يختفي جزء من الصورة المعروضة... حجم المتحكم يتغير تلقائيا ليستوعب الصورة True حجم المتحكم ثابت False متحكمات الصور والرسومات Image and PictureBox Controls:

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef استخدام صندوق قائمة الملفات File-List Box:  هو أحد المتحكمات الموجودة في صندوق الأدوات :   أهم الخصائص هى path, pattern و filename.   يشبه متحكم صندوق القائمة و يضم أسماء جميع الملفات في المجلد ((folder الحالى. مثال

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef استخدام صندوق قائمة الملفات File-List Box:   يمكن تحديد المجلد folder أو ال partition الذي يتم عرض محتوياته داخل صندوق الملفات باستخدام ايعاز : Filename.path = folderpath

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef استخدام صندوق قائمة الملفات File-List Box:  أما الخاصية pattern فتحدد نوعية الملفات التي يتم عرضها داخل الصندوق : امتداد الملفات

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef استخدام صندوق قائمة الملفات File-List Box:   مثال لاظهار الملفات الموجودة داخل partition :

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef استخدام صندوق قائمة الملفات File-List Box:  عند استخدام متحكم صندوق الملفات لعرض أسماء الملفات الموجودة في مجلد ما فان خاصية filename التابعة للمتحكم تحمل اسم الملف المختار من الصندوق. مثال  مثال :  نلاحظ أن أهم حدث مرتبط بصندوق الملفات هو حدث Click().

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef استخدام صندوق قائمة الملفات File-List Box:  وبالتالى يمكن الاستفادة من خصائص صندوق الملفات لعرض الصور الموجودة في مجلد ما كالتالى :  نستخدم متحكم صندوق الرسومات PictureBox و نضبط خاصية Autosize = True.  والمطلوب هنا هو عرض الصور ذات الامتداد ” JPG “ فقط من داخل المجلد Work ثم عرض الصورة المختاره على متحكم صندوق الرسومات.

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef استخدام صندوق قائمة الملفات File-List Box:  فاذا كان المجلد Work يحتوي علي الملفات التالية :

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  استخدام صندوق قائمة الملفات File-List Box:  فان هذا هو شكل النموذج و صندوق الملفات في وضع التشغيل :

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef مثال 2: اكتب شفرة مناسبة لرسم خط بين كيانين على النموذج. افترض أنه يوجد لدينا لافته و متحكمى صور يحتوي كل منهم على صورة. المطلوب أنه عند النقر بالفأرة على اللافته يتم رسم خط بداية من اللافته وتكون نهايته عند الصورة التي يتم النقر عليها بالفأرة. مثال لوضع التشغيل

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef  حل مثال 2: ( وضع التصميم )  بجانب الكيانات الموضحة سابقا على النموذج لابد أيضا من سحب خط (متحكم Line) من صندوق الأدوات و يفضل ضبط الخاصية BorderStyle = Transparent.  وبالتالى في وضع التشغيل لانري الخط على النموذج حتى يتم النقر على اللافته فيبدأ الخط بالظهور مع حركة الفأرة.

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef حل مثال 2: ( الكود )

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef Test your understanding:  عدل حل المثال السابق بحيث يعمل كبرنامج تعليمي بسيط للأطفال. قم بوضع مجموعة أخرى من صور الأشكال الهندسية البسيطة و كذلك أسمائها المقابلة على لافتات. بعد أن ينتهى المستخدم من توصيل كل اللافتات بالأشكال يقوم البرنامج بعمل تصحيح لهذا التوصيل و اذا كان هناك خطأ يتم تغيير لون هذا الخط الي الأحمر.

L9,CSE 101: © Zag. Univ.Dr.Basheer M. Nasef I. كيفية يتم رسم الخطوط والأشكال في الـ VB ؟ II. إستدعاء وعرض الصور من خلال استخدام PictureBox, ImageControl. III. النداء علي الملفات بجميع أنواعها وعرضها في قائمة.