ورشة الأفكار - الزر المضيء- عصابة الـ DotNet

بسم الله الرحمن الرحيم

و الصلاة و السلام على أشرف المرسلين سيدنا محمد خاتم الأنبياء و المرسلين

أما بعد:



ورشة الأفكار هي ورشة لتجسيد بعض الأفكار و التحسينات و الخدع باستعمال البرمجة على منصة DotNet للاستفادة منها إلى أقصى حد و نذهب ببرامجنا بعيدا

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

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





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



و لعل كل من استعمل مكتبة DotNetBar لاحظ أن نفس التأثير يمتلكه الزر ButtonX و ذلك باستدعاء دالة خاصة بذلك اسمها Pulse و يتم ايقاف الوميض إما بتمرير الفأرة فوق الزر أو باستدعاء الدالة StopPulse أو عندما يستوفي عدد الومضات التي نعرفها له حين استدعاء الدالة Pulse





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



بالملاحظة الجيدة سنفهم ما يلي:

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

سنحتاج للون لنلون به و هذا اللون سيزيد معامل شفافيته و ينقص في مجال معين: اي أن له قيمتان حديتان كبرى و صغرى و كلما بلغ إحداهما غير اتجاه تزايده إلى تناقص أو تناقصه إلى تزايد
سنحتاج لحلقة تكرارية قد تتكرر للأبد مما يعني أن For غير صالحة و بالتالي بقيت لدينا فقط الحلقة While
سيكون هناك شرط لتوقف الحلقة نسميه مثلا StopPulsing و يصبح true إذا ما نادينا الاجراء StopPulse أو إذا ما دخل مؤشر الفأرة إلى الزر أي عند MouseEnter
لكن حتما ستقع بعض المشاكل يجب حلها و هذه المشاكل نلخصها في ما يلي:

إن التلوين فوق التلوين يزيد من كثافة اللون فتقل شفافيته و لكن كيف سنعود للعكس أي لشفافية أكثر ؟ فلو حذفنا اللون بالدالى Clear و لونا بعده فتضيع ملامح الزر (الصورة و الكتابة التي عليه) و بالتالي يصبح بلا معنى.
إن الحلقة While لن تدعنا ننفذ اي شيء آخر بل سندخل في تكرار و بالتالي لن يتنفذ أي شيء آخر و سنحصل على برنامج متوقف لا يستجيب لنا و هذا أمر لا نريده.
عندما نوقف الوميض قد يتوقف في حالة قليلة الشفافية و بالتالي كيف سنعيد الزر لحالته الطبيعية (شكله الطبيعي) دون وميض؟
و الحل سهل جدا و هو كالآتي:

قبل أن نبدأ بالتلوين و ندخل الحلقة While نخزن صورة الزر في حالته العادية في متغير من نوع Bitmap
لحل مشكلة الشفافية فإننا في كل مرة نريد تلوين المساحة بدرجة معينة للون الوميض نقوم أولا برسم الصورة العادية التي خزناها للزر في حالته العدية و هكذا نتخلص من أي تأثير سابق و نلون الوميض الجديد بلون الشفافي الذي نريد من دون أن نخاف أن يقع تداخل أو نتساءل عن طريقة زيادة الشفافية
لحل مشكل الالتصاق في حلقة لا نهائية سنعتمد على تقنية الـ Multithreading و هكذا سنجعل الاجراء الذي يقوم بالتلوين يتنفذ في Thread فرعي منفصل عن الـ thread الرئيسي. مما يسمح لهذا الأخير بالاستمرار بالعمل بشكل جد طبيعي دون ن نحس باي ثقل أو توقف.
لحل مشكل بقاء تأثير الوميض عند ايقافه على الزر فإننا بمجرد الخروج من الحلقة While نعيد رسم الصورة التي احتفظنا بها للزر سابقا فيزول اي تأثير للوميض.
إذن بهذه البساطة سنمر الآن للتطبيق للحصول على تاثير جذاب بأقل كود ممكن و لمن لم يستعمل الـ Thread من قبل فهي سهلة جدا و سيفهمها هنا بإذن الله.



ككل مرة نفتح مشروعا جديدا من نوع Windows Application أو نفتح مشروعا سابقا من مشاريعنا ثم نضيف به Class و نسميها مثلا PulseButton

نبدأ أولا باضافة تعريف المكتبات التي سنستعملها في الكلاس

VB.Net
Imports System.Threading

C#.Net
using System;
using System.Windows.Forms;
using System.Drawing;
using System.Threading;

نجعل هذه الكلاس ترث من الـ Button العادية:

VB.Net
Public Class PulseButton
Inherits Button

C#.Net
class PulseButton : Button

