تقييم الموضوع :
  • 1 أصوات - بمعدل 5
  • 1
  • 2
  • 3
  • 4
  • 5
[WPF حتى الاحتراف] {3.7} - اداة الـCanvas
#1
السلام عليكم ورحمة الله وبركاته







اداة الCanvas



هي اداة من ادوات الLayout ، تستعمل لترتيب الاشكال بالنظام الاحداثي







سابقا اتفقنا انه نستعمل الMargin لتضبيط مواقع العناصر ، لكن لاينفع ترتيب العناصر التي هي عبارة عن (اشكال) بواسطة Margin

تخيل انك استدعيت دالة DrawLine ، هذه الدالة تطلب منك احداثيات نقطة البداية والنهاية  ، وبما ان اغلب ادوات الLayout الاخرى لاتدعم النظام الاحداثي لذلك لايوجد حل الا بترتيب الاشكال باستعمال الCanvas


ملاحظة : ابدا لاتستعمل الـCanvas لترتيب العناصر التي هي عبارة عن (Controls) امثال البوتون وماشابه - فهي فقط مخصصة للاشكال .












خصائص مهمة







Top & Left



اهم خاصية في الـCanvas ، وتستعمل لتحديد موقع الشكل ، تقدر تعتبرها كانها X و Y :






الكود المسؤول عن تكوين الشكل السابق :

PHP كود :
       <Canvas>
 
           <Rectangle Height="60" Canvas.Left="50" Stroke="Black" Canvas.Top="30" Width="103" Fill="#FFA8A8B9"/>
 
       </Canvas







-----------------------







ZIndex



مثل BringToFront ، تحدد من خلالها رقم ، فإذا كان الرقم الذي ادخلته اكبر من جميع ارقام العناصر ، سيصبح عنصرك في المقدمة :








كود XAML :-

PHP كود :
<Canvas>
 
   <Ellipse Fill="Green" Width="60" Height="60" Canvas.Left="30" Canvas.Top="20"    
             Canvas
.ZIndex="1"/>
 
   <Ellipse Fill="Blue"  Width="60" Height="60" Canvas.Left="60" Canvas.Top="40"/>
</
Canvas














تغيير Top & Left برمجيا



اكثركم ربما يفكر ان تغيير هذه الخاصيتين سهل .. فقط كتابة مثل rectangle.Top سيفي بالغرض !!


لكن الحقيقة ليست كذلك ، لان هذه خاصيتين تعتبران Attached property مما يعني انهما ليستا تابعتين للRectangle ، انهما تابعتان للCanvas .
Canvas.Left & Canvas.Top


لكن بما ان الCanvas تحضن الRectangle ، قتم عمل Attach لهذه الخاصيتين للابناء ، ولكن ذلك لايعني انهما صارتا تابعتين للrectangle


اذن كيف يمكنني التعامل معهما بالكود ؟؟


بما انهما Attached property  ، وال Attached property  هو نوع من انواع ال Dependency property  ، فإن لهذه الخواص طريقة قياسية لجلب وتعيين القيم :




PHP كود :
       private void rectangle1_MouseLeftButtonDown(object senderMouseButtonEventArgs e)
 
       {
 
           //تعيين top & left
 
           rectangle1.SetValue(Canvas.LeftProperty30d);
 
           rectangle1.SetValue(Canvas.TopProperty20d);

 
           //جلب top & left
 
           double left = (double)rectangle1.GetValue(Canvas.LeftProperty);
 
           double top = (double)rectangle1.GetValue(Canvas.TopProperty);
 
       



فيجوال بيسك :

PHP كود :
Private Sub rectangle1_MouseLeftButtonDown(sender As ObjectAs MouseButtonEventArgs)
 
'تعيين top & left
 rectangle1.SetValue(Canvas.LeftProperty, 30.0)
 rectangle1.SetValue(Canvas.TopProperty, 20.0)

 '
جلب top left
 Dim left 
As Double CDbl(rectangle1.GetValue(Canvas.LeftProperty))
 
Dim top As Double CDbl(rectangle1.GetValue(Canvas.TopProperty))
End Sub 






كما رايتم اعزائي ـ تم استخدام دالتي GetValue & Setvalue وتستعمل هذه فقط قي حال كانت الخاصية التي تريد تغييرها من نوع Dependency property وبما ان الـ Attached Property تعتبر من انواع Dependency property فتم استعمال هاتين الدالتين .


الشي الاخر الذي احب ان انوه له هو استعمال التابعة d بعد تعيين القيمة ، وذلك يعني تحويل الرقم الى صيغة double ، فخاصيتي Top & Left لاتقبل سوى الارقام التي في صيغة double














المهمة



المهمة المطلوبة منكم اخواني الاعزاء هي تنفيذ النموذج التالي :-








انتهى
الرد }}}
#2
جزاك الله خيراً أخي العزيز على هذا الدرس الجميل.
لم أكن أعرف بأن Canvas مخصصة للاشكال فقط Smile


