| |||||||
| المدوّنات | البحث | مشاركات اليوم | اجعل كافة المشاركات مقروءة |
|
| | LinkBack | أدوات الموضوع |
| |||||
| Silverlight - أنشأ أزرارك الخاصة بشكل رائع من عالم التقنية . عالم شيق وممتع المصدر : 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 من هنا | |||||
|
![]() |
| أدوات الموضوع | |
| |
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| رسمــيــاً .. إعتـزال القـائــد التـاريخـي | 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 |