[RaggiTech]

كاتب الموضوع : silverlight

أعتقد ان الحصول علي الشفافية للكونترول أمر يفكر به الجميع وهو أيضا موضوع يشغل بال مطوري الكونترول بشكل خاص وكما نعلم جميعا أن خاصية الشفافية أو Opacity Property متاحة فقط مع الفورم والسؤال هو كيف نفعل ذلك مع الكونترول

الفكرة تنحصر في الخطوات التالية:

1- استخدام الوراثة مع الكونترول
2- في Constructor نستخدم SetStyle ونجعل الكونترول يدعم شفافية اللون بأن نجعل القيمة SupportsTransparentBackColor تساوي True
3- عمل Overrides للخاصية CreateParams
4- إضافة Property للكونترول نطلق عليها Opacity
5- عمل Overrides للحدث OnPaintBackground
حيث هنا علينا أن نملأ ClientRectangle الخاص بالكونترول بلون شفاف وذلك باستخدام +GDI وباستخدام OPacity

ولتنفيذ اللأفكار اعلاه نقوم بإتباع التالي

1- افتح مشروع

2- من قائمة Project اختار Add Class ثم لنطلق عليه TransparentControl وهنا ستحصل علي الكود بالشكل التالي

كود :

Public Class TransparentControl

End Class

3- باستخدام الوراثة نقوم بإضافة كونترول وذلك باستخدام جملة Inherits وهنا سنحصل علي الكود بالشكل التالي

كود :

Public Class TransparentControl

Inherits Control

End Class

4- بعد جملة Inherits Control نبدأ في إضافة Constructor الي الكلاس والمقصود هنا هو إضافة Public Sub New

ويكون الكود بالشكل التالي

كود :

Public Class TransparentControl

Inherits Control

Public Sub New()

End Sub

End Class

حتي هذه المرحلة لو قمت بعمل Build للكونترول من قائمة Build ستحصل علي كونترول في نافذة الأدوات ToolBox حيث يمكنك إضافتة الي الفورم بشكل عادي كما تفعل مع اي كونترول اخر موجود في نافذة الأدوات وبالتأكيد هو لن يكون شفافا لأننا حتي هذه اللحظة لم نضيف أي كود الي الكلاس لكي نجعله شفافا

5- الأن لنضيف بعض الكود الي الكلاس بأن نقوم بتعريف متغير يعبر عن الشفافية وهذا المتغير قيمته عبارة عن Double ثم في Constructor الخاص يالكلاس نفوم باستخدام SetStyle ونجعل الكونترول يدعم الشفافية الخاصة باللون وبالتالي سنحصل علي الكود بالشكل التالي

كود :

Public Class TransparentControl

Inherits Control

#Region " Fields "

Private m_opacity As Double

#End Region

#Region " Constructor "

Public Sub New()

SetStyle(ControlStyles.SupportsTransparentBackColor, True)
UpdateStyles()
m_opacity = 1.0R

End Sub

#End Region

End Class

6- الأن نضيف صفة Property للكلاس تعبر عن الشفافية وأيضا نقوم بعمل Overrides للصفه CreateParams

كما تلاحظون في الخاصية Opacity أن قيمتها عبارة عن Double الأن وتحديدا مع هذه الخاصية علينا أن نستخدم الكلاس OpacityConverter ومن ثم وبإستخدام Attributes نوضح لهذه الخاصية أنها سوف تستخدم هذا الكلاس والهدف هنا من ذلك هو تحويل القيمة من Double لكي تظهر للمستخدم بالصورة %xx حيث القيمة xx عبارة عن رقم يترواح بين الصفر و 100

أيضا الصفة CreateParams هامة جدا حيث هنا نحدد ExStyle للكونترول وهذه القيمة هي التي سوف تجعل الكونترول شفافا

كود :

#Region " Property "

<System.ComponentModel.DefaultValue(1.0R)> _
<System.ComponentModel.TypeConverter(GetType(OpacityConverter))> _
<System.ComponentModel.Category("Panel Style")> _
Public Property Opacity() As Double
Get
Return m_opacity
End Get
Set(ByVal value As Double)
m_opacity = value
UpdateStyles()
Refresh()
End Set
End Property

