Silverlight – أنشأ أزرارك الخاصة بشكل رائع

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

في برنامج Blend بإمكاننا بكل سهوله عمل ازرار إحترافيه بأي شكل نريده

وسنتعلم في هذا الدرس التعامل مع الأحداث التالية  ( Mouse Over, Mouse Leave, Mouse Down, Mouse Up )

(( ويمكنك مشاهدة العمل النهائي من هنا >>> ))

طبعاً بإستخدام لغة الجافا سكريبت لأن Silverlight أساساً يتعامل مع الجافا سكريبت في البرمجة والـ Coding في حال لا تريد الإتصال بقاعدة البيانات و بعض الخصائص

وفي حال تريد ذالك بالإمكان إستخدام البرمجة بلغة الفيجوال بيسك أو السي شارب

واللي ما يعرف معاني الكلمات السابقة :

Mouse Over : عند مرور الفأرة على الزر

Mouse Leave : عند إبعاد أو إخراج الفأرة عن الزر

Mouse Down : عند ضغط الفأرة على الزر

Mouse Up : عند إرتفاع ضغط الفأرة على الزر

الأن نبدأ بفتح البرنامج …

ثم عمل مشروع جديد Silverlight Site

——– 1 / تصميم الزر : نصمم مربع وننشأ نص ونكتب في Button1 او اي نص نريده ونضعه داخل المربع

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

——– 2 / ننشأ الحركات أو التأثيرات الحركيه الخاصة بمرور الفأرة والضغط عليها … ألخ , كالتالي

ننشأ Storyboard جديد ونسميه mouseover او اي اسم نريده لكن المهم يدل على انه حركه خاصة لـ ((عند مرور الفأره عليه))

 الأن في هذه الـ Storyboard المسماة بـ mouseover نعمل الحركه التي نريدها عند مرور الفأره على الشكل , والطريقة كالتالي

نحدد بالفأرة عند 2 جزء من الثانية ( 0:00.200 ) ونغير لون الزر وحدود الإطار

(1)

(2)

(3)

ليصبح الشكل كالتالي عند 2 جزء من الثانية

فعند تشغيل الحركه سيظهر التأثير يتغير شكل الزر من الشكل الأول إلى الشكل الثاني في خلال 2 جزء من الثانيه بصوره جميله :)

ونقوم الأن بعمل التأثيرات الأخرى كما عملنا في mouseover

نقوم بعمل التأثيرات الخاصة بـ ( mouseleave و mousedown و mouseup )

——– 3 / الكود البرمجي لعمل التأثيرات ( عند مرور الفأرة وعند الخروج عنها وعند الضغط على الزر بالفأرة وعند رفع الضغط عن الفأرة )

نفتح ( Page.xaml.js )

في داخل الـ function الحدث Load أي عند التحميل أي بعد هذا السطر

handleLoad: function(control, userContext, rootElement)
 {

نعرف متغير جديد بإسم button ونجعل قيمته الـ Control الزر الخاص بنا وهو button كالتالي

this.button = this.control.content.findname("button");

ثم نقوم بعمل Event Handler خاص بكل تأثير داخل الحدث Load كالتالي

this.button.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.buttonMouseOver));
this.button.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.buttonMouseLeave));
this.button.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.buttonMouseDown));
this.button.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.buttonMouseUp));

يتكون كل حدث من المعطيات التالية "MouseEnter" نكتب الحدث الذي سيتم عمله وهي كلمه محجوزه سابقاً في مكتبة السيلفرلايت

اما this.buttonMouseOver فهي دالة أو function سنقوم بعملها الأن والدالة تقوم عند مرور الفأرة أي MouseEnter بتحريك الـ storyboard الذي عملناه الخاص بعند مرور الفأرة والدالة هي كالتالي :

بعد الـ { الخاصة بالحدث Load نضع فاصلة كالتالي ,{ ثم نكتب

buttonMouseOver: function(sender, eventArgs)
 {
  this.control.content.findname("mouseover").begin();
 },
 buttonMouseLeave: function(sender, eventArgs)
 {
  this.control.content.findname("mouseleave").begin();
 },
 buttonMouseDown: function(sender, eventArgs)
 {
  this.control.content.findname("mousedown").begin();
 },
 buttonMouseUp: function(sender, eventArgs)
 {
  this.control.content.findname("mouseup").begin();
 }

 أي عند عمل حدث سيتم الدخول إلى الدالة وعمل begin ليتم تشغيل الـ storyboard الخاصة بها وطبعاً كتبنا اسمها كما كتبناه في الـ storyboard

الأن كل شي تمام فقط باقي شيء واحد وهو ان نجعل للزر عند مرور الفأره عليه يتغير إلى شكل الفأره إلى شكل يد والكود كالتالي

this.button.cursor = "Hand";

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

handleLoad: function(control, userContext, rootElement)
 {
  this.control = control;
  rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
  
  this.button = this.control.content.findname("button");
  this.button.cursor = "Hand";
  
  this.button.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.buttonMouseOver));
  this.button.addEventListener("mouseleave", Silverlight.createDelegate(this, this.buttonMouseLeave));
  this.button.addEventListener("mouseleftbuttondown", Silverlight.createDelegate(this, this.buttonMouseDown));
  this.button.addEventListener("mouseleftbuttonup", Silverlight.createDelegate(this, this.buttonMouseUp));
 },
 
 buttonMouseOver: function(sender, eventArgs)
 {
  this.control.content.findname("mouseover").begin();
 },
 buttonMouseLeave: function(sender, eventArgs)
 {
  this.control.content.findname("mouseleave").begin();
 },
 buttonMouseDown: function(sender, eventArgs)
 {
  this.control.content.findname("mousedown").begin();
 },
 buttonMouseUp: function(sender, eventArgs)
 {
  this.control.content.findname("mouseup").begin();
 }

(( ويمكنك مشاهدة العمل النهائي من هنا >>> ))

ويمكنك تحميل العمل لديك لتشغيل عن طريق برنامج Blend من هنا