يوم سوالف، في 7 أغسطس القادم

 

العودة   سوالف سوفت > قسم تطوير وبرمجة المواقع للمتقدمين > ASP و ASP.NET
المدوّنات البحث مشاركات اليوم اجعل كافة المشاركات مقروءة

رد
 
LinkBack أدوات الموضوع
عضو نشيط
تاريخ التسجيل: Jun 2007-
#1 (permalink)  
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 من هنا







__________________
عبدالملك عبدالله الثاري
http://www.althari.com
أبو فارس غير متواجد حالياً   قديم 29-04-2008, 12:30 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: Jun 2007-
#2 (permalink)  

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

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

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


لك مني السلام






Abdullah Hasan متواجد حالياً   قديم 01-05-2008, 11:55 AM
رد مع اقتباس
عضو جديد
تاريخ التسجيل: Apr 2008-
#3 (permalink)  

شكرا لك!






__________________
مدونتى:
http://netvirus.blogspot.com
لؤى نجاتى غير متواجد حالياً   قديم 02-05-2008, 10:58 PM
رد مع اقتباس
عضو نشيط جدا
تاريخ التسجيل: Mar 2008-
#4 (permalink)  

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






A.M.J.A.D غير متواجد حالياً   قديم 07-05-2008, 09:48 PM
رد مع اقتباس
رد


أدوات الموضوع

تعليمات المشاركة
لا تستطيع كتابة مواضيع
لا تستطيع كتابة ردود
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
رسمــيــاً .. إعتـزال القـائــد التـاريخـي Naif2php سوالف عامة 44 27-08-2007 02:33 AM
برنامج clicks لأدراة الروابط بشكل رائع fayz تطوير الويب 7 17-07-2004 06:04 AM
أصوات لموقعك بشكل رائع وبأرخص الـ$$$ .. الفقير لله خدمات البيع والشراء والإعلانات التجارية 0 28-12-2003 06:02 AM
*- سجل زوار بخاصية الرسائل الخاصة و رائع بالمواصفات و التحكم -* Tender_Heart تطوير الويب 0 28-06-2002 12:20 AM
موقع يستخدم برنامج القرآن االكريم بشكل رائع !!أنظروا hasan147 تطوير الويب 0 12-12-2001 05:32 AM


الساعة الآن: 01:44 AM بتوقيت المملكة العربية السعودية