تعلم كيف تبرمج أدوات Windows Control Library في فيجوال بيسيك دوت نت

طبعا حتى نستطيع برمجة أداتنا الخاصة هناك ثلاثة أساليب يجب أن نتعلمها ويمكنك إتباع أي أسلوب منها وهي:







[size=16]ملاحظة:قبل
أن ابدأ بشرح المثال القادم سأذكر بشيء هو أن هذا الشرح ينفع لجميع
إصدارات فيجوال بيسيك دوت ت من 2000 إلى 2010 يعني انه لا يوجد أي فرق
بينها,, أنا سأستخدم في شرحي 2010 وكل صور الشرح ستكون عليه.

التطبيق العملي:
[size=16]أولا: بعد أن تفتح فيجوال بيسيك قم باختيار مشروع جديد ومنه اختر Windows Control Library

كما في الصورة التالية

[size=16]وبعدها ستفتح لك بيئة تطوير فيجوال ستديو مشروع جديد فيه الملف UserControl1.vb وفيه نافذة جديدة

[size=16]ثانيا: الآن غير اسم المشروع إلى MyTextBox انظر الصورة التالية:

ثالثا:افتح
نافذة محرر الاكواد الخاصة بالأداة UserControl1 وامسح كل شيء فيها بحيث
تصبح فارغة والآن لوراثة الأداة TextBox القياسية أضف الكود التالي الذي هو
الفئة التي تشتق الأداة TextBox بكافة خصائصها وأحداثها :

[/size][/size][/size][/size]


كود:

Public Class MyTextBox
Inherits System.Windows.Forms.TextBox
Sub New()
MyBase.New()
End Sub
End Class



[size=16]الآن
بعد تعريفك لفئة السابقة تستطيع إضافة أي شيء تريده على الأداة TextBoxكما
تشاء ويناسبك من خصائص وأحداث وغيرها بما معناه انك أنشأت أداة تكست بوكس
كاملة وقابلة للتعديل.

[size=16]رابعا:سنقوم
الآن بإضافة خاصية التحديد التلقائي AutoSelect وهي خاصية غير موجودة مع
أداة التكست بوكس القياسية وعمل هذه الخاصية هو عند اختيار القيمة True لها
فيتم تحديد النص كاملا في الأداة تيكست بوكس مجرد أن تأخذ الأداة تركيزها
ولإنشاء هذه الخاصية ادخل الكود التالي :

[/size][/size]


كود:

Private m_autoselect As Boolean
Public Property AutoSelect() As Boolean
Get
Return m_autoselect
End Get
Set(ByVal value As Boolean)
m_autoselect = value
End Set
End Property

والآن في الحدث Enter الخاص بالأداة ضع الكود Me.SelectAll( ) على الشكل التالي :




كود:

