1 / 52

برمجة 2

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

Download Presentation

برمجة 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. برمجة 2 المحاضرة السادسة –الأسبوع الثامن

  2. تحسين الواجهات بالرسوم

  3. تحسين واجهة المستخدم بالرسوم • واجهة المستخدم النمطية عبارة عن عدة نوافذ بها قوائم ومربعات نصوص وعناوين وازرار اوامر

  4. تحسين واجهة المستخدم بالرسوم • ادخال الرسوم الى الواجهة يحسن الواجهة من النواحي التالية: • لفت الانتباه الى معلومات معينة على الشاشة • تستخدم لعرض المعلومات بطرق مختلفة (طريقة رسومية) • تجعل فهم وظيفة العناصر في كثير من الاحيان بديهية وسهلة

  5. لإضافة صور وتحسين واجهة المستخدم اضافة الصور الى ادوات التحكم التي تدعم اساسا استخدام الصور مثل: اداه مربع الصور Picture Box او button او form استخدام وظائف الرسم المختلفة الموجودة بتصنيف Graphics داخل .NET

  6. الطريقة الاولى • عرض الصور على الادوات والنماذج • استخدام اداة مربع الصور PictureBox

  7. عرض الصور على الادوات والنماذج • باستخدام خاصيتين image و BackgroundImage

  8. عرض الصور على الادوات والنماذج • استخدام الخاصية Image • تعيين صورة التي ترغب للاداه مثل مربع الصوره و زر الامر ومربع الاختيار وزر الاختيار • هذه خاصية غالبا تستخدم مع مربع الصوره (مصمم لاحتواء الصور ) • يمكن استخدام الخاصية imageAlign التي تحدد محاذاة الصورة داخل الاداة. تعيين خاصية Image اثناء التصميم تعيين خاصية Image اثناء التشغيل

  9. عرض الصور على الادوات والنماذج • استخدام الخاصية Image أيهما أفضل تعيين خاصية Image أثناء التصميم أم تعيينها أثناء التشغيل ؟

  10. عرض الصور على الادوات والنماذج • استخدام الخاصية BackgroundImage تحتوي اكثر ادوات تحكم على هذه الخاصيه تستخدم لتعيين صورة كخلفية للاداة او نموذج تستخدم عادة لتزيين مظهر الاداه او نموذج بعكس image التي تستخدم لتوضيح وظيفة الاداه

  11. استخدام اداة مربع الصور PictureBox • يستخدم لعرض الصور والرسوم المختلفة على النماذج • استطيع التحكم في موقع الصور من خاصية Location • خاصية Sizemode التي تحدد كيفية تحجيم الصوره داخل المربع او تحجيم المربع كي يظهر الصور كاملة

  12. لإضافة صور وتحسين واجهة المستخدم اضافة الصور الى ادوات التحكم التي تدعم اساسا استخدام الصور مثل: اداه مربع الصور Picture Box او button او form استخدام وظائف الرسم المختلفة الموجودة بتصنيف Graphics داخل .NET

  13. لإضافة صور عمليا

  14. إنشاء الرسوم اثناء التشغيل • احتاج مثلا عرض مخطط بياني لبيانات شركة مثلا • ولان بيانات تتغير فيصعب استخدام صور جاهزة • Visual Basic يساعدني في إنشاء رسوم باستخدام وظائف

  15. هناك 5 وظائف اساسية لإنشاء رسوم • الوظيفة DrawLine() رسم خط مستقيم بين نقطتين • الوظيفة DrawRectangle() تستخدم لرسم مربع او مستطيل • الوظيفة DrawEllipse تستخدم لرسم دائرة او شكل بيضاوي

  16. هناك 5 وظائف اساسية لإنشاء رسوم • الوظيفة DrawPolygon () تستخدم لرسم شكل مغلق يحتوي على عدد من الجوانب (مضلع) • الوظيفة Clear () تستخدم في ازالة الرسوم الموجودة على الكائنات

  17. استخدام الاقلام وفرش الرسم • يمكنك استخدام كائنات القلم والفرشاه لرسم الخطوط والاشكال المختلفة • Pen يستخدم لرسم الخطوط والاشكال المجوفة (الخالية من الالوان) • Brush تستخدم لرسم الاشكال الملونة

  18. استخدام الاقلام • يستخدم في رسم الخطوط والمنحنيات والاشكال المجوفة: • تعريف قلم اسود بسمك نقطة: Dimmypenas new pen (color.black) • تعريف قلم احمر بسمك 5 Dimmypenas new pen (color.red,5)

  19. الوظيفة DrawLine() 1 . CreateGraphics . DrawLine (Pen,x1,y1,x2,y2) Control وظيفة الرسم احداثي نقطة البداية والنهايه القلم المستخدم في عملية الرسم الاداة او النموذج الذي يتم رسم الخط عليه وظيفة نوع رسم الخط

  20. Y2=20 Y1=5 X1=10 X2=20

  21. الوظيفة DrawRectangle() • تقوم برسم مستطيل محدد بزوج من الاحداثيات وعرض وطول وتحتوي على الصيغة التالية Control.CreateGraphics.DrawRectangle(Pen,x,y,width,hieght)

  22. W=20 Y1=35 H=20 X1=10

  23. الوظيفة DrawEllipse() 3 • تقوم هذه الوظيفة برسم قطع ناقص عن طريق تعريف المستطيل المحيط به Control.CreateGraphics.DrawEllipse(Pen,x,y,width,hieght)

  24. W=20 Y1=35 H=20 X1=10

  25. الوظيفة Clear() 4 • تقوم بمسح جميع الرسوم الموجودة على الاداة او النموذج • القيمة الافتراضية له هو لون الخلفية الحالي Control.CreateGraphics.Clear(Color)

  26. مثال رسم خط مستقيم Dim mypen as new pen (color.Black) Me.CreateGraphics.drawline(mypen,20,30,80,100) Mypen.dispose()

  27. مثال رسم مستطيل Dim mypen as new pen (color.Black) Me.CreateGraphics.drawRectangle(mypen,20,30,10,6) Mypen.dispose()

  28. مثال رسم شكل بيضاوي Dim mypen as new pen (color.Black) Me.CreateGraphics.drawEllipse(mypen,20,30,10,6) Mypen.dispose()

  29. حذف الرسم Me.CreateGraphics.Clear(Me.BackColor)

  30. استخدام فرش الرسم • تستخدم لانشاء اشكال مجسمة (ذات لون داخلي) • لها انواع كثيره ابسطها SolidBursh Dim mybrush as new solidBursh(color.red)

  31. مثال رسم مستطيل معبأ باللون الاحمر Dim mybrush as new solidbrush(color.red) Me.CreateGraphics.fillRectangle(mybrush,20,30,30,30) Mybrush.dispose()

  32. استخدام الالوان معرفة مسبقا Dim mycolor as color Mycolor=color.red Mycolor=color.yellow

  33. انشاء الوان مخصصة • باستخدام Color .FromArgb() • نعرف متغير من نوع Color Dim mycolor as color لتحديد لون رمادي مائل الى الزرقة Mycolor=color.fromargb(23,56,78) لتحديد لون اسود Mycolor=color.fromargb(0,0,0) لتحديد لون ابيض Mycolor=color.fromargb(255,255,255)

  34. انشاء الوان مخصصة • 0 يعبر عن غياب اللون • 255 يعبر عن اكتمال اللون

  35. انشاء الوان مخصصة • يمكن استخدام الوظيفة FromArgb() لتعيين شفافية اللون او مايسمى الفا وذلك بادخال قيمة من 0 الى 255 كمعامل اول : Dim mycolor as color (Mycolor=color.FromArgb(127,23,56,78 قيمة اللون الازرق قيمة Alpha الشفافية قيمة اللون الاخضر قيمة اللون الاحمر

  36. الحدث Paint • يتم تنفيذ الكود الموجود داخله كلما تم تغيير حجم النموذج • على عكس الحدث load الذي يتم تنفيذه بمجرد تحميل النموذج داخل الذاكرة

  37. ورقه العمل

More Related