السابق

التالي

التمرين- كتابة تطبيق WPF

مكتمل

يوفر Windows Presentation Foundation (WPF) في Visual Studio للمطورين واجهة برمجة التطبيقات API لإنشاء تطبيقات لسطح المكتب والمفكرة وأجهزة الكمبيوتر اللوحية. تم بناء WPF على نظام رسومات DirectX القوي ويوفر العديد من ميزات واجهة المستخدم الرائعة والتأثيرات مع القليل من الجهد في البرمجة.

في هذه الوحدة، نحن:

• استخدام Visual Studio لإنشاء مشروع WPF.
• إضافة عناصر واجهة المستخدم وتعليمة برمجية إلى المشروع لإنشاء تباين رائع لبرنامج "hello world". يتغير لون النص "Hello there!" والحدود عشوائيا في كل مرة تحدد فيها الزر Say hello .
• تعرّف على كيفية تعيين الخصائص وإنشاء الأحداث.

إشعار

نفترض أنك قمت بإعداد الكمبيوتر الخاص بك باستخدام Windows وVisual Studio، كما هو موضح في الوحدة النمطية Learn مقدمة لتطوير Windows 10.

البرنامج التعليمي UWP "Say hello"

إنشاء مشروع

1. افتح Visual Studio وحدد ملف>مشروع >جديد من القائمة. حدد C#‎ كلغة المشروع. بعد ذلك، حدد نوع مشروع تطبيق WPF، وفي حقل الاسم ، أدخل اسما مألوفا مثل Say hello. حدد التالي عند الانتهاء.

   

2. حدد إصدار .NET، ثم حدد إنشاء.

3. عند فتح المشروع، من المستحسن التأكد من فتح جزءي مستكشف الحلول وخصائص. يتم تحديد موقعها بشكل افتراضي، على الجانب الأيمن من إطار نافذة Visual Studio. إذا لم تكن مرئية، افتح قائمة عرض وحدد كليهما.

4. في مستكشف الحلول تأكد من أنه يمكنك رؤية أسماء الملفين اللذين نعمل علىهما: MainWindow.xaml ورمزه خلف الملف، MainWindows.xaml.cs. حدد MainWindow.xaml لفتحه.

   

صمم واجهة المستخدم

1. إذا لم يكن مربع الأدوات مفتوحا، فحدد القائمة عرض، ثم حدد مربع الأدوات. في مربع الأدوات، حدد عناصر تحكم WPF الشائعة.

   

2. اسحب زر إلى الجزء السفلي من تخطيط المصمم. ثم اسحب مربع نص إلى الجزء العلوي من التخطيط، واسحب زواياه قليلاً بحيث يبدو لك كما ترى هنا:

   

   إشعار

   لاحظ كيفية إضافة إدخالات الزر و TextBox إلى <الشبكة> في تعريف XAML الذي يظهر أسفل التخطيط.

3. بعد ذلك، نريد تحديث النص الذي يظهر في شريط عنوان النافذة. حدد النافذة في تخطيط المصمم بحيث تكون خصائصها مرئية في جزء الخصائص، ثم غير العنوان إلى Say hello.

4. الآن نريد تعيين بعض الخصائص على عناصر واجهة المستخدم الجديدة. حدد الزر بحيث تظهر خصائصه في جزء الخصائص. غير الاسم إلى شيء بسيط مثل SayHelloButton، وغير Content في الخصائص Common إلى Say hello.

   

5. نحتاج إلى إرفاق حدث بالزر يمكنك تحديد الزر نفسه، ولكن هذا يعمل فقط إذا كان تخطيط المصمم في الحالة المطلوبة. توجد طريقة مُحددة أكثر للدخول إلى حدث وهي فتح الأحداث المتوفرة لعنصر واجهة المستخدم هذا. يمكنك فعل ذلك من خلال تحديد رمز المسمار المضيء المعروض هنا في جزء الخصائص ثم تحديد الإدخال ببساطة لحدث النقر. قعل ذلك تلقائيًا بإنشاء الحدث المسمى SayHelloButton_Click، وإضافة إدخال التعليمات البرمجية المناسبة في الملف MainWindow.xaml.cs، ثم فتح ملف لك.

   

6. لا نقوم بإدخال أي تعليمة برمجية حتى الآن، لذا حدد MainWindow.xaml في طريقة العرض الرئيسية. نحن نواصل العمل على واجهة المستخدم في الوقت الحالي.

7. حدد مربع النص الذي أنشأته في المصمم لعرض خصائصه. سنجري قليل من التغييرات على خصائص مربع النص. إذا كانت الأحداث تظهر في جزء Properties، فحدد رمز المفتاح بجوار الاسم للعودة إلى الخصائص المسماة.

8. تغيير إدخالالاسم إلى مربع النص1، ثم في خصائص التخطيط، غيّر العرض والارتفاع إلى 360 و80، على الترتيب.

   

9. طي قسم التخطيط.

10. في قائمة حجم النص، غيّر حجم النقطة إلى 36: شيء لطيف ومرئي!

    

11. يتم فتح علامة تبويب الخط، المسماة ب A، بشكل افتراضي لمقطع النص . حدد رمز الفقرة، وغيّر المحاذاة إلى توسيط.

    

12. طي قسم النص وتوسيع المظهر. حدد السهم المتجه لأسفل في أسفل قائمة المعروضة من خصائص المظهر لعرض القائمة الكاملة. غيّر سمك الحدود إلى 1 للحدين الأيسر والعلوي و8 للحدين الأيمن والأسفل. الآن المربع لديه القليل من تأثير الظل الخلفي!

    

13. طي المظهر وتوسيع المشترك. أدخل النص لمربع النص: شيء ودي مثل مرحبا!.

    

لقد انتهيت تقريبا من عناصر واجهة المستخدم لتطبيقك. ينبغي أن تبدو إدخال <الشبكة> في الملف XAML كما يلي:

إشعار

يمكنك تحرير XAML مباشرة، أو تغيير القيم الرقمية أو حتى إضافة عناصر واجهة المستخدم بأكملها. لن نفعل ذلك في هذا البرنامج التعليمي.

اكتب التعليمات البرمجية في الخلف

1. يمكننا الآن الانتقال من واجهة المستخدم إلى التعليمة البرمجية للتطبيق لدينا. حان الوقت لإعادة فتح الملف MainWindow.xaml.cs. حدد الملف من أعلى طريقة العرض الرئيسية أو في مستكشف الحلول. ينبغي أن تبدو النافذة الرئيسية للفئة على النحو التالي.

   public partial class MainWindow : Window
   {
       public MainWindow()
       {
           InitializeComponent();
       }
   
       private void SayHelloButton_Click(object sender, RoutedEventArgs e)
       {
   
       }
   }
   

2. لنتأكد من امتلاكنا كل ما يلزم من الكشوف. تأكد من وجود تلك المعروضة هنا، وإضافتها إذا لم تكن قد فعلت ذلك. بعد الانتهاء من تحرير الملف، يمكنك اختياريا إزالة أي عبارات غير ضرورية باستخدام عبارات Visual Studio المضمنة عند إنشاء المشروع. (تظهر مساحات الاسم غير المُستخدمة باللون الرمادي.)

   using System;
   using System.Windows;
   using System.Windows.Media;
   

3. يعرض التطبيق نص hello بلون عشوائي في كل مرة يتم فيها تحديد الزر. لذلك نحتاج إلى إضافة كائن عشوائي على مستوى الفئة وأسلوب GetRandomBytes الذي يملأ القيم التي نستخدمها كإعدادات RGB بشكل عشوائي. انسخ هذه التعليمة البرمجية وألصقها، أو اكتبها بنفسك، بحيث تبدوالنافذة الرئيسية للفئة على النحو التالي:

   public partial class MainWindow : Window
   {
       private Random rand;
   
       public MainWindow()
       {
           InitializeComponent();
           rand = new Random();
       }
   
       private byte[] GetRandomBytes(int n)
       {
           // Fill an array of bytes of length "n" with random numbers.
           var randomBytes = new byte[n];
           rand.NextBytes(randomBytes);
           return randomBytes;
       }
   
       private void SayHelloButton_Click(object sender, RoutedEventArgs e)
       {
   
       }
   }
   

4. وأخيرًا، نحتاج إلى استدعاء GetRandomBytes من حدث النقر على الزر، وإنشاء لون عشوائي من صفيف البايتات التي تم إرجاعها، ثم تغيير خصائص مربع النص إلى ذلك اللون. ينبغي أن يبدو أسلوب SayHelloButton_Click المكتمل على النحو التالي:

       private void SayHelloButton_Click(object sender, RoutedEventArgs e)
       {
           byte[] rgb = GetRandomBytes(3);
   
           // Create a solid color brush using the three random numbers.
           var randomColorBrush = new SolidColorBrush(Color.FromArgb(255, rgb[0], rgb[1], rgb[2]));
   
           // Set both the text color and the text box border to the random color.
           textBox1.BorderBrush = randomColorBrush;
           textBox1.Foreground = randomColorBrush;
       }
   

5. خذ ثانية أو اثنتين للتحقق من تعليماتك البرمجية. إذا تم تسطير أي شيء باللون الأحمر، فهذا أمر غير صحيح. قد تكون كلمة خاطئة أو جزء من التعليمات البرمجية لا ينبغي أن تكون كذلك.

Run

دعونا نحول البرنامج ونشغله!

1. في Visual Studio، في قائمة تصحيح الأخطاء، حدد بدء من دون تصحيح الأخطاء (أو بدء تصحيح الأخطاء، على الرغم من أننا لا نقوم بأي تصحيح للأخطاء في هذا البرنامج التعليمي)، أو حدد المفتاح F5 فقط. إذا قمت بإدخال كل شيء بشكل صحيح، يجب أن تشاهد تطبيقا قيد التشغيل مشابها لهذا التطبيق:

   

2. حدد الزر Say hello بشكل متكرر لرؤية تغيير النص والحدود Hello there! إلى ألوان عشوائية.

إذا كان هذا ما تراه، فقد أحسنت! لقد انتهيت من هذا البرنامج التعليمي. إذا لم يكن الأمر كذلك، أعد فحص التعليمات البرمجية وإعدادات الخصوصية لواجهة المستخدم بعناية للتأكد من عدم فقدان شيء.

متابعة