منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب
كيف تصنع كونترول شفاف - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : الأقسام التعليمية - المنتدى القديم (http://vb4arb.com/vb/forumdisplay.php?fid=90)
+--- قسم : مكتبة أدوات الأعضاء (http://vb4arb.com/vb/forumdisplay.php?fid=115)
+--- الموضوع : كيف تصنع كونترول شفاف (/showthread.php?tid=5182)

كيف تصنع كونترول شفاف - RaggiTech - 05-10-12

كاتب الموضوع : 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 بالتاكيد ستحصل علي بانل شفاف

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

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


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

كيف تصنع كونترول شفاف - RaggiTech - 05-10-12

كاتب المشاركة : Islam Ibrahim

جزاك الله خيراً

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



كيف تصنع كونترول شفاف - RaggiTech - 05-10-12

كاتب المشاركة : أبو يعقوب

السلام عليكم

في ادوات طيبة مؤمنة وفي ادوات يهودية صهيونية متعصبة ضد الشفافية Angry

انا اظن ان السبب : الاداة تطلب من الويندوز ان يرسمها مثل button -- هل هذا هو السبب؟

=====

بخصوص الشفافية هناك موضوع اخر

وهو يتعلق بتحديد شكل سطح الادة


مثلا كيف نجعل الادة على شكل دائرة او مربع مقوس الزوايا

لك موضوع استاذي العزيز يتحدث عن تدوير شكل الادوات


وذلك عن طريق استخدام الخاصية region

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


انا والحمد لله اعرف طريقة اطبقها دائما وهي ناجحة لحد الآن

وهي تتلخص في التالي:

1- تضليل (shadows ) الخاصية BackColor للاداة الام

2- جعل BackColor تبع الاداة الام = Color.Transparent


هكذا يكون هناك خاصية BackColor للاداة الام وخاصية جديدة ولن يستطيع المستخدم تغيير لون الخلفية الحقيقي ( لون خلفية الام)


هكذا


كود :
[color=#000000][COLOR=#0000bb][/color][color=#007700]Public Class [/color][COLOR=#0000bb]ExControl
    Inherits Control
    Dim _BackColor [/COLOR][color=#007700]As [/color][color=#0000bb]Color [/color][color=#007700]= [/color][color=#0000bb]Color[/color][color=#007700].[/color][COLOR=#0000bb]White
    [/COLOR][color=#007700]Public [/color][color=#0000bb]Sub [/color][COLOR=#007700]New()
        [/COLOR][color=#0000bb]SetStyle[/color][color=#007700]([/color][color=#0000bb]ControlStyles[/color][color=#007700].[/color][color=#0000bb]SupportsTransparentBackColor[/color][color=#007700], [/color][color=#0000bb]True[/color][COLOR=#007700])
        [/COLOR][color=#0000bb]MyBase[/color][color=#007700].[/color][color=#0000bb]BackColor [/color][color=#007700]= [/color][color=#0000bb]Color[/color][color=#007700].[/color][COLOR=#0000bb]Transparent
    End Sub
    [/COLOR][color=#007700]Public [/color][color=#0000bb]Shadows Property BackColor[/color][color=#007700]() As [/color][COLOR=#0000bb]Color
        Get
            [/COLOR][color=#007700]Return [/color][COLOR=#0000bb]_BackColor
        End Get
        Set[/COLOR][color=#007700]([/color][color=#0000bb]ByVal value [/color][color=#007700]As [/color][color=#0000bb]Color[/color][COLOR=#007700])
            If [/COLOR][color=#0000bb]_BackColor [/color][color=#007700]<> [/color][COLOR=#0000bb]value Then
                _BackColor [/COLOR][color=#007700]= [/color][COLOR=#0000bb]value
                Me[/COLOR][color=#007700].[/color][color=#0000bb]Invalidate[/color][COLOR=#007700]()
            [/COLOR][color=#0000bb]End [/color][COLOR=#007700]If
        [/COLOR][COLOR=#0000bb]End Set
    End Property
    [/COLOR][color=#007700]Protected [/color][color=#0000bb]Overrides Sub OnPaint[/color][color=#007700]([/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Windows[/color][color=#007700].[/color][color=#0000bb]Forms[/color][color=#007700].[/color][color=#0000bb]PaintEventArgs[/color][COLOR=#007700])
        [/COLOR][color=#0000bb]MyBase[/color][color=#007700].[/color][color=#0000bb]OnPaint[/color][color=#007700]([/color][color=#0000bb]e[/color][COLOR=#007700])

    [/COLOR][COLOR=#0000bb]End Sub
End [/COLOR][COLOR=#007700]Class  
[/COLOR][color=#0000bb][/color][/COLOR]




ماتعليقك على هذه الطريقة؟

كيف تصنع كونترول شفاف - RaggiTech - 05-10-12

كاتب المشاركة : silverlight

الأخ الفاضل إسلام

كما تعلم أن الباتون لم يتم توريثه مباشرة من الكونترول ولكنه جاء من كونترول أخر وتم استخدام Implements IButtonControl وبالتالي هذا الكلاس سيعمل كحاجز وبالتأكيد لن تري اي شفافية لذلك ولكي تبني باتون شفاف إما أن تقوم ببناؤه مباشرة من الكونترول وتستخدم+GDI لكي ترسم ButtonState Enum في حالاتها المختلفة أو عليك أن تبني الكونترول الأصلي وتستخدم Implements IButtonControl كلاس معه

كيف تصنع كونترول شفاف - RaggiTech - 05-10-12

كاتب المشاركة : Islam Ibrahim

وصلت الفكرة

قد غاب ذلك عن ذهني

كيف تصنع كونترول شفاف - RaggiTech - 05-10-12

كاتب المشاركة : silverlight

الأخ الفاضل أبو يعقوب

تستطيع أيضا أن تقوم بعمل Overrides للصفة BackColor وتجعل قيمتها تساوي Color.Transparent


كود :
Public Class ExControl

Inherits Control

Dim _BackColor As Color = Color.Transparent

Public Sub New()
SetStyle(ControlStyles.SupportsTransparentBackColor, True)

End Sub

Public Overrides Property BackColor() As Color
Get
Return _BackColor
End Get
Set(ByVal value As Color)
If _BackColor <> value Then
_BackColor = value
Me.Invalidate()
End If
End Set
End Property

End Class
وبالتأكيد ستحصل علي نفس الشئ

أما بخصوص Region والرسم بشكل عام يجب أن لا ننسي أين نرسم الشكل المطلوب رسمه
فإن كان الهدف هو رسم مستطيل مثلا علي Region يجب أن نراعي أن Pen thickness أثناء عملية الرسم بالإضافة الي AntiAliasing لو راعينا ذلك لن يحدث أي تشوه