[الشاكي لله]

السلام عليكم ورحمة الله وبركاته

اداة ال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 sender, MouseButtonEventArgs e)
        {
            //تعيين top & left
            rectangle1.SetValue(Canvas.LeftProperty, 30d);
            rectangle1.SetValue(Canvas.TopProperty, 20d);

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


فيجوال بيسك :

PHP كود :

Private Sub rectangle1_MouseLeftButtonDown(sender As Object, e As 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

---

المهمة

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

انتهى