40:27
01 المحاضرة الأولى - معرض الصور - الجزء الأول
Ahmed Aldahdooh
Overview
يقدم هذا الفيديو شرحًا تفصيليًا لإنشاء عارض صور بسيط باستخدام لغة سي شارب وبيئة التطوير فيجوال ستوديو. يبدأ بشرح كيفية إنشاء مشروع جديد وتكوينه، ثم ينتقل إلى استعراض واجهة المستخدم الرسومية (GUI) وعناصر التحكم الأساسية مثل القوائم (Menu Strip) وصناديق النصوص (Picture Box) ولوحات العرض (Panel). يوضح كيفية إضافة وظائف مثل فتح الصور، عرض معلوماتها، والخروج من التطبيق، مع التركيز على ربط الأحداث (Events) بالوظائف البرمجية. كما يتطرق إلى التعامل مع الأخطاء الشائعة وكيفية حلها أثناء عملية التطوير.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- الهدف من المحاضرة هو تذكير بلغة سي شارب وتعلم استخدام المكونات المرئية في فيجوال ستوديو.
- سيتم استخدام فيجوال ستوديو 2026 (أو 2022) لإنشاء تطبيق عارض صور بسيط.
- خطوات إنشاء مشروع جديد: اختيار 'Create New Project'، تحديد 'Windows Forms App' ضمن خيارات سي شارب وويندوز ديسك توب.
- فهم هيكل المشروع: السوليوشن (Solution) والمشاريع (Projects) والفورمز (Forms).
- إعادة تسمية الفورم (Form) وتأثير ذلك على ملفات المشروع (Designer و Code).
فهم كيفية إعداد بيئة التطوير وإنشاء مشروع جديد هو الخطوة الأولى والأساسية لأي تطوير تطبيقات رسومية، مما يضمن بداية منظمة وصحيحة للمشروع.
إنشاء مشروع جديد باسم 'Digital Image Processing' واختيار 'Windows Forms App' كنوع للمشروع.
- التعرف على نافذة 'Solution Explorer' لعرض مكونات المشروع.
- فهم 'Design View' لإضافة وتنسيق المكونات المرئية.
- استخدام 'Toolbox' لإضافة عناصر تحكم مثل 'Menu Strip' و 'Picture Box' و 'Panel'.
- التعرف على نافذة 'Properties' لتعديل خصائص (Properties) أي عنصر تحكم مختار (مثل النص، اللون، الحجم).
- فهم 'Events' (الأحداث) وكيفية ربطها بوظائف برمجية لتنفيذ إجراءات عند وقوع حدث معين (مثل النقر على زر).
إتقان استخدام واجهة فيجوال ستوديو وأدواتها الأساسية يمكن المطور من بناء واجهات مستخدم فعالة ومنظمة بسرعة وكفاءة.
تغيير خاصية 'Text' لعنوان النافذة (Form) إلى 'Image Viewer' وتغيير خاصية 'Dock' لعنصر 'Panel' لتعبئة مساحة معينة في النافذة.
- إضافة 'Menu Strip' لإنشاء قائمة رئيسية تحتوي على خيارات مثل 'File' و 'View'.
- ضمن قائمة 'File'، إضافة عناصر مثل 'Open Image' و 'Exit'.
- ضمن قائمة 'View'، إضافة خيارات للتحكم في عرض الصورة مثل 'Zoom' و 'Size'.
- استخدام 'Group Box' لتنظيم العناصر بصريًا، مثل تجميع عناصر التحكم الخاصة بالصور المعروضة.
- استخدام 'Panel' مع تفعيل 'AutoScroll' لتوفير مساحة عرض مرنة للصورة.
- استخدام 'Picture Box' لعرض الصورة الفعلية داخل الـ 'Panel'.
تصميم واجهة مستخدم منظمة وجذابة بصريًا باستخدام عناصر التحكم المناسبة يحسن تجربة المستخدم ويسهل التفاعل مع التطبيق.
إنشاء قائمة 'File' تحتوي على 'Open Image' و 'Exit'، ووضع 'Picture Box' داخل 'Panel' ليتمكن المستخدم من عرض الصور وتكبيرها/تصغيرها.
- ربط حدث النقر على زر 'Exit' بوظيفة إغلاق النافذة (this.Close()).
- استخدام 'OpenFileDialog' للسماح للمستخدم باختيار ملف صورة من جهازه.
- التحقق من نتيجة 'OpenFileDialog' (هل ضغط المستخدم على 'OK'؟).
- قراءة مسار الملف المختار وتخزينه في متغير.
- تحميل الصورة من المسار المحدد باستخدام 'Image.FromFile' أو 'Bitmap' وربطها بـ 'Picture Box'.
تطبيق وظائف أساسية مثل فتح الملفات والخروج يجعل التطبيق تفاعليًا وقابلًا للاستخدام، مما يسمح للمستخدم بتنفيذ المهام المطلوبة.
عند النقر على 'File' -> 'Open Image'، يظهر مربع حوار لاختيار ملف صورة، وعند اختيار صورة وعمل 'OK'، يتم عرض الصورة في 'Picture Box'.
- إضافة 'Status Strip' لعرض معلومات إضافية أسفل النافذة.
- استخدام عناصر 'Label' داخل 'Status Strip' لعرض اسم الملف، الأبعاد (العرض والارتفاع)، وحالة العرض (مثل Zoom).
- تحديث هذه المعلومات عند فتح صورة جديدة.
- استخدام 'List Box' لعرض قائمة بالصور المفتوحة حاليًا أو المسارات الخاصة بها.
- تنظيم الواجهة باستخدام خاصية 'Dock' لضمان استجابة العناصر لتغيير حجم النافذة.
عرض معلومات مفيدة للمستخدم وتنظيم الواجهة بشكل فعال يعزز من قابلية استخدام التطبيق ويوفر للمستخدم فهمًا أفضل للمحتوى المعروض.
بعد فتح صورة، يتم عرض اسمها ومسارها في 'Status Strip' أسفل النافذة، وتُضاف الصورة إلى 'List Box' إذا تم اختيار أكثر من صورة.
Key takeaways
- إنشاء تطبيق ويندوز فورمز يتطلب فهمًا لبيئة فيجوال ستوديو وعناصر التحكم الأساسية.
- الخصائص (Properties) تتحكم في مظهر وسلوك عناصر التحكم، بينما الأحداث (Events) تحدد كيفية استجابة التطبيق لتفاعلات المستخدم.
- تصميم واجهة المستخدم يجب أن يكون منظمًا باستخدام أدوات مثل Group Box و Panel لضمان سهولة الاستخدام.
- استخدام OpenFileDialog هو الطريقة القياسية للسماح للمستخدمين باختيار الملفات.
- تحميل وعرض الصور في Picture Box يتطلب التعامل مع كائنات Image أو Bitmap.
- Status Strip و List Box أدوات مفيدة لعرض المعلومات الإضافية وتنظيم البيانات للمستخدم.
Key terms
Windows Forms AppVisual StudioSolution ExplorerToolboxPropertiesEventsMenu StripPicture BoxPanelGroup BoxOpenFileDialogImage.FromFileBitmapStatus StripList BoxDock PropertyAutoScroll
Test your understanding
- ما هي الخطوات الأساسية لإنشاء مشروع Windows Forms App جديد في فيجوال ستوديو؟
- كيف يمكنك تغيير مظهر وسلوك عنصر تحكم معين في واجهة المستخدم؟
- ما الفرق بين الخصائص (Properties) والأحداث (Events) في فيجوال ستوديو، وكيف يتم استخدامهما معًا؟
- ما هي وظيفة OpenFileDialog، وكيف يمكن استخدامه للسماح للمستخدم باختيار ملف صورة؟
- كيف يمكنك عرض صورة تم اختيارها من قبل المستخدم في Picture Box؟