تطوير الكونترول Skin Control الجزء السادس

تطوير الكونترول : كيفية عمل Skin للكونترول

اللغة المستخدمة: الفيجوال بيسك

التطبيق: فيجوال استوديو 2005 و 2008

المستوي: التقييم متروك للقارئ

إعداد: مهندس / عمر أمين إبراهيم

ما هي Skin؟

Skin هي عبارة عن طريقة لتغيير الشكل التقليدي للفورم أو الكونترول وإعطاؤه مظهرا وشكلا فريدا جذابا ومن أشهر البرامج التي تم تصميمها علي شكل Skin برنامج مثل Windows Media Player وأيضا هناك بعض البرامج الشهيرة التي تستخدم في تغيير شكل الفورم أو النوافذ أو الكونترول المختلفة مثل برنامج WindowBlinds وبرنامج SkinCrafter وغيرهم الكثير من البرامج.

كيف نفعل ذلك من عن طريق استخدام الفيجوال بيسك دوت نت؟

أولا: تصميم Skin للفورم أو للكونترول يعتمد في المقام الأول علي تجهيز صوره Picture واحدة أو أكثر ويتم تصميمها مسبقا بأي برنامج من برامج Graphics المعروفة للجميع مثل Adobe أو PhotoImpact وأيضا ممكن استخدام برنامج Paint الموجود في نظام التشغيل وغيرهم من البرامج المماثلة

ثانيا: العناصر المستخدمة في رسم Skin داخل الفورم أو داخل الكونترول

تعتبر Classes التالية هي العمود الرئيسي في عمل Skin

Bitmap Class

هذا الكلاس يعلم الجميع ماهيته وهو المسئول عن التعامل مع الصور Images بشكل عام.

في الواقع إن ما يهمنا في هذا الكلاس مرحليا هي ثلاثة أشياء وهي كالأتي

طريقة Method Clone الموجودة داخل هذا الكلاس وهي المسئولة عن عمل نسخة Copy من جزء معين داخل الصورة

طريقة GetPixel Method وهي طريقة يمكن استخدامها لتحديد لون معين في مكان معين داخل الصورة

الصفة PixelFormat Property ومن خلالها يمكن الحصول علي Pixel Format تحديدا عن طريق تعريف اللون الخاص بكل بكسل داخل الصورة

ImageAttributes Class

وهو الكلاس المسئول عن التعامل مع الألوان التي تخص Metafiles و Bitmap أثناء عملية ترجمة الصورة Rendering وهذا الكلاس يحتوي علي أكثر من عملية مثل تصحيح الألوان Color Correction و تخفيف الألوان Color Lighten و Color Darken أي أن نجعل الألوان قاتمة أو غامقة و إلغاء الألوان Color Removal بالإضافة الي ضبط GrayScale و Gamma Correction و أشياء أخري

Graphics Class

وهذا الكلاس هو المسئول عن كيفية استخدام +GDI في رسم الأشياء المختلفة مثل الخطوط والمستطيلات والدوائر عموما هذا الكلاس هو المسئول عن كيفية الرسم داخل الفورم أو الكونترول بشكل عام كما يعلم الجميع

عمل Skin للكونترول

لعمل Skin للكونترول فإن كل ما علينا أن ننفذ هذا النموذج الأولي الذي سيساعدنا علي فهم و نوضح كيفية التعامل مع تلك Classes الثلاثة المذكورة أعلاه وسوف يوضح أيضا فكرة وكيفية عمل Skin بشكل عام

ولتنفيذ المثال لنفتح فورم جديد للاختبار فقط

نضيف صورة ما الي الفورم Resources مثلا

وفي داخل الحدث Paint الخاص بالفورم نقوم بإضافة الاكواد التالية

أولا: نضيف أي صورة مناسبة إلي Resources المشروع ثم نقوم بتعريف هذه الصورة ونطلق عليها اسما وليكن myBitmap

		Dim myBitmap As New Bitmap(My.Resources.close_normal)

ثانيا: نقوم بتحديد الجزء الذي سوف ننسخه من الصورة الأصلية وتعريف نقطة البداية له علي انها (10, 0) وعرض الجزء المنسوخ = 6 وإرتفاعه = 10

  Dim SourceRectangle As New RectangleF(10, 0, 6, 10)

ثالثا: نقوم بتعريف نوع PixelFormat التي سوف نستخدمه فيما بعد علي أنه من الصورة الأصلية أي أننا سوف نستخدم PixelFormat للصورة الأصلية

 Dim format As System.Drawing.Imaging.PixelFormat = myBitmap.PixelFormat

رابعا: نقوم بتعريف صورة أخري وهي ستكون نسخة من الصورة الأصلية ولكن باستخدام نفس نوع PixelFormat للصورة الأصلية

   Dim clonedBitmap As Bitmap = myBitmap.Clone(SourceRectangle, format)

خامسا: تعريف المستطيل الجديد الذي سوف نرسم داخله الجزء الذي إقتطعناه أو الذي قمنا بنسخه من الصورة الأصلية

Dim destinationRectangle As New Rectangle(0, 0, Me.Width, 20)

سادسا: نقوم بتحديد ImageAttribute للصورة التي نسخناها من الصورة الأصلية ونقوم بتحديد WrapMode لهذا ImageAttribute علي أنه من النوع Tile والهدف هنا هو تحديد أن الجزء الذي إقتطعناه أو تحديدا قمنا بنسخه من الصورة الأصلية يمكن عمل Tile له داخل مستطيل أخر أكبر في الحجم بحيث أن هذا الجزء المقتطع و الذي تم نسخه سوف يغطي المستطيل الجديد بصورة كاملة.

Dim Attr As New System.Drawing.Imaging.ImageAttributes()

سابعا: الأن لم يتبقي سوي أن نقوم برسم الصورة clonedBitmap التي تم اقتطاعها أو نسخها في المستطيل الجديد destinationRectangle عن طريق تعيين المنطقة المراد رسمها من الجزء الذي تم نسخه من الصورة مع تحديد الوحدات GraphicsUnit المستخدمة في الرسم علي أنها بالبكسل وأيضا نستخدم ImageAttributes التي قمنا بتعريفها سابق

e.Graphics.DrawImage(clonedBitmap, destinationRectangle, 0, 0, _

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

وأيضا تحديد الجزء الذي سيتم نسخه من الصورة عن طريق التعامل مع المتغيرات الموجودة داخل SourceRectangle وباق الكود سيظل كما هو إلا لو قمنا باستخدام وتعريف أكثر من صورة لاستخدامها في عمل Skin للكونترول

عموما الكود كاملا للكونترول موجود في الكود الموجود أدناه وكل ما عليك هو أن تضيف الصورة المناسبة أو تستخدم الصورة الموجودة في المثال المرفق ومن تابع سلسلة المقالات الخاصة بتطوير الكونترول سيدرك أن الكود الذي قمنا بتفسيره أعلاه هو الجزء الجديد ليس إلا أما باق الكود الموجود في Skinned Control قد تم تفسيره في الأجزاء السابقة من المقالات الخاصة بتطوير الكونترول

لقد راعيت في كتابة الكود المرفق أن يكون تفصيليا وتكراريا حثي تتضح الصورة كاملة للقارئ وتحديدا للمبتدئين وطبعا الكود الخاص بعمل Skin للكونترول يمكن دمجه في Sub واحد فقط لا غير وتقليل حجم الكود تماما و أيضا ممكن استخدام Public Structure في تعريف جميع المستطيلات المستخدمة

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

يمكنك إنزال الكود كاملا من المرفقات

أتمني لكم النجاح والتوفيق

أخوكم عمر