التعريف بتقنية WPF لتطوير تطبيقات سطح المكتب

سنستخدم في هذه السلسلة تقنية WPF لتطوير تطبيقنا الخاص بسطح المكتب. في حين ما تزال تطبيقات Windows Forms Applications، هي الاكثر انتشاراً، بين المطورين، وحتى في المعاهد التعليمية، سنقوم نحن بالانتقال للمفهوم الاحدث في تطوير تطبيقات الويندز، ونستخدم تنقية WPF

ما هي تقنية WPF

اختصارا هي Windows Presentation Foundation، هي تقنية حديثة نسبيا من مايكروسوفت مقارنة مع سابقتها Windows Forms.
تم كتابة هذه التقنية من الصفر، ولم تعتمد على مفاهيم Windows Forms، وإن كان هناك بعض التشابه بينهما، فمثلا WPF لازالت تدعم تصميم الشاشات والواجهات بواسطة Drag-Drop للعناصر على الواجهة، لكن هذه المرة، هناك تقنية جديدة في تعريف العناصر على الواجهة، وهي باستخدام لغة XAML، وهي عبارة عن لغة مشابه جداً للغة XML، تمت تسميتها بهذا الشكل لتمييزها عن XML، وهي تعني
Extensible Application Markup Language
بالتالي فإن تصميم الشاشات ضمن WPF اصبح مشابها لتعريف ملف XML، لكن مع العديد من الميزات المتقدمة، مثل Databinding و Data Converters و Data Templates و Resources و Styles وغيرها العديد من المفاهيم التي سنمر عليها لاحقاً إن شاء الله.

مدخل إلى WPF

للبدء بالمشروع:

1.  نقوم بتشغيل برنامج الفيجوال ستوديو
2. من قائمة ملف نختار جديد New ثم مشروع Project
3. تظهر لدينا نافذة مشروع جديد، نتأكد باننا قمنا بتحديد لغة البرمجة إلى C#، واخترنا نوع المشروع WPF App، ومن ثم نعطي اسما مناسبا لمشروعنا، DesktopApp، كما في الشكل التالي:

بعد أن ينتهي الفيجوال ستوديو من اعداد المشروع الجديد لنا، سيقوم تلقائياً بإضافة نافذة جديدة تسمى MainWindow والتي ستعتبر النافذة الاساسية في تطبيقنا. لنلاحظ الآن الاقسام الرئيسية التي ظهرت بعد إنشاء المشروع الجديد، كما هو موضح بالشكل التالي:

في هذا الشكل يوجد لدينا ثلاث اقسام رئيسية:

1. واجهة التصميم، وفيها تظهر العناصر التي سيتم اضافتها إما عن طريق شريط الأدوات او XAML
2. شريط الأدوات، وبإمكاننا سحب العناصر المطلوبة وافلاتها على واجهة التصميم.
3. قسم كود XAML، وفيه تظهر العناصر معرفة بشكل XML، ويمكننا ايضا الكتابه ضمن XAML، لاضافة عناصر الى واجهة التصميم، بمعنى يمكننا الاستغناء عن شريط الادواتToolbox

الآن سنقوم باستبدال الكود الظاهر في قسم XAML، بالكود التالي ونلاحظ النتيجة على واجهة التصميم:

<Window x:Class="DesktopApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="400" Width="500">
    <Grid>
        <Button Content="Left Top" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Button Content="Left Center" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <Button Content="Left Bottom" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
        
        <Button Content="Center Top" HorizontalAlignment="Center" VerticalAlignment="Top"/>
        <Button Content="Center Center" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Button Content="Center Bottom" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
        
        <Button Content="Right Top" HorizontalAlignment="Right" VerticalAlignment="Top"/>
        <Button Content="Right Center" HorizontalAlignment="Right" VerticalAlignment="Center"/>
        <Button Content="Right Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
    </Grid>
</Window>

سيقومWPF  برسم العناصر التي تم تعريفها في ملف XAML، وكما اشرنا سابقا، يمكن ايضا اضافة عناصر عن طريق Toolbox، لنلاحظ الشكل التالي:

نلاحظ ان ناتج التصميم هو مجموعة من الازارا تم ترتيبها في زوايا واجهة التصميم المختلفة، ونلاحظ ايضاً التالي:
ان كود XAML مشابه تماما لملفات XML، وأن العنصر الأب لجميع العناصر هو العنصر

<Window></Window>

العنصر Window يجب أن يحوي على عنصر ابن واحد فقط، في مثالنا هذا الابن هو العنصر:

<Grid></Grid>

