06-10-12, 12:08 AM
كاتب الموضوع : silverlight
تطوير الكونترول : كيفية عمل Skin للكونترولما هي 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)
كود :
Dim SourceRectangle As New RectangleF(10, 0, 6, 10)
كود :
Dim format As System.Drawing.Imaging.PixelFormat = myBitmap.PixelFormat
كود :
Dim clonedBitmap As Bitmap = myBitmap.Clone(SourceRectangle, format)
كود :
Dim destinationRectangle As New Rectangle(0, 0, Me.Width, 20)
كود :
Dim Attr As New System.Drawing.Imaging.ImageAttributes()
Attr.SetWrapMode(System.Drawing.Drawing2D.WrapMode.Tile)
كود :
e.Graphics.DrawImage(clonedBitmap, destinationRectangle, 0, 0, _
clonedBitmap.Width, clonedBitmap.Height, _
GraphicsUnit.Pixel, Attr)
وأيضا تحديد الجزء الذي سيتم نسخه من الصورة عن طريق التعامل مع المتغيرات الموجودة داخل SourceRectangle وباق الكود سيظل كما هو إلا لو قمنا باستخدام وتعريف أكثر من صورة لاستخدامها في عمل Skin للكونترول
عموما الكود كاملا للكونترول موجود في الكود الموجود أدناه وكل ما عليك هو أن تضيف الصورة المناسبة أو تستخدم الصورة الموجودة في المثال المرفق ومن تابع سلسلة المقالات الخاصة بتطوير الكونترول سيدرك أن الكود الذي قمنا بتفسيره أعلاه هو الجزء الجديد ليس إلا أما باق الكود الموجود في Skinned Control قد تم تفسيره في الأجزاء السابقة من المقالات الخاصة بتطوير الكونترول
لقد راعيت في كتابة الكود المرفق أن يكون تفصيليا وتكراريا حثي تتضح الصورة كاملة للقارئ وتحديدا للمبتدئين وطبعا الكود الخاص بعمل Skin للكونترول يمكن دمجه في Sub واحد فقط لا غير وتقليل حجم الكود تماما و أيضا ممكن استخدام Public Structure في تعريف جميع المستطيلات المستخدمة
أيضا لم أقم هنا بتصميم أي Designer للكونترول ولكن تم إضافة سطر واحد من الكود حيث تم استخدام Designer موجود بالفعل في System والهدف من هذا Designer هو أن نجعل الكونترول يستطيع استقبال عناصر أخري من الكونترول مثل الباتون علي سبيل المثال الي أخر الأنواع الأخرى من الكونترول الموجودة داخل الفيجوال استوديو
النسخة المستخدمة : الفيجوال استوديو 2008
اللغة المستخدمة: الفيجوال بيسك دوت نت
يمكنك إنزال الكود المرفق من الرابط التالي
http://vb4arb.com/vb/uploaded/18_01349467699.zip
أتمني لكم النجاح والتوفيق
أخوكم عمر