[RaggiTech]

التطبيق النهائي:

في المثال التالي سنحاول ان نبني باتون شكله لطيف وهي فكرة بسيطة جدا لكيفية استخدام الأفكار أعلاه

كود :

Imports System.Drawing.Drawing2D

Public Class RibbonButton
Inherits Control

Private DarkColor As Color
Private LightColor As Color
Private rect As Rectangle
Private Path As GraphicsPath
Private m_state As ButtonState = ButtonState.Normal

Public Sub New()

Me.SetStyle(ControlStyles.OptimizedDoubleBuffer, True)
Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
Me.SetStyle(ControlStyles.UserPaint, True)
Me.UpdateStyles()

Me.SetNormalstate()
Me.SetGraphicsData()

End Sub

Protected Overrides ReadOnly Property DefaultSize() As System.Drawing.Size
Get
Return New Size(50, 50)
End Get
End Property

Private Sub SetGraphicsData()
Path = New GraphicsPath()
Path.AddEllipse(Me.ClientRectangle)
Dim rgn As New Region(Path)
Me.Region = rgn
rect = New Rectangle(Me.ClientRectangle.X + 1, Me.ClientRectangle.Y + 1, Me.ClientRectangle.Width - 2, Me.ClientRectangle.Height - 2)
End Sub

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

Select Case m_state

Case ButtonState.Default, ButtonState.Disabled, ButtonState.Normal
SetNormalstate()
DrawGlowRibbon(e.Graphics, rect, DarkColor, LightColor)

Exit Select

Case ButtonState.Hot
SetHoverstate()
DrawGlowRibbon(e.Graphics, rect, DarkColor, LightColor)
Exit Select
Case ButtonState.Pressed

SetPressedState()
DrawGlowRibbon(e.Graphics, rect, DarkColor, LightColor)
End Select

End Sub

Protected Overrides Sub OnMouseEnter(ByVal e As System.EventArgs)
MyBase.OnMouseEnter(e)
m_state = ButtonState.Hot
Invalidate()
End Sub

Protected Overrides Sub OnMouseDown(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseDown(e)

m_state = ButtonState.Pressed
Invalidate()

End Sub

Protected Overrides Sub OnMouseUp(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseUp(e)
OnMouseEnter(e)
End Sub

Protected Overrides Sub OnMouseMove(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseMove(e)

If (e.Button And MouseButtons.Left) = MouseButtons.Left And Not rect.Contains(e.Location) And m_state = ButtonState.Pressed Then
OnMouseLeave(e)
End If
End Sub

Protected Overrides Sub OnMouseLeave(ByVal e As System.EventArgs)
MyBase.OnMouseLeave(e)

m_state = ButtonState.Default
Invalidate()

End Sub

Protected Overrides Sub OnResize(ByVal e As System.EventArgs)
MyBase.OnResize(e)
SetGraphicsData()
Invalidate()
End Sub

Protected Overrides Sub OnSizeChanged(ByVal e As EventArgs)
MyBase.OnSizeChanged(e)
SetGraphicsData()
End Sub

Private Sub DrawGlowRibbon(ByVal g As Graphics, ByVal rect As Rectangle, ByVal darkColor As Color, ByVal lightColor As Color)

Dim mode As SmoothingMode = g.SmoothingMode
g.SmoothingMode = SmoothingMode.AntiAlias

Dim darkRatio As Integer = 16
Dim WhiteColor As Color = Color.White

Dim sigmaBlend As New Blend
sigmaBlend.Factors = New Single() {0.0F, 0.4F, 0.8F, 1.0F}
sigmaBlend.Positions = New Single() {0.0F, 0.3F, 0.4F, 1.0F}

Dim scale As SizeF = New SizeF(CSng(rect.Width / 100), CSng(rect.Height / 100))
Dim darkerColor As Color = darkColor

Dim darkerColorAlpha As Integer = darkerColor.A
Dim darkerColorRed As Integer = darkerColor.R - CInt(((darkerColor.R) / 100) * darkRatio)
Dim darkerColorGreen As Integer = darkerColor.G - CInt(((darkerColor.G) / 100) * darkRatio)
Dim darkerColorBlue As Integer = darkerColor.B - CInt(((darkerColor.B) / 100) * darkRatio)
Dim glowColor As Color = Color.FromArgb(darkerColorAlpha, darkerColorRed, darkerColorGreen, darkerColorBlue)

Using Path As Drawing2D.GraphicsPath = New Drawing2D.GraphicsPath()
Path.AddEllipse(rect)
Dim pgb As New Drawing2D.PathGradientBrush(Path)
pgb.CenterPoint = New PointF(rect.Left + (rect.Width / 2), rect.Bottom + (33 * scale.Height))
pgb.CenterColor = Color.FromArgb(255, lightColor)
pgb.SetSigmaBellShape(0.85)
If darkerColor.GetBrightness >= 0.3 Then
darkerColor = glowColor
End If
pgb.SurroundColors = New Color() {Color.FromArgb(255, darkerColor)}
g.FillEllipse(pgb, rect)
End Using

Using Path As Drawing2D.GraphicsPath = New Drawing2D.GraphicsPath()
Path.AddArc(rect, 180, 180)
Using p As Pen = New Pen(glowColor)
Using lgb As New LinearGradientBrush(Path.GetBounds(), Color.FromArgb(64, WhiteColor), Color.FromArgb(84, WhiteColor), LinearGradientMode.Vertical)
lgb.Blend = sigmaBlend
g.FillPath(lgb, Path)
End Using
g.DrawPath(p, Path)
End Using
End Using

Dim blender As Drawing2D.Blend = New Drawing2D.Blend()
blender.Positions = New Single() {0, 0.9, 1}
blender.Factors = New Single() {0, 1, 1}

Dim sweepRectangle As Rectangle = rect
sweepRectangle.Height -= (rect.Height / 2)
sweepRectangle.Inflate(-16 * scale.Width, -3 * scale.Height)
Using lgb As New Drawing2D.LinearGradientBrush(sweepRectangle, WhiteColor, Color.Empty, 90, True)
sweepRectangle.Height -= scale.Height / 2
lgb.Blend = blender
g.FillEllipse(lgb, sweepRectangle)
End Using

Using borderPen As New Pen(darkerColor, 2)
Dim borderRect As Rectangle = rect
g.DrawEllipse(borderPen, borderRect)
End Using

g.SmoothingMode = mode
End Sub

Private Sub SetNormalstate()
DarkColor = Color.Blue
LightColor = Color.Cyan
End Sub

Private Sub SetHoverstate()
DarkColor = Color.Maroon
LightColor = Color.LightYellow
End Sub

Private Sub SetPressedState()
DarkColor = Color.DarkOrange
LightColor = Color.Yellow
End Sub

#Region " Enum "

<Flags()> _
Private Enum ButtonState
Normal = &H0
Hot = &H1
Pressed = &H2
Disabled = &H4
[Default] = &H8
End Enum

#End Region

End Class

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

المثال بالمرفقات بنسخة الفيجوال استوديو 2008
أتمني ان تكون الأفكار التي تحدثنا عنها مفيدة للبعض منكم بشكل ما ...... أعتقد أنكم يمكنك تطوير الكلاس مثل رسم Text أو رسم صورة ما داخل Ribbon أو إضافة الكثير من Property له ليتناسب مع ما احتياجاتكم

أتمني أن نري إبداعاتكم المختلفة من خلال مشاركتكم اللاحقة

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