[RaggiTech]

الكونترول Slider

غالبا يسمح برنامج Power Point لمستخدميه بإضافة بعض الصور ومن ثم يتيح للمستخدم تحريك هذه الصور علي شكل Slides و أيضا يتيح للمستخدم إمكانية تحديد الإتجاه الذي سوف تظهر منه الصورة فعلي سبيل المثال الصورة يمكن أن تظهر من اليسار الي اليمين أو من أسفل إلي اعلي أو من الممكن أن تتحرك الصورة بشكل قطري من أسفل الي اعلي والعكس

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

كود :

Public Enum SlideEffects

' Image Slides from Left to right
LeftToRight

' Image Slides from right to left
RighTotLeft

' Image slide from top to down
TopToDown

' Image slide from down to top
DownToTop

' Image slide diagonally from top left to bottom right
TopLeftToBottomRight

' Image slide diagonallyfrom bottom right to top left
BottomRightToTopLeft

' Image slide diagonally from bottom left to top right
BottomLeftToTopRight

' Image slide diagonally from top right to bottom left
TopRightToBottomLeft

End Enum

صفات الكونترول Control Property

تم إضافة ثلاثة Property رئيسية للتحكم في الكونترول بالإضافة الي بعض الصفات الأخري لكن الصفات التي يهمنا التحدث عنها هي:

§ SlidingEffect والهدف منها هو تحديد إتجاه الصورة

كود :

<System.ComponentModel.DefaultValue(GetType(SlideEffects), "LeftToRight")> _
<System.ComponentModel.Description("Set iamge direction.")> _
<System.ComponentModel.Category("Control Style")> _
Public Property SlidingEffect() As SlideEffects
Get
Return m_slidEffect
End Get
Set(ByVal value As SlideEffects)
m_slidEffect = value
End Set
End Property

§ SlidingImage والهدف منها هو تحديد الصورة التي سوف تستخدم داخل الكونترول

كود :

<System.ComponentModel.DefaultValue(GetType(Bitmap), "")> _
<System.ComponentModel.Description("Set iamge.")> _
<System.ComponentModel.Category("Control Style")> _
Public Property SlidingImage() As Bitmap
Get
Return m_slidingBmp
End Get
Set(ByVal value As Bitmap)
m_slidingBmp = value
End Set
End Property

§ SlidingSpeed والهدف منها هو التحكم في سرعة حركة الصورة

كود :

<System.ComponentModel.DefaultValue(GetType(Single), "2")> _
<System.ComponentModel.Description("Set slide speed.")> _
<System.ComponentModel.Category("Control Style")> _
Public Property SlidingSpeed() As Single
Get
Return CSng(m_slidingSpeed.TotalSeconds)
End Get
Set(ByVal value As Single)
m_slidingSpeed = New TimeSpan(0, 0, 0, 0, CInt((1000 * value)))
End Set
End Property

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

تم إضافة Public Sub للتحكم في حركة الصورة وهو يسمي AnimateSlide حيث هو المسؤل عن تحريك الصورة والكود الخاص به كالتالي

كود :

Public Sub AnimateSlide()
m_thread = New System.Threading.Timer(New System.Threading.TimerCallback(AddressOf ThreadTimer_Tick), Nothing, 30, 30)
m_percent = 0
m_sliding = True
m_startTime = DateTime.Now
Invalidate()
End Sub

رسم الصورة المتحركة

تم إضافة Protected Sub حيث فيه تتم عملية الرسم والفكرة هنا مبنية علي إستخدام الكلاس Matrix ومن ثم نقوم بعمل Transform للرسم باستخدام هذه Matrix ومن ثم نرسم الصورة طبقا للحالة الخاصة بها أو طبقا لاتجاهها في Enum والكود تكراري تقريبا ولكن يختلف طبقا للاتجاه الموجود في SlideEffects Enum والكود التالي يوضح جزء من هذا الإجراء

كود :

Protected Sub DrawSlidingEffect(ByVal g As Graphics, ByVal control As ImageSlider)

If m_slidingBmp IsNot Nothing Then

Select Case m_slidEffect

Case SlideEffects.BottomLeftToTopRight
Dim mx As New Drawing2D.Matrix(1, 0, 0, 1, (control.Width * m_percent / 100) - control.Width, -(control.Height * m_percent / 100) + control.Height)
g.Transform = mx
g.DrawImage(m_slidingBmp, control.ClientRectangle, 0, 0, m_slidingBmp.Width, m_slidingBmp.Height, GraphicsUnit.Pixel)
mx.Dispose()
Exit Select

' ......... rest of code

End Select
End If

End Sub

كيف تستخدم الكونترول

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

كود :

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
ImageSlider1.SlidingEffect = SlideEffects.DownToTop
ImageSlider1.AnimateSlide()
End Sub

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

وبالمرفقات ستجدون نسخة كاملة من الكلاس وطريقة استخدامه و الملف المرفق بنسخة الفيجوال استوديو 2008

وإن شاء رب العزة سوف نكمل إضافة باقي المؤثرات الأخري في مقال لاحق

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