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

مكتمل

Screenshot that shows the UWP, WPF, and Windows Forms logo.

لا تزال Windows Forms، استنادا إلى Win32 API الموقرة، تكنولوجيا واجهة المستخدم ذات الشعبية لتطوير الأدوات والمرافق التي لا تتطلب أي شيء خيالي. تعمل التطبيقات التي تم إنشاؤها باستخدام Windows Forms على سطح مكتب Windows ودفتر الملاحظات وأجهزة الكمبيوتر اللوحية، ولها مظهر مألوف لكل شخص يستخدم جهاز الكمبيوتر.

في هذه الوحدة، سنقوم بما يلي:

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

إشعار

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

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

إنشاء مشروع

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

    Screenshot that shows the Configure your new project window for a Windows Forms App with the Next button selected.

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

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

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

إنشاء واجهة المستخدم

  1. مع جزء الخصائص لـForm1، افتح تغيير إدخال النص من Form1 إلى Say hello. من الجانب الآخر من الشاشة، اسحب الزر من مربع الأدوات إلى الجزء السفلي من النموذج، ثم أضف مربع نص إلى الجزء العلوي. وسّع بعد ذلك مربع النص قليلًا، بحيث يبدو التصميم الخاص بك على النحو التالي:

    Screenshot that shows a button and text box dragged onto the design layout.

  2. حدد الزر لعرض خصائصه. غيّر الاسم إلى SayHelloButton، ثم قم مرر لأسفل الخصائص، مع تغيير خاصية النص إلى Say hello.

    Screenshot that shows the Name property set in the Properties window.

    Screenshot that shows the Text property set in the Properties window.

  3. نحتاج إلى إرفاق حدث بالزر يمكنك إرفاق الحدث عن طريق تحديد الزر في طريقة عرض التصميم أو عن طريق تحديد أيقونة الحدث في Properties، ثم حدد المفتاح Enter أو حدد إدخال الحدث Click . أيا كان الأسلوب الذي تختاره، يضيف Visual Studio تلقائيا رمز المخطط التفصيلي للحدث SayHelloButton_Click إلى ملف Form1.cs الخاص بك ويفتح الملف. ألق نظرة سريعة، ثم عد إلى طريقة عرض التصميم.

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

    إشعار

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

  4. حدد مربع النص في طريقة العرض «تصميم» لفتح خصائصه. إذا استخدمت أسلوب قائمة الأحداث لإضافة حدث الزر، فحدد أيقونة المفتاح والمستند في الخصائص. اترك إدخال الاسم في شكل textBox1. حدد علامة الجمع إلى جانب الخط، ثم غير حجم الخط إلى 24. بعد ذلك، مرر لأسفل الخصائص قليلاً وغيّر خاصية Text إلى Hello there! وTextAlign إلى Center.

    Screenshot that shows the Textbox properties with the Name, BorderStyle, and font size set in the Properties window.Screenshot that shows the additional Textbox properties of Text and TextAlign set in the Properties window.

أضف التعليمات البرمجية

  1. بدّل الآن العرض الرئيسي لأنك تبحث في Form1.cs.

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  2. للحصول على ألوان نص عشوائية لتظهر، تحتاج إلى إضافة متغير على مستوى الفئة Random rand. تحتاج إلى تهيئته في أسلوب الدالة الإنشائية Form1، وأدخل أسلوب لتعبئة صفيف بايت قصير بأرقام عشوائية. انسخ الأسطر التالية من التعليمات البرمجية والصقها أو اكتبها:

    public partial class Form1 : Form
    {
        private Random rand;
    
        public Form1()
        {
            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, EventArgs e)
        {
    
        }
    }
    
  3. لتغيير لون النص في كل مرة يتم فيها تحديد الزر Say hello، أضف نص أسلوب SayHelloButton_Click إلى البرنامج.

        private void SayHelloButton_Click(object sender, EventArgs e)
        {
            // Declare an array of bytes and fill it with random numbers
            byte[] rgb = GetRandomBytes(3);
            textBox1.ForeColor = Color.FromArgb(255, rgb[0], rgb[1], rgb[2]);
        }
    
  4. خذ لحظة لمراجعة التعليمات البرمجية الخاصة بك. إذا تم تسطير أي شيء باللون الأحمر، فهذا أمر غير صحيح. قد تكون كلمة بها خطأ إملائي أو القليل من التعليمات البرمجية في غير موضعها.

Run

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

  1. في Visual Studio، في قائمة Debug ، حدد Start Without Debugging، أو فقط حدد المفتاح F5. إذا قمت بإدخال كل شيء بشكل صحيح، يجب أن تشاهد تطبيقا قيد التشغيل مشابها لهذا التطبيق:

    Screenshot that shows the app running. Hello there displays in bright green text with the Say hello button below it.

  2. بعد بضع ثوانٍ من وقت تحديث الإصدار، حدد بشكل متكرر Say hello وشاهد تغيير ألوان نص Hello there!.

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