32 - سلسلة تبسيط البرمجة - WPF - Hellow World

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

بسم الله الرحمن الرحيم

  • إما أن نفتح المشروع الذي أنشأناه في الحلقة السابقة من خلال فتح قائمة File ثم اختيار مسار المشروع من القائمة الفرعية أسفل القائمة Recent Projects and Solutions

  • أو بإمكاننا إنشاء مشروع جديد كما فعلنا في تلك الحلقة Ctrl+Shift+N

بعد أن يفتح المشروع نفتح النافذة الرئيسية MainWindow بالنقر على الملف في مستكشف السولوشن Solutions Explorer ويتم فتح المستكشف من خلال الاختصار Ctrl+W,S أو من خلال قائمة العرض View

ملاحظة : الاختصار الذي يكون أكثر من حرف وبينهما فاصلة يجب أن نبقي زر التحكم مضغوطا وننقر الحرفين خلف بعضهما أي نضغط زر الكونترول ونبقيه مضغوطا ثم ننقر زر W ثم S الأول ثم الثاني وليس مع بعضهما

بعد أن فتحنا ملف النافذة الرئيسية

  • نقوم بفتح نافذة صندوق الأدوات Toolbox من خلال الاختصار Ctrl+W,X أو من خلال قائمة العرض View

  • نقوم بسحب عنصر Label ونسقطه على المساحة البيضاء ضمن النافذة

  • كذلك نقوم بسحب عنصر TextBox و نسقطه أسفل الليبل

  • نراقب قسم الزامل XAML لنلاحظ التغييرات التي طرأت بعد كل إسقاط حيث سنلاحظ أنه تم إضافة توصيف كل من العنصرين مع خصائصهما وقيم تلك الخصائص

و لهذا بنيت هذه اللغة أي زامل على XML لأنها توصيفية وليست برمجية

بعد أن أضفنا العنصرين السابقين

  • نفتح نافذة خصائص Properties من خلال الاختصار Ctrl+W,P أو من قائمة العرض View

  • نقوم بتحديد العنصر صندوق النص TextBox الذي أضفناه فتظهر خصائصه في نافذة الخصائص التي فتحناها قبل قليل

  • نقوم بكتابة العبارة Hello World في خانة النص Text

  • نحدد اسم للعنصر في خانة الاسم Name أعلى النافذة و لنسمه txtHelloWorld

أثناء التغيير تلاحظون انعكاس التغييرات على كود زامل

وللعلم بإمكانكم إجراء نفس التغييرات من خلال التعديل على زامل مباشرة

أي لو أنكم كتبت بين إشارتي التنصيص التي بعد Text أي عبارة ستظهر ضمن صندوق النص

  • نقوم بتشغيل البرنامج F5 أو من قائمة Debug

ستظهر النافذة مع العنصرين وعبارة Hello World داخل صندوق النص

  • نغلق البرنامج

  • ثم نذهب لقسم الزامل

  • نقوم بتعديل الكلمة Label التي في خاصية Content للعنصر Label ونستبدلها بالعبارة التالية

--

{Binding Text, ElementName=txtHellowWorld}

فيصبح السطر كاملا 

Label Content="{Binding Text, ElementName=txtHellowWorld}" HorizontalAlignment="Left" Margin="47,39,0,0" VerticalAlignment="Top"

ستلاحظون أن العبارة في العنصر ليبل على النافذة قد تغير وأخذ محتوى صندوق النص وظهرت عبارة Hellow World

  • نشغل البرنامج F5 أو من قائمة Debug

  • حاول تغيير الكتابة داخل صندوق النص ، وستلاحظون أن التغييرات تنتسخ إلى العنصر ليبيل

إن مافعلنا بالتعديل السابق هو أننا ربطنا خاصية المحتوى للعنصر ليبيل بخاصية النص للعنصر صندوق النص

فأصبح أي تغيير للخاصية المصدر SourceProperty وهي(Text) للعنصر المصدر SourceObject وهو (TextBox) ينعكس وينتسخ على الخاصية الهدف TargetProperty وهي (Content) المرتبطة في العنصر الهدف TargetObject وهو (Label)

هذا درسنا لهذه الحلقة

ألقاكم بسلام