الآن نعرف دالة البناء و الإجراء InitializeComponents

VB.Net
Sub New()
InitializeComponent()
End Sub
Private Sub InitializeComponent()
Me.SuspendLayout()
Me.ResumeLayout(False)
End Sub

C#.Net
public PulseButton(){
InitializeComponent();
}
private void InitializeComponent(){
this.SuspendLayout();
this.MouseEnter += new System.EventHandler(this.PulseButton_MouseEnter);
this.ResumeLayout(false);
}

السطر المضاف في كود C#.Net الخاص بربط الحدث MouseEnter سنكتب إجراءه لاحقا. أما في VB.Net فلا نحتاج لكتابته لأننا نكتب Handles أمام الإجراء و نربطه مباشرة من هناك



نعرف المتغير StopPulsing الذي يعلن امكانية أو عدم امكانية الوميض و اذي سنستعمله في الحلقة الشرطية لاحقا. و نعرف أيضا خاصية لون الوميض نسميها PulseColor و الذي بواسطته نختار لون الوميض الذي يتوافق مع ذوقنا (لون الزر او الخلفية أو الحالة (أحمر=وجوب، أصفر= استحباب،....إلخ) و هذا لنعطي لأنفسنا فرصة لاختيار اللون الذي يناسبنا لاحقا.

VB.Net
Private StopPulsing As Boolean = True

Public Property PulseColor As Color

C#.Net
Boolean StopPulsing = true;

Color _pulseColor = Color.Orange;
public Color PulseColor{
get { return _pulseColor; }
set { _pulseColor = value; }
}

نعرف الآن اجراء نسميه Fade وظيفته أن يضيف الطبقة اللونية فوق الزر في حلقة While و هذا الإجراء هو الذي سنجعله لاحقا ينفذ بواسطة Thread فرعي

VB.Net
Private Sub Fade(ByVal img As Bitmap)
'Definir Une variable de transparency
Dim Transparency As Integer = 10
'Definir une valeur d'incrementation /Decrimentation
Dim steps As Integer = 10
'Créer un objet graphique
Dim g As Graphics = Me.CreateGraphics
Try
'Boocle de remplissage avec une couche de couleur transparent
Do While Not StopPulsing
'Effacer l'effet precedent par traçage de l'image initial
g.DrawImage(img, 0, 0)
'Ajouter une couche de couleur avec un niveau de transparence variable
g.FillRectangle(New SolidBrush(Color.FromArgb(Transparency, PulseColor)) _
, Me.DisplayRectangle)
'Voire si la valeur apres INC / DEC est dans les borne ou non
If steps + Transparency < 0 OrElse steps + Transparency > 100 Then
'Si elle est hors les bornes, Changer le signe de la valeur d"INC /DEC
steps = -steps
End If
'Ajouter la valeur d'INC / DEC au niveau de transparence
Transparency += steps
'Pause un peut pour laisser voir l'effet
Thread.Sleep(60)
Loop
'Apres le sort de la boucle, Effacer les effet par traçage de l'image initial
g.DrawImage(img, 0, 0)
Catch ex As Exception
End Try
End Sub

C#.Net
private void Fade(Object arg){
//Definir Une variable de transparency
int Transparency = 10;
//Definir une valeur d'incrementation /Decrimentation
int steps = 10;
//Convertir le parametre en image
Bitmap img = (Bitmap)arg;
//Créer un objet graphique
Graphics g = this.CreateGraphics();
try{
//Boocle de remplissage avec une couche de couleur transparent
while (!StopPulsing){
//Effacer l'effet precedent par traçage de l'image initial
g.DrawImage(img, 0, 0);
//Ajouter une couche de couleur avec un niveau de transparence variable
g.FillRectangle(new SolidBrush(Color.FromArgb(Transparency, PulseColor))
,this.DisplayRectangle);
// Voire si la valeur apres INC / DEC est dans les borne ou non
if (steps + Transparency < 0 || steps + Transparency > 100)
//Si elle est hors les bornes, Changer le signe de la valeur d"INC /DEC
steps = -steps;
//Ajouter la valeur d'INC / DEC au niveau de transparence
Transparency += steps;
//Pause un peut, pour laisser voire l'effet
Thread.Sleep(60);
}
//Apres le sort de la boucle, Effacer les effet par traçage de l'image initial
g.DrawImage(img, 0, 0);
}
catch{}
}

لعلكم تلاحظون اختلافا بسيطا في نوع الباراميتر بين VB.Net و C#.Net ففي VB.Net مررنا له باراميتر من نوع Bitmap مباشرة بينما في C#.Net مررناه من نوع Object ثم حولناه لـ Bitmap داخل الإجراء. و السبب بسيط هو أن في VB.Net نستطيع تعريف Thread باعطائه عنوان الإجراء فقط. أما في C#.Net فننا نمرره له الأجراء كباراميتر و يجب أن يكون إما بلا باراميترات أو بباراميتر واحد فقط من نوع Object.

و هنا لو كنا نريد أن ننفذ اجراء به عدة باراميترات في Thread بواسطة C#.Net فيلزم تصريح الباراميترات داخل جدول أو Collection و نمررها كنها Object ثم داخل الإجراء نعيد تحويلها لـجدول أو Collection ثم نقرأ منها القيم بشكل عادي.



نمر الآن لإجرات استدعاء الوميض و إيقافة و نبدأ مع إجراءات الإيقاف فهي سهلة و كل ما نفعله هو تغيير قيمة StopPulsing لتصبح False فتتوقف الحلقة While.

هذان الإجراءان هما StopPulse و الإجراء المتعلق بالحدث MouseEnter

VB.Net
Public Sub StopPulse()
StopPulsing = True
End Sub
Private Sub PulseButton_MouseEnter(ByVal sender As System.Object, _
ByVal e As System.EventArgs)Handles MyBase.MouseEnter
StopPulsing = True
End Sub

C#.Net
public void StopPulse(){
StopPulsing = true;
}
private void PulseButton_MouseEnter(System.Object sender, System.EventArgs e){
StopPulsing = true;
}

و أخيرا بقي أن نكتب الاجراء Pulse الذي يقوم بانشاء Thread و بهيء قيمة StopPulsing بـ false.

VB.Net
Public Sub Pulse()
'Si l'etat est normal
If StopPulsing Then
'Créer un thread Liée à la procedure "Fade"
Dim PulseThread As New Thread(AddressOf Fade)
'Initializer la valeur de StopPulse par Faux
StopPulsing = False
'Creer un objet de type Bitmap
Dim bmp As Bitmap = New Bitmap(Me.Width, Me.Height)
'Garder une image du boutton en forme normale
Me.DrawToBitmap(bmp, Me.DisplayRectangle)
'Lancer le thread avec le parametre
PulseThread.Start(bmp)
End If
End Sub

C#.Net
public void Pulse(){
//Si l'etat est normal
if (StopPulsing){
//Créer un thread Liée à la procedure "Fade"
Thread PulseThread = new Thread(new ParameterizedThreadStart(Fade));
//Initializer la valeur de StopPulse par Faux
StopPulsing = false;
//Creer un objet de type Bitmap
Bitmap bmp = new Bitmap(this.Width, this.Height);
//Garder une image du boutton en forme normale
this.DrawToBitmap(bmp, this.DisplayRectangle);
//Lancer le thread avec le parametre
PulseThread.Start(bmp);
}
}



الآن نقوم ببناء البرنامج و نتجه إلى نافذة المشروع فسنجد أن أداة جديدة على شريط الأدوات إسمها PulseButton نقوم بإضافتها للمشروع قم نضيف زرين آخرين عاديين أحدهما يقوم باستدعاء الدالة Pulse للزر PulseButton1 و الآخر يستدعي الدالة StopPulse

يمكننا أيضا تغيير لون الوميض في تبويبة الخصائص حيث سنجد خاصية إسمها PulseColor.

و هذه لقطة من لقطات الوميض حين اخترت اللون البنفسجي كلون وميض





لمن أراد أكثر يمكنه إضافة أمور أخرى مثال متغير يحدد عدد الومضات أي أن StopPulse سيصبح false إذا صار العدد 0 و هذا العدد يتناقص في While كلما غيرنا إشارة Steps و صارت موجبة.(الموجب يعني بداية الوميض و السالب يعني تناقصه و معا يشكلان ومضة كاملة) أو يمكن ايضا إضافة حدثين مثل PulseStart و PulseEnd لنسمح للميتخدم للأداة بأن يبرمج فقاعة مثلا تظهر عند بداية الوميض أو أي شيء يريده.

المهم أن الفكرة هي إظهار مدى بساطة الأمر

لمن أراد الإطلاع على الكود كاملا ن هنا:

الكود سورس VB.Net

الكود سورس C#.Net



إلى هنا نكون قد أتينا إلى انشاء زر مضيء يمكننا الاستفادة منه في بقية بامجنا بأن نصممه في مشروع Windows Control و نضيفه لعلبة الأدوات بصفة نهائية. أرجو أن أكون قد وفقت في إيصال الفكرة على بساطتها. وأرجو أن تلقى إعجابكم و أن توظفوها في برامجكم.إلى اللقاء مع فكرة جديدة و مثيرة

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