مقال- تطوير الكونترول Skin Control - نسخة قابلة للطباعة +- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb) +-- قسم : قسم لغة الفيجوال بيسك VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=182) +--- قسم : قسم مقالات VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=184) +--- الموضوع : مقال- تطوير الكونترول Skin Control (/showthread.php?tid=5229) |
مقال- تطوير الكونترول Skin Control - RaggiTech - 06-10-12 كاتب الموضوع : 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() كود : e.Graphics.DrawImage(clonedBitmap, destinationRectangle, 0, 0, _ وأيضا تحديد الجزء الذي سيتم نسخه من الصورة عن طريق التعامل مع المتغيرات الموجودة داخل SourceRectangle وباق الكود سيظل كما هو إلا لو قمنا باستخدام وتعريف أكثر من صورة لاستخدامها في عمل Skin للكونترول عموما الكود كاملا للكونترول موجود في الكود الموجود أدناه وكل ما عليك هو أن تضيف الصورة المناسبة أو تستخدم الصورة الموجودة في المثال المرفق ومن تابع سلسلة المقالات الخاصة بتطوير الكونترول سيدرك أن الكود الذي قمنا بتفسيره أعلاه هو الجزء الجديد ليس إلا أما باق الكود الموجود في Skinned Control قد تم تفسيره في الأجزاء السابقة من المقالات الخاصة بتطوير الكونترول لقد راعيت في كتابة الكود المرفق أن يكون تفصيليا وتكراريا حثي تتضح الصورة كاملة للقارئ وتحديدا للمبتدئين وطبعا الكود الخاص بعمل Skin للكونترول يمكن دمجه في Sub واحد فقط لا غير وتقليل حجم الكود تماما و أيضا ممكن استخدام Public Structure في تعريف جميع المستطيلات المستخدمة أيضا لم أقم هنا بتصميم أي Designer للكونترول ولكن تم إضافة سطر واحد من الكود حيث تم استخدام Designer موجود بالفعل في System والهدف من هذا Designer هو أن نجعل الكونترول يستطيع استقبال عناصر أخري من الكونترول مثل الباتون علي سبيل المثال الي أخر الأنواع الأخرى من الكونترول الموجودة داخل الفيجوال استوديو النسخة المستخدمة : الفيجوال استوديو 2008 اللغة المستخدمة: الفيجوال بيسك دوت نت يمكنك إنزال الكود المرفق من الرابط التالي http://vb4arb.com/vb/uploaded/18_01349467699.zip أتمني لكم النجاح والتوفيق أخوكم عمر |