تقييم الموضوع :
  • 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 ك ب / التحميلات : 47)
الرد }}}}
تم الشكر بواسطة: الشاكي لله
#5
(30-06-14, 05:44 PM)salfig كتب : وعليكم السلام

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


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

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

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

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


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

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


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

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

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


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 729 أمس, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 29 6,137 16-08-16, 11:09 AM
آخر رد: أبوبكر سويدان
  [WPF حتى الاحتراف] {4.3} - الـTemplate ومقدمة عن الـTrigger الشاكي لله 7 1,618 13-08-16, 07:01 PM
آخر رد: Anas gafer
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 671 02-06-16, 02:53 PM
آخر رد: CLARO
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (2- البرمحة) الشاكي لله 1 178 14-05-16, 11:54 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (1- التصميم) الشاكي لله 1 178 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.3} - اداة الـ Grid الشاكي لله 14 2,688 31-03-16, 11:11 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.1} - الـ Layout الشاكي لله 13 2,886 17-03-16, 12:14 PM
آخر رد: mtalma
  [WPF حتى الاحتراف] {4.6} - الـ Data Template و الـ Sample Data الشاكي لله 12 2,305 14-02-16, 10:54 AM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الخامس) الشاكي لله 4 481 18-10-15, 11:46 PM
آخر رد: الشاكي لله

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


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