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

[أبو فارس]

موضوع جديد درس بالعربي عن تقنية Silverlight بإستخدام برنامج Blend

من عالم التقنية . عالم شيق وممتع

المصدر : http://www.tech-wd.com/wd/?p=376



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

في برنامج 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 من هنا

[عبدالله حسن]

شرح متعوب عليه

الله يجزاك كل خير على هذا الإبداع

و ننتظر موقعك بحلته الجديده و كيف الأجواء عندكم في الرياض


لك مني السلام

[لؤى نجاتى]

شكرا لك!

[A.M.J.A.D]

يديك العافيه أبوفارس