Protected Overrides ReadOnly Property CreateParams() As System.Windows.Forms.CreateParams
Get

Dim cp As CreateParams = MyBase.CreateParams()
cp.ExStyle = cp.ExStyle Or &H20
Return cp

End Get
End Property

#End Region

7- أخر شئ هو علينا أن نقوم بعمل Overrides للحدث OnPaintBackground ومن ثم نملأ أبعاد الكونترول بلون الخلفية BackColor وأيضا باستخدام Opacity

كود :

#Region " Event "

Protected Overrides Sub OnPaintBackground(ByVal e As System.Windows.Forms.PaintEventArgs)

e.Graphics.FillRectangle(New SolidBrush(Color.FromArgb(Me.Opacity * 255, Me.BackColor)), Me.ClientRectangle)

End Sub

#End Region

End Class

لو قمت بتنفيذ الكود أعلاه ستحصل علي كونترول شفاف
الأن عليك بعمل Build للكونترول من قائمة Build وهنا سيظهر الكونترول في نافذة الأدوات حيث يمكننا أن نتعامل معه مثلما نتعامل مع اي كونترول أخر موجود في نافذة الأدوات

بالطبع ولكي تتأكد أن الكونترول يعمل بشكل جيد ومناسب عليك ان تضع بالفورم اي صورة باستخدام الصقة BackgroundImage ثم أضف الكونترول الي الفورم وقم بالتعامل مع الصفة Opacity الخاصة بالكونترول ولنجعلها 50% مثلا وهنا ستجد ان أنك تري الصورة الموجودة علي الفورم من خلال الكونترول وهذا يؤكد أنك قد حصلت علي كونترول شفاف

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

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

وبالتالي سيكون الكود النهائي للكلاس الشفاف هو كالأتي

كود :

<System.ComponentModel.Designer("System.Windows.Forms.Design.ParentControlDesigner, System.Design", GetType(System.ComponentModel.Design.IDesigner))> _
Public Class TransparentControl

Inherits Control

#Region " Fields "

Private m_opacity As Double

#End Region

#Region " Constructor "

Public Sub New()

SetStyle(ControlStyles.SupportsTransparentBackColor, True)
UpdateStyles()
m_opacity = 1.0R

End Sub

#End Region

#Region " Property "

<System.ComponentModel.DefaultValue(1.0R)> _
<System.ComponentModel.TypeConverter(GetType(OpacityConverter))> _
<System.ComponentModel.Category("Panel Style")> _
Public Property Opacity() As Double
Get
Return m_opacity
End Get
Set(ByVal value As Double)
m_opacity = value
UpdateStyles()
Refresh()
End Set
End Property

Protected Overrides ReadOnly Property CreateParams() As System.Windows.Forms.CreateParams
Get

Dim cp As CreateParams = MyBase.CreateParams()
cp.ExStyle = cp.ExStyle Or &H20
Return cp

End Get
End Property

#End Region

#Region " Event "

Protected Overrides Sub OnPaintBackground(ByVal e As System.Windows.Forms.PaintEventArgs)

e.Graphics.FillRectangle(New SolidBrush(Color.FromArgb(Me.Opacity * 255, Me.BackColor)), Me.ClientRectangle)

End Sub

#End Region

End Class

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

شئ أخير حاول أن تستخدام نفس الأسلوب أعلاه مع Panel مثلا اي بدلا من توريث الكونترول استخد Panel بدلا منه اي عليك تغيير السطر Inherits Control الي Inherits Panel بالتاكيد ستحصل علي بانل شفاف

لكن يتبقي السؤال هل هذا الأسلوب نستطيع استخدامه مع بقية الكونترول الأخري أم لا ؟
أعتقد أن هذا أول سؤال ستسأله لنفسك بعد أنتهائك من قراءة الموضوع أعلاه
حاول تجرب بنفسك ولنري بعض من أفكاركم بخصوص الشفافية

و للحديث بقية .................


بالتوفيق
أخوكم عمر