السلام عليكم
الرد }}}
تم الشكر بواسطة: الشاكي لله
#3
نعم تستعمل للاشكال بشكل عام ولايستحسن ابدا وضع Controls بداخلها

The Canvas is typically used to group 2D graphic elements together and not to layout user interface elements.
This is important because specifing absolute coordinates brings you in trouble when you begin to resize, scale or localize your application. People coming from WinForms are familiar with this kind of layout - but it's not a good practice in WPF.


انا استعملتها مع الcontrols في حالة وحدة ، وهي في اخر مشروع عملته (تبع لعبة ابو رائد) والسبب اني احتجت اسوي مقارنات بالنظام الاحداثي لعمل Drag & drop للعناصر
الرد }}}
تم الشكر بواسطة: hoob computer
#4
وعليكم السلام

تم انجاز المهمه


الملفات المرفقة
.zip   Canvas.zip (الحجم : 64.71 ك ب / التحميلات : 78)
الرد }}}
تم الشكر بواسطة: الشاكي لله
#5
(30-06-14, 05:44 PM)salfig كتب : وعليكم السلام

تم انجاز المهمه


الحمدلله سعيد لانك طبقت واستفدت

وان شاء الله تكون دروس الLayout خفيفة عليكم

بقي درس واحد تبع UniformGrid ونخلص من باب الLayout

وبعدها ندخل في دروس ممتعة جدا وهو دروس الـAppearance  


ان شاء الله مااطول عليكم وخلكم مستعدين للغوص في جماليات الWPF TongueBig Grin
الرد }}}
تم الشكر بواسطة: hoob computer
#6
وعليكم السلام ورحمة الله وبركاته

وصل العمل على الدرس ، وجزاك الله خيراً ، استمر أخينا محمد فللدورة جمهور يتابعها ويعمل عليها ويتعلم منها.


   
قال رسول الله صلى الله عليه وسلم ( من قال لا إله إلا الله دخل الجنة ) حديث صحيح.
قال رسول الله صلى الله عليه وسلم ( كلمتان خفيفتان على اللسان ثقيلتان في الميزان حبيبتان للرحمن : سبحان الله وبحمده سبحان الله العظيم ) حديث صحيح.
الرد }}}
تم الشكر بواسطة:
#7
والله انك رائع

اخيرا بدأ يظهر فى الافق  رفرنس عربى كويس لتقنية ال wpf

جزاك الله كل خير اخى
واتمنى ان لا تتوقف وتكمل الدورة للنهاية  وياريت يكون فيه جزء للربط مع قواعد البيانات مثل برامج المبيعات
الرد }}}
تم الشكر بواسطة: hoob computer , الشاكي لله


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الثاني) الشاكي لله 9 7,528 06-12-20, 04:09 AM
آخر رد: Mohammed1991
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 30 21,879 14-10-18, 08:34 AM
آخر رد: qadar elzaman
  [WPF حتى الاحتراف] {0} - نظرة عامة عن WPF الشاكي لله 14 11,812 14-10-18, 07:58 AM
آخر رد: qadar elzaman
  [WPF حتى الاحتراف] {4.6} - الـ Data Template و الـ Sample Data الشاكي لله 14 10,962 05-03-17, 09:47 AM
آخر رد: dabas
  [WPF حتى الاحتراف] {4.3} - الـTemplate ومقدمة عن الـTrigger الشاكي لله 8 6,979 25-01-17, 04:45 AM
آخر رد: hero2199
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 5,206 02-12-16, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 8,945 02-06-16, 02:53 PM
آخر رد: CLARO
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (2- البرمحة) الشاكي لله 1 2,880 14-05-16, 11:54 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (1- التصميم) الشاكي لله 1 2,746 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.3} - اداة الـ Grid الشاكي لله 14 9,710 31-03-16, 11:11 PM
آخر رد: السندبااد

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم