لبناء تطبيق بأستخدام WPF يجب اولا ان تقوم بقراءة المقالة السابقة Setting Up Visual Studio for WPF .بعد تنفيذ الخطوات المتتالية في المقالة السابقة لأجل خلق تطبيق FirstWPFApp .سوف ينتج الشكل التالي:
نلاحظ اسم التطبيق قد ظهر مباشرة في أعلى النافذة الرسومية وأيضا ظهر داخل كود XAML .يمكنك تغير اسم التطبيق الى FirstWPFApplication من خلال محرر ال XAML بتغير محتوى Title او من خلال نافذة Properties Windows انظر الرسم التالي :
نقوم ألان ببناء زر (Button)واضافة مواصفات معينة, بداية
نقوم بسحب Button من مربع الأدوات (ToolBox)ووضعة على منطقة التصميم وأقصد النافذة.أنظر الرسم :
ومن ثم نأشر على الزر ونقوم باضافة بعض المواصفات له من خلال نافذة Properties window بحيث نظيف محاذاه افقية وعامودية أضافة الى الهامش.
بحيث نشاهد المحاذاة الأفقية (Horizontal Alignment) تعطي محاذة للزر من الجهة اليسرى , أما المحاذاة العامودية (Vertical Alignment) تعطية من الأعلى ,وقمنا بأعطائه هامش (Margin) بالأرقام الظاهرة ويعطى الهامش من أجل أبعاد جميع الكائنات التي تقع حوله بأبعاد تحدد بأرقام.
الأن نقوم ببناء نافذةأكثر تعقيدا وهي نافذة الدخول الأمني الى اي نظام والتي تحوي على أكثر من عنصر بحيث تتألف من زر (Button) وكتلة نص (TextBlock) و مربع نص (TextBox)ومربع كلمة سر (PasswordBox) ولوحة او وعاء يدعى (StackPanel) لأجل المحافظة على العناصر في كتلة واحدة, وهذه العناصر والتي تسمى (Controls) ترتب جميعها داخل شبكة (Grid)متألفة من صفوف وأعمدة يتم تحديدها.لنأتي الى الخطوات الرئيسية لبناء النافذة:
1. نقوم بتصغير حجم النافذة الرئيسية وذلك بتقليل الأرتفاع والعرض.
2. رسم شبكة الأعمدة يتم بطريقتين اما بكتابة الأكواد XAML يدويا او من خلال استخدام الماوس في تحديد الأعمدة والصفوف واليا سوف يولد الكود ,ويمكن عمل هذا وذلك بتأشير الشبكة المحيطة بالنافذة او التأشير على Grid في محرر XAML ومباشرة سوف يتحدد الأطار المحيط بالنافذة وهنا يأتي دور الماوس بتحديد الأضلع والصفوف التي تحتاجها ويمكنك تغير الأبعاد يدويا.
أذن بعد توليد الصفوف يمكنك أيضا ان تولد الأعمدة ونحتاج في تطبيقنا عامود واحد يفصل TextBlock عن TextBox .
بعد أكمال الشبكة نعمل على أدخال Controls في الصفوف والأعمدة .
3 . نقوم بوضع TextBlock عدد 2 لأجل أن نبين تسمية الحقل المجاور:
4. نقوم الأن بوضع حقول الأدخال وذلك بوضع TextBox و PasswordBox الأول لأجل الأسم الكامل والثاني لأجل أدخال كلمة السر.
5. نقوم بأضافة زر (OK)لأجل الموافقة بعد أدخال الأسم الكامل وكلمة السر وزراخر (Cancel) في حالة الغاء الدخول , ويتم وضع الزران داخل وعاء او لوحة لتكوين قطعة كاملة.
6. نأتي الى وضع الأحداث , يجب أن نعرف أن كل Controls يحوي على Events وهي تفاعل مابين المستخدم والواجهة الرسومية مثلا : عند قيام المستخدم بأدخال الأسم الكامل ومن ثم كلمة السر يأتي المستخدم الأن ويضغط على زر OK لأجل التأكد من صحة الأسم وكلمة السر والدخول الى النظام الضغط على الزر يسمى حدث , وهناك الكثير من الأحداث التي تدعمها مكتبة Net. ,ويتم خلق حدث ما من خلال طريقتين الأولة عن طريق الظغط مرتين على الزر OK فيفتح مباشرة الحدث في Code behind ,الطريق الثانية عن طريق Properties Window يتم أختيار الحدث من قائمة الأحداث كما مبين بالرسم:
7. نأتي الى أخر خطوة تعبئة الكود الداخلي للحدث , سوف اقوم بوضع رسالة تخرج للمستخدم في حالة الضغط على زر OK وذلك بمساعدة MessageBox , وفي حالة الضغط على الزر Cancel يتم أنهاء البرنامج مباشرة من دون أظهار اي شيئ . يتم أستخدام لغة #C .
الرسم التالي يظهر تنفيذ التطبيق وأضهار الرسالة في حالة الضغط على زر OK :
No comments:
Post a Comment