Private Sub MyTextBox _Enter(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Enter
Me.SelectAll()
End Sub



وطبعا هذا الكود لتحديد كافة النص بالأداة مجرد انتقال التركيز إليها

والآن يكون شكل الكود النهائي بعد كل شيء هكذا :




كود:

Public Class MyTextBox
Inherits System.Windows.Forms.TextBox
Sub New()
MyBase.New()
End Sub
Private m_autoselect As Boolean
Public Property AutoSelect() As Boolean
Get
Return m_autoselect
End Get
Set(ByVal value As Boolean)
m_autoselect = value
End Set
End Property

Private Sub MyTextBox _Enter(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Enter
Me.SelectAll()
End Sub
End Class



الآن بعد أن انتهينا سنقوم بحفظ المشروع و باستخراج ملف Dll الخاص بالأداة لنتمكن من استخدامها في مشاريعنا .
وذلك عن طريق اختيار الأمر Build MyTextBox من القائمة Build انظر الصور التالية:

الآن سنقوم بتجربة الأداة:
[size=16]أولا: بعد فتح فيجوال ستديو افتح مشروع جديد Windows Application

ثانيا: قم بإضافة الأداة إلى مشروعك كالتالي انظر الصور:

ثالثا:ارسم الأداة على النموذج وانظر إلى نافذة الخصائص ولاحظ الخاصية الجديدة التي انشأناها AutoSelect
انظر الصورة:

[size=25]MyTextBox



تحميل مثال الأداة جاهزة ومع الكود المصدري

الان
انتهينا من شرح الأسلوب الأول وهو وراثة أداة موجودة سابقا أتمنى أن يكون
شرحي واضحا وسأشرح في المرة القادمة الأسلوب الثاني وهو

استخدام مجموعة من الأدوات الجاهزة

ترقبو شرح الاسلوب الثاني

يتبع............................للمرة القادمة

[/size][/size]

مقدمة حول هذا الاسلوب:طبعا
الهدف الأساسي من هذا الاسلوب هو اختصار الوقت والعمليات المكررة مثلا :كأن
تقوم بإضافة زر Button وبجانبه تيكست بوكس Textbox على النموذج وعندما
تضغط على الزر يتم كتابة مسار ملف معين داخل التيكست بوكس,,وإذا كنت دائما
تحتاج لعمل هذا في برامجك فعندها لتختصر كل هذه العملية فعليك بتصميم أداة
تضم كلا من الزر والتيكست بوكس معا لتستطيع استخدامها في كل برامجك دون
الحاجة في كل مرة لإضافة الزر ثم التيكست بوكس ثم كتابة الاكواد وووووو
........الخ فقط تقوم باختيار أداتك التي صممتها من شريط الأدوات وترسمها
على النموذج .


الآن سأقوم بتطبيق مثال عملي :
أولا:افتح فيجوال ستديو ومن نافذة المشروع الجديد اخترWindows Control Library
انظر الصورة:



وبعدها ستفتح لك بيئة تطوير فيجوال ستديو مشروع جديد فيه الملف UserControl1.vb وفيه نافذة جديدة
انظر الصورة:



ثانيا:قم بإضافة الأدوات التالية:
1- زرButton
2- تيكست بوكس TextBox
3- أداة openFileDialog









كود:
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
If OpenFileDialog1.ShowDialog = DialogResult.OK Then
TextBox1.Text = OpenFileDialog1.FileName
End If
End Sub

رابعا:الآن
بقي شيء أخير قبل أن نستخرج الملف النهائي للأداة وتصبح جاهزة للاستخدام
وهو شيء هام جدا عندما تريد استخدام الأداة في أي مشروع من مشاريعك يجب أن
تصل إلى خصائص الأداة تيكست بوكس الموجودة داخل أداتك التي صممتها طبعا نحن
أكثر ما يهمنا من خصائصها الخاصية Text التي سينزل بها مسار الملف وهناك
طريقتين لذلك أولا: بتغيير خاصية الوصول Modifiers للأداة TextBox وضبتها
على القيمة Public وعندما تضبطها على هذه القيمة فتستطيع عند استخدامك
لأداتك في مشاريعك الوصول إلى كامل خصائص الأداة تيكست بوكس وليس فقط
الخاصية تيكست حتى خصائص تغيير اللون والخط والحجم والاتجاهات وغيرها
........الخ

[size=16]ثانيا:طبعا
الطريقة الأولى فيها عيب وهو انه يمكن للمبرمج الذي سيستخدم أداتك في
مشاريعه أن يعدل على الأداة وكأنه مصممها يعني يمكن أن يغير موقع التيكست
بوكس في أداتك ويغير حجمها ويمكن لهذه التغييرات أن تؤثر على سلوك تنفيذ
أداتك بشكل عام عندها يمكن أن تستخدم الطريقة الثانية وهي أن تقوم ببرمجة
وإنشاء خصائص خاصة لأداتك بنفسك ولهذا سنقوم الآن بإضافة الخاصية FileName
للأداة وهي ستكون بمثابة الخاصية Text للأداة TextBox وسينزل بها مسار
الملف المختار.

[/size]

لقد
قمت في المرة الأولى بشرح الأسلوب الأول وهو وراثة أداة سابقة وتم بعون
الله شرح الأسلوب الثاني هو استخدام مجموعة من الأدوات الجاهزة في المرة
الثانية أما الآن سأقوم بشرح الأسلوب الثالث والأخير وهو:

إنشاء أداة جديدة من الصفر

مقدمة حول هذه الأسلوب:طبعا هذا الأسلوب هو الأهم بين الأساليب الثلاثة والأصعب أيضا لأننا
سنقوم بإنشاء أداتنا الخاصة من
البداية وبدون الاعتماد على الأدوات القياسية الموجودة يعني لن نرث أي
أداة ولن نجمع عدة أدوات في أداة واحدة بل سنقوم برسم شكل أداتنا بنفسنا
وبرمجتها ووضع خصائصها من الصفر وتكمن أهميته في أننا سيكون لنا تحكم كامل
بأداتنا وسـتكون لنا المسؤولية الكاملة عن كل صغيرة وكبيرة بالكود المصدري
للأداة وهذا طبيعي لأننا نحن من سيألف الكود الخاص بها وعيب هذا الأسلوب هو
الوقت الطويل الذي تبذله في برمجة أداتك فهو يعادل برمجة برنامج كامل
يعتمد على الأدوات الجاهزة .

المثال التطبيقي:الزر الرسومي
طبعا كما قلنا سابقا
بأننا لن نعتمد على أدوات أخرى بل سنرسم شكل أداتنا ونبرمجها بنفسنا لكن
أولا قبل هذا نحتاج إلى فكرة أداة جديدة والفكرة أو المثال الذي لدينا هو
أننا سنقوم ببرمجة زر مختلف عن الزر العادي أو القياسي والاختلاف هو بأنه
زر شكله رسومي وملون بعدة ألوان ومزخرف ويمكن تغيير خطوط زخرفته إلى عدة
أشكال مختلفة عن طريق خاصية سنضيفها له كما سنشرح لاحقا
طبعا المثال هو فكرتي و برمجتي وأسميت الزر الجديد ButtonGraphic
ولنقوم برسم شكل الزرالجديد سنعتمد على دوال الرسوميات والصور والنصوص التابعة لتقنية GDI+ .

خطوات العمل: الزر ButtonGraphic
أولا:بعد أن تفتح فيجوال ستديو اختر مشروع جديد Windows Control Library وسميه ButtonGraphic ثم اضغط على موافق انظر الصورة

وبعدها ستفتح لك بيئة التطوير فيجوال ستديو مشروع جديد فيه الملف UserControl.vb وفيه نافذة جديدة انظر الصورة:

ثانيا:سنبدأ برسم الأداة افتح نافذة محرر الاكواد الخاصة بالأداة وفي قسم التصريحات العام General ادخل الكود التالي :





كود:
Imports System.Drawing.Drawing2D
Imports System.ComponentModel

شرح الكود:قمنا هنا بالسطر الأول بإضافة فضاء الأسماء الخاص بالرسم والتابع لتقنية GDI+
وفي السطر الثاني أضفنا فضاء الأسماء ComponentModel ويفيد باضافة بعض الميزات لأداتنا وسنشرح عن بعض طرقه لاحقا

ثالثا:وفي قسم التصريحات الخاص بالأداة ButtonGraphic يعني بعد السطر التالي
Public Class ButtonGraphic
قم بإدخال هذا الكود:





كود:
Private M_AlgH As Single
Private M_AlgV As Single
Private Colr As Color
Private Colr1 As Color
Private colr2 As Color
Private M_Text As String
Public SaveColorButt As Color
Public SaveColorButtS As Color
Public SaveColorRect As Color
Public SColorB As Color
Public SColorBS As Color
Public SColorR As Color
Private M_ButtonStyle As HatchStyle
Public ClickColor As Color
Overloads Property ForeColor As Color
Overloads Property BackColor As Color

شرح الكود:قمنا بتعريف عدة متغيرات بالأنواع التالية Single-Color-String-HatchStyle
باستثناء السطران الأخيران ففيهما قمنا بإعادة تعريف الخاصيتان ForeColor-BackColor
الموجودتان افتراضيا في الأداة ونعيد تعريفهما لنتمكن من التعديل على
شيفرتهما ونستطيع إعادة تعريف أي خاصية موجودة بالأداة باستخدام الكلمة
OverLoads
سأشرح لاحقا ماذا سنفعل في كل متغير من المتغيرات التي عرفناها.

رابعا:سنقوم الآن برسم شكل الزر ولعمل ذلك في نافذة الاكواد اختر الحدث Paint وهو حدث الرسم الخاص بالأداة ويكون على هذا الشكل





كود:
Private Sub ButtonGraphic_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint




كود:

End Sub





كود:
Dim AA As Graphics = e.Graphics
Dim W As Long
Dim H As Long
W = Me.Size.Width - 15
H = Me.Size.Height - 15
Dim ZZ As New Pen(Brushes.Gold, 15)
Dim TT As New StringFormat()
ZZ.Alignment = PenAlignment.Center
TT.Alignment = StringAlignment.Center
AA.DrawRectangle(ZZ, New Rectangle(8, 8, W, H))
Dim XX As New HatchBrush(HatchStyle.Cross, Color.Green, Color.Silver)
AA.FillRectangle(XX, 8, 8, W, H)
XX.Dispose()
ZZ.Dispose()
AA.DrawString(Me.Text1, Me.Font, Brushes.Black, New RectangleF(75, 28, W, H))
AA.ResetTransform()
AA.DrawRectangle(Pens.Black, Me.ClientRectangle)


وبعد إدخالنا لهذا الكود سيتشكل شكل الزر وستظهر ملامحه ليصبح بهذا الشكل

طبعا استعملنا بالكود السابق دوال الرسوميات والنصوص التابعة لتقنية GDI+ ولهذا الغرض قمنا سابقا بإضافة فضاء الأسماء Drawing.Drawing2D لان طرق الرسم تندرج تحت فضاء الأسماء هذا.

شرح الكود:




كود:
Dim AA As Graphics = e.Graphics


هنا عرفنا متغير من نوع Graphics واسندناه لوسيطة الرسم e.Graphics التابعة للحدث Paint





كود:
Dim W As Long
Dim H As Long
W = Me.Size.Width - 15
H = Me.Size.Height - 15

عرفنا متغيران من نوع Long واسندناهما إلى خاصيتا القياس( الطول والعرض) للاداة

كود:
Dim ZZ As New Pen(Brushes.Gold, 15)
Dim TT As New StringFormat()
ZZ.Alignment = PenAlignment.Center
TT.Alignment = StringAlignment.Center


وهنا قمنا بتعريف متغير لرسم الإطار المحيط بالزر واستخدمنا دالة القلم Pen وحددنا لون الإطار
Brushes.Gold أي اللون الذهبي وسماكة الاطار 15
وقمنا بتعريف متغير لاضافة النص على الزر واستخدمنا الكائن StringFormat
ثم قمنا بتحديد محاذاة الاطار لتكون PenAlignment.Center
وقمنا بتحديد محاذاة النص لتكون StringAlignment.Center




كود:
AA.DrawRectangle(ZZ, New Rectangle(8, 8, W, H))
Dim XX As New HatchBrush(HatchStyle.Cross, Color.Green, Color.Silver)
AA.FillRectangle(XX, 8, 8, W, H)

قمنا سابقا بتعريف متغير إنشاء الاطار وهنا في السطر الأول استخدمنا الدالة DrawRectangle
لظهور الاطار على الأداة وحددنا محاذاته 8,8 وبالنسبة
لقياسه الطول والعرض اسندناهم إلى المتغيرات H,W التي عرفناها سابقا
وأسندنا إليها خاصية قياس الأداة( الطول والعرض) والغرض من هذه الحركة هو
عندما نقوم بتحجيم الأداة بالماوس فيحجم الاطار تلقائيا ويأخذ قياسات طول
وعرض الأداة ويكون بحجمها تماما.
السطر الثاني:قمنا بتعريف متغير لرسم المستطيل الرئيسي للزر واستخدمنا الفئة HatchBrush
والتي تمنحنا ميزة رسم مستطيل منقوش ويمكنك الاختيار بين 56 شكل نقش ويتألف النقش من لونين
طبعا نحن اخترنا شكل النقش التالي HatchStyle.Cross واخترنا له اللونين Color.Green و Color.Silver
السطر الثالث:لإظهار المستطيل المنقوش على الأداة
وداخل الاطارالذي رسمناه سابقا حددنا المحاذاة 8,8 والقياس اسندناه إلى
المتغيران H,W ليأخذ المستطيل حجم الأداة كما ذكرنا سابقا




كود:




وهذا السطر لظهور النص على الأداة وجعلنا النص الافتراضي هو
ButtonGraphic ولتغيير الخط المستخدم بكتابة النص اسندناه للخاصية Font
للاداة والتي تأتي افتراضيا مع الأداة ولا تحتاج لان ننشئها من جديد ثم
قمنا بجعل لون النص اسود وجعلنا محاذاته 28,75 .

ملاحظة:من يريد أن يجمل أدواته التي يصممها ويظهرها بشكل
احترافي فأنصحه بأن يتقن تقنية الرسم GDI+ بأن يحصل على كتاب يتكلم عنها
ويشرحها لان فيها الكثير الكثير من الأشياء التي لم اشرحها لأنها موضوع
آخر خارج نطاق موضوعنا الذي يتكلم عن برمجة الأدوات فقط قمت بشرح الأشياء
التي تهمنا

خامسا:إضافة
الخصائص اللازمة لأداة الزر التي ننِشئها:الان سنضيف الخصائص التي تمكننا
من تغيير ألوان الزر وتغيير النص ومحاذاته وتغيير شكل النقش للزر

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





كود:
Public Property اسم الخاصيةAsنوع الخاصية
Get
Return متغير من نوع الخاصية
End Get
Set(ByVal value Asنوع الخاصية)
نسند المتغير من نوع الخاصية إلى القيمة
Value
End Set


أولا:إنشاء خاصية النص textافتح نافذة الاكواد وفي قسم التصريحات الخاص بالأداة ButtonGraphic ادخل الكود التالي :





كود:
Public Property Text1 As String
Get
Return M_Text
*******()
End Get
Set(ByVal value As String)
M_Text = value
*******()
End Set
End Property


الشرح:هل تذكر متغيرM_Text الذي عرفناه في بداية شرحنا قمنا هنا باستدعائه وإسناده إلى متغير قيمة الخاصية text التي انِشأناها

ثانيا:إنشاء خصائص تغيير اللون
1-تغيير لون الاطار ادخل الكود التالي:اسم الخاصية RectColor





كود:
Public Property RectColor() As Color
Get
Return colr2
*******()
End Get
Set(ByVal value As Color)

colr2 = value
*******()
End Set
End Property

2-تغيير لوني المستطيل النقوش أسميت الخاصية ButtColor
اللون الأساسي





كود:
Public Property ButtColor() As Color
Get
Return Colr1
*******()
End Get
Set(ByVal value As Color)
Colr1 = value
*******()
End Set
End Property


3-اللون الثاني أسميت الخاصية ButtSColor




كود:
Public Property ButtSColor() As Color
Get
Return Colr
*******()
End Get
Set(ByVal value As Color)

Colr = value
*******()
End Set


الشرح :المتغيرات Colr,,Colr1,,Colr2 من النوع
Color التي سبق وان قمنا بتعريفها في بداية شرحنا استدعيناها واسندناها إلى
متغير قيم الخاصيات الثلاث.

ثالثا:إضافة خاصيتي محاذاة النص

1-محاذاة النص أفقيا لقد أسميت الخاصية AlgH





كود:
Public Property AlgH As Single
Get
Return M_AlgH
*******()
End Get
Set(ByVal value As Single)

M_AlgH = value
*******()
End Set
End Property


2-محاذاة النص عاموديا أسميت الخاصية AlgV




كود:
Public Property AlgV As Single
Get
Return M_AlgV
*******()
End Get
Set(ByVal value As Single)

M_AlgV = value
*******()
End Set
End Property


الشرح:المتغيران M_AlgV,,M_AlgH من نوع Single التي قمنا بتعريفها في بداية شرحنا استدعيناها واسندناها إلى متغير قيم الخاصيتين.

رابعا:إضافة خاصية تغيير شكل النقش للزر لقد أسميتها ButtonStyle
بالنسبة لهذه الخاصية سنضيف إليها لمسة فنية رائعة لكن أولا عندما نستخدم
الأدوات القياسية كLabel ,,TextBox,,pictureBox نلاحظ أن فيها بعض
الخصائص تكون طريقة اختيار القيمة فيها من قائمة فيها عدة قيم يعني
المقصود مثل الشكل التالي الأداة تيكست بوكس والخاصية ImeMode :
شاهد الشكل:

هذه هي اللمسة الفنية المقصودة يعني سنجعل خاصية تغيير شكل النقش
ButtonStyle هكذا سنضع لها قائمة فيها كل النقوش وسيختار مستخدم أداتنا
النقش الذي يريد من القائمة ولتحقيق هذه الغاية سنستخدم التركيبات من نوع
Enum الان ادخل الكود التالي:





كود:
Enum HatchStyle1
BackwardDiagonal
Cross
DarkDownwardDiagonal
DarkHorizontal
DarkUpwardDiagonal
DarkVertical
DashedDownwardDiagonal
DashedHorizontal
DashedUpwardDiagonal
DashedVertical
DiagonalBrick
DiagonalCross
Divot
DottedDiamond
DottedGrid
ForwardDiagonal
Horizontal
HorizontalBrick
LargeCheckerBoard
LargeConfetti
LargeGrid
LightDownwardDiagonal
LightHorizontal
LightUpwardDiagonal
LightVertical
Max
Min
NarrowHorizontal
NarrowVertical
OutlinedDiamond
Percent05
Percent10
Percent20
Percent25
Percent30
Percent40
Percent50
Percent60
Percent70
Percent75
Percent80
Percent90
Plaid
Shingle
SmallCheckerBoard
SmallConfetti
SmallGrid
SolidDiamond
Sphere
Trellis
Vertical
Wave
Weave
WideDownwardDiagonal
WideUpwardDiagonal
ZigZag
End Enum


أنشأنا تركيب من نوع Enumاسمه HatchStyle ووضعنا فيه كل أشكال النقوش ال56
الآن سننشأ الخاصية ButtonStyle





كود:
Public Property ButtonStyle As HatchStyle1
Get

Return M_ButtonStyle
*******()
End Get
Set(ByVal value As HatchStyle1)
M_ButtonStyle = value
*******()
End Set
End Property


الشرح:أولا:عندما أنشأنا الخاصية جعلنا نوعها HatchStyle وهو نفس اسم تركيب Enum الذي انِشأناه والذي يحتوي على أسماء النقوش 56
ثانيا:المتغير M_ButtonStyle من نوع HatchStyle والذي قمنا بتعريفه في بداية شرحنا استدعيناه واسندناه إلى متغير قيمة الخاصية.

سادسا:سنضيف على الخصائص بعض الميزات لكن أولا هل تذكر فضاء الأسماء

System.ComponentModel

والذي أضفناه في بداية شرحنا نستطيع من خلال بعض طرقه إضافة بعض الميزات لخصائص أداتنا

سأشرح بعض طرقه:
أولا:الطريقةescription وتستطيع من خلاله إضافة تعليق على خصائص أداتك
صيغتها كالتالي:





كود:
<Description("اكتب التعليق هنا")>


ثانيا:الطريقة:Browsable وهي لإظهار أو إخفاء الخاصية من صندوق الخصائص وتأخذ القيمتين True لإظهار الخاصية و False لإخفائها
صيغتها كالتالي:





كود:
<Browsable(True Or False)>


ثالثا:الطريقةefaultProperty وهي لاختيار الخاصية الافتراضية لأداتنا والتي سيكون التركيز عليها وصيغتها كالتالي:




كود:
<DefaultProperty("اسم الخاصية هنا")>


رابعا:الطريقة DefaultEvent وهي لاختيار الحدث الافتراضي للأداة والذي سيكون التركيز عليه
وصيغتها كالتالي:




كود:
<DefaultEvent("اسم الحدث هنا")>


خامسا:الطريقة DisplayName وهي لجعل اسم الخاصية الذي يظهر في صندوق
الخصائص غير الاسم الذي أسميته للخاصية عندما أنشأتها((الاسم الموجود في
الكود البرمجي)) يعني تسميها اسم جديد وصيغتها كالتالي




كود:
<DisplayName("ادخل الاسم الذي تريده أن يظهر في صندوق الخصائص")>


سادسا:الطريقة ToolBoxBitmap وهي لتغيير الصورة التي ستظهر بها الأداة في صندوق الأدوات

اختر من جهازك صورة مناسبة ولتكن أيقونة بقياس 16 X 16 صيغتها كالتالي:

كود:
<ToolboxBitmap("ادخل هنا مسار الأيقونة")>


طبعا يوجد الكثير من الطرق لكني لم اشرح إلا بعضها .
الآن بعد أن شرحنا الطرق سنقوم الآن باستخدامها على خصائص أداتنا التي انشأناها

أولا:سنستخدم الطريقة Description
لإضافة تعليق على خصائص أداتنا مثال: سنضيف تعليق على الخاصية Text1 اكتب
الطريقة فوق كود الخاصية مباشرة بدون أي فراغ أو مساحة ثم اكتب التعليق
الذي تريده بين الأقواس والتعليق الذي سنكتبه هو وظيفة الخاصية Text1 انظر
الكود التالي:

كود:
<Description("خاصية النص اكتب هنا النص اللذي سيظهر على لزر")>
Public Property Text1 As String
Get
Return M_Text
*******()
End Get
Set(ByVal value As String)
M_Text = value
*******()
End Set
End Property


كما رأيت في الكود السابق فقد كتبنا الطريقة فوق الخاصية مباشرة
قم بإضافة تعليقات إلى باقي الخصائص بنفس الطريقة التي اتبعناها مع الخاصية Text1

ثانيا:سنقوم بإظهار الخاصية text1 في صندوق الخصائص استعمل الطريقة Browsable واجعل القيمة True ليصبح كود الخاصية text1 كالتالي




كود:
<Browsable(True)>
<Description("خاصية النص اكتب هنا النص اللذي سيظهر على لزر")>
Public Property Text1 As String
Get
Return M_Text
*******()
End Get
Set(ByVal value As String)
M_Text = value
*******()
End Set
End Property

قم بإخفاء الخاصيتين ForeColor و BackColor اللتين قمنا
بإعادة تعريفهما في بداية شرحنا انظر غير القيمة true إلى false انظر الكود
التالي:





كود:
<Browsable(False)>
Overloads Property ForeColor As Color
<Browsable(False)>
Overloads Property BackColor As Color


إذا أردت إظهار آو إخفاء أي خاصية أخرى ففعل بها كما فعلنا سابقا
الآن سنقوم بجعل الاسم اللذي سيظهر للخاصية Text1 في صندوق الخصائص سنقوم بجعله Text

يعني سيكون اسم الخاصية في صندوق الخصائص Text أما اسمها البرمجي سيكون Text1 وسنستخدم الطريقة DisPlayName الآن سيصبح كود الخاصية Text1 على الشكل التالي

كود:
<DisplayName("Text")>
<Browsable(True)>
<Description("خاصية النص اكتب هنا النص اللذي سيظهر على لزر")>
Public Property Text1 As String
Get
Return M_Text
*******()
End Get
Set(ByVal value As String)
M_Text = value
*******()
End Set
End Property


تستطيع فعل هذا مع باقي الخصائص بنفس الطريقة التي اتبعتها مع الخاصية Text1

الآن سنقوم بتحديد الخاصية والحدث الافتراضيين لأداتنا
واللذين سيكون التركيز عليهما عند استخدام أداتنا سنجعل الحدث الأول
لأداتنا الحدث Click كوننا نقوم ببرمجة زر وسنستخدم الطريقة
DefaultEvent وسنجعل الخاصية الأولى لتكن مثلا الخاصية Text1 وسنستخدم
DefaultProperty سنضع الكود فوق السطر التالي مباشرة بدون مساحات

Public Class ButtonGraphic

كود:
<DefaultProperty("Text1"), DefaultEvent("Click")>
Public Class ButtonGraphic

الآن
سنقوم باختيار أيقونة لأداتنا لتظهر في شريط الأدوات وسنستخدم
ToolBoxBitmapقمت باختيار أيقونة من جهازي على هذا المسار D:\Button
Gra.ico الآن شاهد كيف صار الكود:





كود:
<DefaultProperty("Text1"), DefaultEvent("Click")>
<ToolboxBitmap("D:\Button Gra.ico")>
Public Class ButtonGraphic

الآن
انتهينا من إنشاء الخصائص اللازمة ووضعنا لها بعض الميزات لكن لنستطيع
استخدام خصائصنا التي انشأناها لتغيير الألوان والنص والنقش وغيرها يجب أن
نقوم بعمل التالي :

اذهب مرة أخرى
إلى حدث الرسم paint وهو الحدث الذي قمنا سابقا بكتابة اكواد رسم الزر فيه
من إطار وستطيل ونص على كل حال هذا هو الحدث وفيه الكود:





كود:
Private Sub ButtonGraphic_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
Dim AA As Graphics = e.Graphics
Dim W As Long
Dim H As Long
W = Me.Size.Width - 15
H = Me.Size.Height - 15
Dim ZZ As New Pen(Brushes.Gold, 15)
Dim TT As New StringFormat()
ZZ.Alignment = PenAlignment.Center
TT.Alignment = StringAlignment.Center
AA.DrawRectangle(ZZ, New Rectangle(8, 8, W, H))
Dim XX As New HatchBrush(HatchStyle.Cross, Color.Green, Color.Silver)
AA.FillRectangle(XX, 8, 8, W, H)
XX.Dispose()
ZZ.Dispose()
AA.DrawString("ButtonGraphic", Me.Font, Brushes.Black, New RectangleF(75, 28, W, H))
AA.ResetTransform()
AA.DrawRectangle(Pens.Black, Me.ClientRectangle)

End Sub


والآن قم بإجراء التغييرات التالية :
أولا:في السطر التالي:





كود:

Dim ZZ As New Pen(Brushes.Gold, 15)

غير Brushes.gold إلى RectColor ليصبح كالتالي





كود:
Dim ZZ As New Pen(RectColor, 15)


و RectColor هو اسم الخاصية التي انشِأناها تستطيع الآن تغيير لون الإطار عن طريق الخاصية السابق ذكرها.
ثانيا:في السطر التالي:





كود:

Dim XX As New HatchBrush(HatchStyle.Cross, Color.Green, Color.Silver)

غير HatchStyle.Cross إلى اسم الخاصية ButtonStyle
غيرColor.green إلى اسم الخاصية ButtSColor

غيرColor.Silver إلى اسم الخاصية ButtColor

ليصبح كالتالي:




كود:
Dim XX As New HatchBrush(ButtonStyle, ButtSColor, ButtColor)


تستطيع الآن تغيير شكل النقش وألوان الزر عن طريق الخصائص السابق ذكرها

ثالثا:في السطر التالي:




كود:

AA.DrawString("ButtonGraphic", Me.Font, Brushes.Black, New RectangleF(75, 28, W, H))

غير "ButtonGraphic" إلى اسم الخاصية Text1
غير 75 إلى اسم الخاصية AlgH
غير 28الى اسم الخاصية AlgV
ليصبح كالتالي:





كود:
AA.DrawString(Me.Text1, Me.Font, Brushes.Black, New RectangleF(Me.AlgV, Me.AlgH, W, H))


تستطيع الآن تغيير النص عن طريق الخاصية text1 وتغيير محاذاة النص يدويا عن طريق الخاصيتين
AlgH و AlgV

الآن انتهينا من كل ما يتعلق بالخصائص

سابعا:سنضيف على أداة الزر خاصتنا مؤثر لتجميل أداتنا وهو عند استخدامها
ومرور مؤشر الماوس فوقها فيتغير لونها وعندما نزيح مؤشر الماوس من فوقها
فيعود لونها الأصلي شاهد الصورة التالية لتعرف ماذا اقصد :

ولتضيف هذا المؤثر على الأداة افعل ما يلي :
اذهب إلى حدث مرور مؤشر الماوس فوق الأداة وهو الحدث MouseEnter ويكون شكله كالتالي:





كود:
Private Sub ButtonGraphic_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.MouseEnter




كود:

End Sub


وادخل فيه الكود التالي:





كود:
SaveColorButt = Me.ButtColor
SaveColorButtS = Me.ButtSColor
SaveColorRect = Me.RectColor
SColorB = Color.CadetBlue
ScolorR = Color.DarkGreen
ScolorBS = Color.Aqua
Me.ButtColor = ScolorB
Me.ButtSColor = ScolorBS
Me.RectColor = ScolorR
*******()


الشرح :في السطور الثلاثة الأولى المتغيرات
SaveColorButt,,SaveColorbutts,,SaveColorRect من نوع Color التي سبق وان
قمنا بتعريفها في أول شرحنا نقوم بإسنادها إلى الخواص
ButtColor,,ButtSColor,,RectColor
والفائدة من هذه الحركة هو أن يتم حفظ قيم هذه الخصائص في هذه المتغيرات لاستعادتها لاحقا

أما في السطور التالية :





كود:
SColorB = Color.CadetBlue
ScolorR = Color.DarkGreen
ScolorBS = Color.Aqua
Me.ButtColor = ScolorB
Me.ButtSColor = ScolorBS
Me.RectColor = ScolorR


المتغيرات ScolorB,,ScolorR,,ScolorBS من نوع Color والتي سبق أن قمنا
بتعريفها في أول شرحنا نسندها إلى الألوان التالية
Color.CadetBlue,,Color.DarkGreen,,Color.Aqua
ثم نسند خواص الألوان للأداة إلى هذه المتغيرات((السطور الثلاثة الأخيرة))
وهنا عندما يمر مؤشر الماوس فوق الزر سيأخذ الزر الألوان السابق ذكرها.

الآن حتى تكمل هذه الحركة تماما يجب عندما نزيح مؤشر الماوس بأن تعود ألوان الزر كما كانت
ولعمل ذلك اذهب إلى حدث خروج مؤشر الماوس من فوق الأداة وهو الحدث MouseLeave ويكون على الشكل التالي:





كود:
Private Sub ButtonGraphic_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.MouseLeave


End Sub


الآن سنستعيد الألوان من المتغيرات SaveColorButt,,SaveColorbutts,,SaveColorRect

فكما ذكرنا سابقا بأننا قمنا بحفظ ألوان الزر الأساسية في هذه المتغيرات ادخل الكود التالي :

كود:
Me.ButtColor = SaveColorButt
Me.ButtSColor = SaveColorButtS
Me.RectColor = SaveColorRect


الآن عند خروج مؤشر الماوس من فوق الزر ستعود ألوان الزر التي كانت سابقا.

سأقوم الآن بإضافة مؤثر آخر على الأداة لكن لن اشرح عنه حمل المثال واعرفه بنفسك فقط سأضع الكود:
الآن اذهب إلى الحدث MouseDown وادخل فيه الكود التالي:





كود:
ClickColor = Color.Moccasin
Me.ButtColor = ClickColor


واذهب إلى الحدث MouseUp وادخل فيه الكود التالي:




كود:
Me.ButtColor = SColorB

الآن انتهينا من إضافة مؤثرات وانتهينا من برمجة أداة الزر لكن بقي شيء أخير قبل النهاية
الآن اتبع الصور التالية:

كما رأيت في الصورة الثانية ستقوم بإدخال الكود التالي في المكان المحدد فيها

كود:
Me.Text1 = "ButtonGraphic"
Me.AlgH = 28
Me.AlgV = 75
Me.ButtColor = Color.Silver
Me.ButtSColor = Color.Goldenrod
Me.RectColor = Color.Gold
Me.ButtonStyle = HatchStyle1.Percent30

الشرح :قمنا بالكود السابق بتحديد القيم الافتراضية للخصائص التي انشأناها

انتهينا من برمجة زرنا والآن شاهد الكود النهائي للأداة

كود:
Imports System.Drawing.Drawing2D
Imports System.ComponentModel
<DefaultProperty("Text1"), DefaultEvent("Click")>
<ToolboxBitmap("D:\Button Gra.ico")>
Public Class ButtonGraphic
Private M_AlgH As Single
Private M_AlgV As Single
Private Colr As Color
Private Colr1 As Color
Private colr2 As Color
Private M_Text As String
Public SaveColorButt As Color
Public SaveColorButtS As Color
Public SaveColorRect As Color
Public SColorB As Color
Public SColorBS As Color
Public SColorR As Color
Private M_ButtonStyle As HatchStyle
Public ClickColor As Color
<Browsable(False)>
Overloads Property ForeColor As Color
<Browsable(False)>
Overloads Property BackColor As Color

Enum HatchStyle1
BackwardDiagonal
Cross
DarkDownwardDiagonal
DarkHorizontal
DarkUpwardDiagonal
DarkVertical
DashedDownwardDiagonal
DashedHorizontal
DashedUpwardDiagonal
DashedVertical
DiagonalBrick
DiagonalCross
Divot
DottedDiamond
DottedGrid
ForwardDiagonal
Horizontal
HorizontalBrick
LargeCheckerBoard
LargeConfetti
LargeGrid
LightDownwardDiagonal
LightHorizontal
LightUpwardDiagonal
LightVertical
Max
Min
NarrowHorizontal
NarrowVertical
OutlinedDiamond
Percent05
Percent10
Percent20
Percent25
Percent30
Percent40
Percent50
Percent60
Percent70
Percent75
Percent80
Percent90
Plaid
Shingle
SmallCheckerBoard
SmallConfetti
SmallGrid
SolidDiamond
Sphere
Trellis
Vertical
Wave
Weave
WideDownwardDiagonal
WideUpwardDiagonal
ZigZag
End Enum
<Description("خاصيةتغييرالشكلالرسوميللزر")>
Public Property ButtonStyle As HatchStyle1
Get

Return M_ButtonStyle
*******()
End Get
Set(ByVal value As HatchStyle1)
M_ButtonStyle = value
*******()
End Set
End Property

<Description("خاصيةتغييراللونالاولفيالمستطيلالموجودبالزر")>
Public Property ButtColor() As Color
Get
Return Colr1
*******()
End Get
Set(ByVal value As Color)
Colr1 = value
*******()
End Set
End Property
<Description("خاصيةتغييرلونالاطارالموجودعلىاطرافالزر")>
Public Property RectColor() As Color
Get
Return colr2
*******()
End Get
Set(ByVal value As Color)

colr2 = value
*******()
End Set
End Property
<Description("خاصيةتغييراللونالثانيفيالمستطيلالموجودبالزر")>
Public Property ButtSColor() As Color
Get
Return Colr
*******()
End Get
Set(ByVal value As Color)

Colr = value
*******()
End Set
End Property

<Description("خاصيةمحاذاةالنصافقيا ")>
Public Property AlgH As Single
Get
Return M_AlgH
*******()
End Get
Set(ByVal value As Single)

M_AlgH = value
*******()
End Set
End Property
<Description("خاصيةمحاذاةالنصعاموديا ")>
Public Property AlgV As Single
Get
Return M_AlgV
*******()
End Get
Set(ByVal value As Single)

M_AlgV = value
*******()
End Set
End Property
<Browsable(True)>
<Description(" خاصيةالنصاكتبهناالنصاللذيسيظهرعلىالزر ")>
<DisplayName("Text")>
<AmbientValue("ButtonGraphic")>
Public Property Text1 As String
Get
Return M_Text
*******()
End Get
Set(ByVal value As String)
M_Text = value
*******()
End Set
End Property



Private Sub ButtonGraphic_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown
ClickColor = Color.Moccasin
Me.ButtColor = ClickColor
End Sub

Private Sub ButtonGraphic_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.MouseEnter
SaveColorButt = Me.ButtColor
SaveColorButtS = Me.ButtSColor
SaveColorRect = Me.RectColor
SColorB = Color.CadetBlue
SColorR = Color.DarkGreen
SColorBS = Color.Aqua
Me.ButtColor = SColorB
Me.ButtSColor = SColorBS
Me.RectColor = SColorR
*******()
End Sub

Private Sub ButtonGraphic_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.MouseLeave
Me.ButtColor = SaveColorButt
Me.ButtSColor = SaveColorButtS
Me.RectColor = SaveColorRect
End Sub

Private Sub ButtonGraphic_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseUp
Me.ButtColor = SColorB
End Sub

Private Sub ButtonGraphic_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
Dim AA As Graphics = e.Graphics
Dim W As Long
Dim H As Long
W = Me.Size.Width - 15
H = Me.Size.Height - 15
Dim ZZ As New Pen(RectColor, 15)
Dim TT As New StringFormat()
ZZ.Alignment = PenAlignment.Center
TT.Alignment = StringAlignment.Center
AA.DrawRectangle(ZZ, New Rectangle(8, 8, W, H))
Dim XX As New HatchBrush(ButtonStyle, ButtSColor, ButtColor)
AA.FillRectangle(XX, 8, 8, W, H)
XX.Dispose()
ZZ.Dispose()
AA.DrawString(Me.Text1, Me.Font, Brushes.Black, New RectangleF(Me.AlgV, Me.AlgH, W, H))
AA.ResetTransform()
AA.DrawRectangle(Pens.Black, Me.ClientRectangle)
End Sub



End Class

الآن قم بحفظ المشروع وقم باستخراج ملف DLL للأداة لتستطيع استخدامها في كل مشاريعك شاهد الصور التالية

الآن:تجربة الأداة:
1- بعد أن تفتح فيجوال ستديو قم باختيار مشروع جديد من نوع Windows Application

2- ثم قم بإضافة الأداة إلى مشروعك ((لمن لا يعرف طريقة إضافتها لقد شرحت
كيفية إضافتها عندما شرحت الأسلوب الاول وراثة أداة سابقة راجع شرح
الأسلوب الاول الفقرة المتعلقة بإضافة الأداة والشرح بالصور))

3- على العموم بعد أن تضيف الأداة إلى المشروع ستنزل في شريط الأدوات قم
باختيار الأداة وارسمها على النموذج وتستطيع الآن تجربتها شاهد الصور
التالية:

الآن وبعد أن انتهينا نأتي إلى تحميل مثال الأداة كاملا مع الكود المصدري
أداة الزر ButtonGraphic
من برمجتي

حمل من هنا

تم بعون الله شرح الأساليب الثلاث لبرمجة أداة Windows Control Library
في فيجوال بيسيك دوت نت أتمنى أن يكون شرحي كافيا ووافيا في هذا الموضوع
كما أتمنى أن يكون واضحا ولنا إنشاء الله لقاء في مواضيع أخرى.

والسلام عليكم ورحمة الله