العنصر Grid يمكن ان يحوي عدد غير محدد من الأبناء عكس العنصر Window الذي يسمح بعنصر ابن واحد فقط. بالطبع هناك العديد من العناصر التي لا تسمح إلا باضافة عنصر واحد فقط مثل Border و TabItem و GroupBox وايضا يوجد العديد من العناصر التي يمكن ان تحوي على اكثر من عنصر ابن، مثل Grid و StackPanel و WrapPanel و Canvas وغيرها، والتي ستمر معنا لاحقاً إن شاء الله.
اذا: بعض العناصر تفيد فقط في ترتيب العناصر بداخلها (ابناؤها) وليس لها وجود مرئي على واجهة التصميم. وبعض العناصر الاخرى تظهر بشكل مرئي، وتسمح للمستخدم بالتفاعل معها، مثل الزر Button و TextBox و ListBox و Slider وغيرها.
وبمزج مجموعات العناصر السابقة مع بعضها، يمكننا انتاج التصميم بالشكل المطلوب.

ميزة جديدة في WPF

يوجد العديد من العناصر تسمى Content Controls، اي العناصر التي يمكن ان تحوي على عناصر اخرى بداخلها، والجميل في هذا الامر، ان الزر مثلا من هذه العناصر، بالتالي، لن تجد خاصية Text ضمن خصائص الزر، بل ستجد خاصية Content، والتي يمكنك اعطائها قيمة نصية كما في مثالنا السابق وانتهى الأمر، لكن بإمكانك ايضا اضافة عناصر اخرى بداخلها مثل: Grid او اي عنصر اخر، واضافة عناصر داخل هذا العناصر وهكذا، بحسب متطلبات المشروع.
 
الآن، دعونا نتعرف على بعض الخصائص التي تقدمها WPF، مثلا لو فرضنا اننا نريد تغير لون خلفية الزر إلى اللون الأحمر، ولون الكتابة الظاهرة ضمن الزر إلى اللون الأبيض، في هذه الحالة سنحتاج للتعديل على خاصتي الزر:

1. Background: وتستخدم لتغيير لون الخلفية
2. Foreground: وتستخدم لتغيير لون الخط

نلاحظ هنا اننا قمنا بتعريف الخاصية Background  واسندنا لها القيمة Red، ومن ثم قمنا بتعريف الخاصة Foreground ولكن واسندنا لها رقم سداسي عشر؟
بالتالي: تمكننا WPF من اختيار اي درجة لونية ممكنة، وليس الاقتصار على القيم النصية للالوان مثل Red, Green….

نافذة الخصائص:

قد تتساءل؟ وكيف لي أن اعرف هذه الخصائص، ألا يوجد نافذة للخصائص كتلك الموجودة في تطبيقات Windows Forms، والتي كانت تظهر بالاختصار F4؟

بالتأكيد تحوي WPF على هذه النافذة، وهي تظهر ايضا بمجرد الضغط على F4، كما في الشكل التالي:

يمكن ملاحظة الخيارات المتقدمة التي تقدمها WPF، لمختلف الخصائص التي يحتوي عليها العنصر.

سأقوم بالتركيز على كتابة الكود، وتغيير الخصائص من خلال XAML فقط، الا في بعض الحالات النادرة التي سنحتاج لنافذة الخصائص. والسبب هو: إن التصميم بواسطة XAML سيكون اكثر ترتيبا وتنظيما، وسيسهل لاحقاً متابعة الكود والتعديل عليه. فمثلا، يمكنك تجريب اضافة الازرار التسعة في المثال السابق، عن طريق شريط الادوات، وستلاحظ عندها العديد من الخصائص التي قام Visual Studio باضافتها إلى كود XAML المولد، والتي لسنا بحاجتها اطلاقاً، وستلاحظ ايضا عدم تجاوب التصميم مع تغيير حجم النافذة، لان شروط التصميم لم تراعى بشكل جيد، لذلك كتابة XAML مباشرة يمكننا من التحكم بالتصميم بشكل كامل.
 
الآن سنأتي إلى ختام هذه المقالة بالسؤال:

1. ماذا لو اردنا تغيير جميع ألوان الازرار إلى لون الخلفية الأحمر، ولون الخط الأبيض؟ ربما سيكون جوابك بسيطاً، سنقوم بهذه الخطوة بتعريف خاصتي Background و Foreground لكل زر كما فعلنا مع الزر الأول.
2. ماذا لو اردنا لاحقاً التعديل على ألوان الخلفية وألوان الخط لكل الأزرار؟ ربما سيكون جوابك بسيطاً ايضا وذلك بالتعديل على لون خلفية وخط كل زر!

اذا كانت اجابتك مشابه للاجابات المقترحة في الاسئلة، سأطلب منك التفكير قليلاً، فـَ WPF تقدم العديد من الميزات التي تجعل آلية التصميم اكثر سهولة واستجابة مع تغيير المتطلبات، وهو ما سنقوم بتفصيله في المقالة القادمة إن شاء الله، والتي سنمهد فيها إلى مبادىء Databinding و Resources.

بالتوفيق،،، 

انضم لمجموعة الواتساب
https://chat.whatsapp.com/8D0EfjMGpK46oNaxVIso2f

رابط الكود على GitHub
http://github.com/parmajiat/desktop-app-course.git

المقالة التالية
متابعة التعريف بتقنية WPF لتطوير تطبيقات سطح المكتب ومدخل الى Databinding

المقالة السابقة
تعريف بالسلسلة