منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب
الدرس الثاني والخمسون - Windows Forms - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : الأقسام التعليمية - المنتدى القديم (http://vb4arb.com/vb/forumdisplay.php?fid=90)
+--- قسم : قسم دورات المنتدى (http://vb4arb.com/vb/forumdisplay.php?fid=113)
+---- قسم : دورة .net 2008 . لنبدأ سوياً (http://vb4arb.com/vb/forumdisplay.php?fid=138)
+---- الموضوع : الدرس الثاني والخمسون - Windows Forms (/showthread.php?tid=5646)

الصفحات: 1 2

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

كاتب الموضوع : أحمد جمال

بسم الله الرحمن الرحيم .
السلام عليكم ورحمة الله وبركاته .

خلال هذه السلسلة ، كانت الخطة أنني اقوم بالانتهاء من شرح جميع النقاط الغير متعلقة بالواجهات من خلال Console ، وكان موعدنا الاسبوعي مع ADO.net ، لكننا سنأجل هذه الدروس لنتعرف على الواجهات وما يتعلق بها من تقنيات مثل WPF ، قبل ان نعود لنواصل دروسنا من خلال الواجهات ونكمل النقاط المتبقية لنا وهي :

- Object Serlization And XML .
- ADO.net .
- LINQ .
- WCF .
- WWF .
- وأخيراً ASP.net .
- ختم الحلقات ببعض المواضيع العامة اضافة إلى مشروع .

لذا فهذا هو جدولنا بعد الانتهاء من الواجهات خلال هذا الاسبوع إن شاء الله ...

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

مقدمة :

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

في .net جاءت المكتبة System.Windows.Forms لتقدم لك كل ما تحتاج إليه لتصميم واجهة مناسبة ، هناك أيضاً مجموعة دوال API تعرف باسم GDI+ تمكنك من زيادة كفاءتك الرسومية من خلال مجموعة من الأوامر المخصصة للرسومات 2D ، أخيراً ومع .net 3.0 جاءت لنا مايكروسوفت بتقنية Windows Presentation Foundation او ما تعرف اختصاراً باسم WPF لتزيد من كفاءة الرسوميات ضمن تطبيقات البرمجة لحد مرتفع جداً .

في دورسنا لهذا الاسبوع سوف نبدأ بالتعرف على System.Windows.Forms وربما على ال GDI+ أيضاً ، في حين سنترك عالم WPF للاسابيع القادمة إن شاء الله .

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

كاتب المشاركة : أحمد جمال

بناء Windows Forms بالكود :

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

لذا قم بفتح المفكرة Notepad ، قم بانشاء ملف مثلاً باسم WindowsForms.cs ، ومن ثم سنبدأ في كتابة الكود .

أولاً سنقوم بتعريف كلاس مشتق من الفئة Forms بالشكل التالي مثلاً :

C#:

كود :
class SimpleWindow : Form
{
}
vb.net:

كود :
Class SimpleWindow
Inherits Form

End Class
والآن سنقوم في حدث Main باستدعاء نسخة منه ، لا تنسى اضافة مكتبات System.Windows.Forms ، لذا سيكون الكود بالكامل بالشكل التالي :
C#:

كود :
using System;
using System.Windows.Forms;
namespace WindowsForms
{
class Program
{
static void Main()
{
Application.Run(new SimpleWindow ());
}
}
}
class SimpleWindow : Form
{
}
vb.net:


كود :
Imports System
Imports System.Windows.Forms
Namespace WindowsForms

Class Program
Private Shared Sub Main()
Application.Run(New SimpleWindow())
End Sub
End Class

End Namespace
Class SimpleWindow
Inherits Form

End Class
الآن فقط كل ما عيك هو فتح Cmd الخاص بك ، وكتابة أمر مثل التالي :

كود :
csc /target:winexe *.cs
طبعاً بعد الذهاب لمسار البرنامج ، وبعد تعريف csc لتكون جاهزة للاستخدام في أي مكان ، سيكون الناتج شيئاً مثل هذا :



والآن بامكاننا التحكم في بعض الخصائص ، مثل الطول والعرض . الشفافية .... الخ من الخصائص أو حتى تنفيذ الأوامر التي يمكن الوصول إليها من خلال Object Browser بالشكل التالي مثلاً :



لذا نجد ان بامكاننا مثلاً تغيير الطول والعرض وتوسيطه ، لذا سيكون كود الفورم بالشكل التالي :
C#:

كود :
class SimpleForm : Form
{
public SimpleForm (int height, int width, bool center)
{
Width = width;
Height = height;
if(center) CenterToScreen();
}
}
vb.net:

كود :
Class SimpleForm
Inherits Form
Public Sub New(ByVal height As Integer, ByVal width As Integer, ByVal center As Boolean)
Width = width
Height = height
if center=True Then
CenterToScreen()
End If
End Sub
End Class
لكن لا تنس أنك في Run سوف تقوم بتمرير بارميترات إلى الفئة ، بالشكل التالي مثلاً :
C#:

كود :
static void Main()
{
Application.Run(new MainWindow(200, 300,True));
}
vb.net:

كود :
Private Shared Sub Main()
Application.Run(New MainWindow(200, 300, [True]))
End Sub
لا تنس طبعاً انه بامكانك الحصول على هذه القيم من خلال Args كما تعلمنا سابقاً ....

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

اضافة أدوات بالكود :

تعلمنا رسم الفورم بالكود ، جاء الدور الآن على وضع الأدوات المختلفة على الفورم ، يتم ذلك بالواقع من خلال الأوامر التالية :

Add()
AddRange()
لعمليات الاضافة .
Clear()
حذف الجميع .
Count
عدد الادوات ، في الواقع هذه الخاصية مفيدة جداً عند محاولات المرور على الأدوات .
Remove()
RemoveAt()
للحذف .

أما الأدوات التي يمكنك اضافتها ، فجميعها موجود تحت الفئة System.Windows.Forms ، حيث تجد كل الادوات التي تعودت على رؤيتها ...

مثال : اضافة قائمة File - Exit :
سنحاول الوصول للشكل التالي حيث يمكن الخروج بالضغط على زر Exit في القائمة :


الكود سيكون بسيطاً ، سنقوم بتعريف MenuStrip للقائمة ومن ثم ToolStripMenuItem لعناصر القائمة :
C#:

كود :
private System.Windows.Forms.MenuStrip menuStrip1;
private System.Windows.Forms.ToolStripMenuItem fileToolStripMenuItem;
private System.Windows.Forms.ToolStripMenuItem exitToolStripMenuItem;

vb.net:

كود :
Private menuStrip1 As System.Windows.Forms.MenuStrip
Private fileToolStripMenuItem As System.Windows.Forms.ToolStripMenuItem
Private exitToolStripMenuItem As System.Windows.Forms.ToolStripMenuItem


الخطوة الثانية هي عمل دالة في ال Constructor وليكن اسمها BuildForm ، بدلاً من وضع الاكواد مباشرة في ال Constructor .
C#:

كود :
public SimpleForm()
{
Text="Example. Simple Form";
BuildForm();
}

vb.net:

كود :
Public Sub New()
Text = "Example. Simple Form"
BuildForm()
End Sub


الآن سنقوم ببرمجة هذه الدالة ، سنقوم بوضع اسماء للعناصر ونضيفها باستخدام Add للقائمة الرئيسية :
C#:

كود :
fileToolStripMenuItem.Text = "&File";
menuStrip1.Items.Add(mnuFile);
exitToolStripMenuItem.Text = "E&xit";
menuStrip1.DropDownItems.Add(mnuFileExit);

vb.net:

كود :
fileToolStripMenuItem.Text = "File"
menuStrip1.Items.Add(mnuFile)
exitToolStripMenuItem.Text = "Exit"
menuStrip1.DropDownItems.Add(mnuFileExit)


الخطوة الثانية هي اضافة Handler لحدث الضغط لعنصر Exit بالشكل التالي :
C#:

كود :
exitToolStripMenuItem.Click += new System.EventHandler(this.exitToolStripMenuItem_Click);


vb.net:

كود :
AddHandler exitToolStripMenuItem.Click, AddressOf exitToolStripMenuItem_Click


أخيراً سنعتمد القائمة الرئيسية لتكون القائمة الخاصة بال Form بالشكل التالي بعد اضافتها للفورم :

C#:

كود :
Controls.Add(this.mnuMainMenu);
MainMenuStrip = this.menuStrip1;

vb.net:

كود :
Controls.Add(Me.mnuMainMenu)
MainMenuStrip = Me.menuStrip1

الآن سوف نقوم بكتابة الحدث الخاص بالضغط على زر Exit :
C#:

كود :
private void exitToolStripMenuItem_Click(object sender, EventArgs e)
{
Application.Exit();
}
vb.net:

كود :
Private Sub exitToolStripMenuItem_Click(ByVal sender As Object, ByVal e As EventArgs)
Application.[Exit]()
End Sub



بهذا يكون الكود الاجمالي بالشكل التالي :
c#:

كود :
class SimpleForm: Form
{
private System.Windows.Forms.MenuStrip menuStrip1;
private System.Windows.Forms.ToolStripMenuItem fileToolStripMenuItem;
private System.Windows.Forms.ToolStripMenuItem exitToolStripMenuItem;
public SimpleForm()
{
Text="Example. Simple Form";
BuildForm();
}
private void BuildForm()
{
fileToolStripMenuItem.Text = "File";
menuStrip1.Items.Add(mnuFile);
exitToolStripMenuItem.Text = "Exit";
menuStrip1.DropDownItems.Add(mnuFileExit);
exitToolStripMenuItem.Click += new System.EventHandler(this.exitToolStripMenuItem_Click);

Controls.Add(this.mnuMainMenu);
MainMenuStrip = this.menuStrip1;
}

private void exitToolStripMenuItem_Click(object sender, EventArgs e)
{
Application.Exit();
}
}
vb.net:

كود :
Class SimpleForm
Inherits Form
Private menuStrip1 As System.Windows.Forms.MenuStrip
Private fileToolStripMenuItem As System.Windows.Forms.ToolStripMenuItem
Private exitToolStripMenuItem As System.Windows.Forms.ToolStripMenuItem

Public Sub New()
Text = "Example. Simple Form"
BuildForm()
End Sub
Private Sub BuildForm()
fileToolStripMenuItem.Text = "&File"
menuStrip1.Items.Add(mnuFile)
exitToolStripMenuItem.Text = "E&xit"
menuStrip1.DropDownItems.Add(mnuFileExit)
AddHandler exitToolStripMenuItem.Click, AddressOf exitToolStripMenuItem_Click


Controls.Add(Me.mnuMainMenu)
MainMenuStrip = Me.menuStrip1
End Sub


Private Sub exitToolStripMenuItem_Click(ByVal sender As Object, ByVal e As EventArgs)
Application.[Exit]()
End Sub
End Class

في الدرس القادم سوف نقوم ببناء نفس التطبيق ولكن من خلال Visual Studio.net ...

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

انشاء فورم عن طريق Viusal Studio.net :
فقط افتح Visual Studio 2008 ، من قائمة File-New قم باختيار Windows Forms Application :


الآن من القائمة الجانبية Tool Box اختر MenuStrip ، ستجد الشكل التالي :


الآن وكما فعلت قم بالتفرع كما تريد وتصميم القائمة ، عند الضغط مرتين على العنصر Exit ستجد الأمر جاهزاً للكتابة بالشكل التالي :


الآن اكتب الكود ، ومن ثم اضغط على F5 وجرب .
والآن ألا تتفق معي أن الوضع أصبح أسهل كثيراً ....

في الدرس القادم سوف نتعرف على التعامل مع الواجهة الرسومية وما يتعلق بها ، قبل ان ننتقل للأدوات والخصائص في موجز سريع ...

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

الآن ، سنتعرف على محتويات الواجهة الرئيسية .

في مرحلة سابقة من الدروس تعرفنا على بعض النقاط في واجهة Visual Studio ، الآن سنواصل التعرف على النقاط الخاصة بالواجهة الرسومية .

ToolBox :
يحتوي على الأدوات الرئيسية التي نحتاج اليها ، لو لم يكن ظاهراً يمكننا اظهاره من View - ToolBox .

أهم الادوات التي نحتاج إليها موجودة تحت التبويب All Windows Forms ، مع ذلك ما زال بامكاننا اضافة تبويب جديد واضافة أدوات أخرى إليه ، عن طريق Add Tab ومن ثم Choose Item واختيار العنصر الذي ترغب فيه :


Tabs Group :


يحتوي على جميع ما قمت بفتحه ، حيث يمكنك التنقل بينها .


Properties Windows :


تجد فيها الخصائص التي ترغب في تعديلها لأي عنصر يتم تحديده على الفورم ، هذه الصورة توضح خصائص احد عناصر القائمة :


Solution Explorer :


يمكنك من تصفح محتويات مشروعك من نوافذ Forms أو فئات Classes او حتى صور و Resources :


Class View :


استعراض الفئات الموجودة لديك وخصائصها ودوالها وخلافه .

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

كيف يعمل ال Visual Studio.net في انشاء النماذج ؟

بنفس الطريقة التي تعلمناها بالكود ، ستجد لديك من قائمة Solution Explorer ثلاثة ملفات :

Form1.cs :
سيمكنك من التحكم في الفورم يدوياً عن طريق الوضع [Design] ايضاً تجد الأكواد التي قمت بكتابتها في هذا الملف ، يقوم كثير من المبرمجين بالتبديل بين الوضعين بالتنقل من القائمة العلوية ، او الضغط مرتين على اي اداة لفتح الكود الخاص بها . يمكنك عمل ذلك بطريقة مثالية عن طريق الضغط على الفورم بزر الماوس الأيمن واختيار الوضع Design - Code أو حتى Class Diagram .

Form1.Designer.cs :
هنا تجد الاكواد الخاصة بانشاء الأدوات والفورم ، لو قمت بفتحه ستجد اكواداً شبيهة بتلك التي استخدمناها في الجزء الأول من هذا الدرس :



Form1.rex :
يحتوي على المصادر المستخدمة وخلافه .

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

الفئات الرئيسية لعناصر Windows.Forms :
الفورم هو العنصر الاساسي في هذه الفئة ، وهو مشتق من الفئات التالية :

System.Object
العنصر الاساسي لكل كائنات .net

System.MarshalByRefObject.
لنتمكن من الوصول byref إلى الفورم

System.ComponentModel.Component
لثالث مشتق من ال Interface المسمى IComponent

System.Windows.Forms.Control.
سنتناوله بالتفصيل لاحقاً .

System.Windows.Forms.ScrollableControl
من اجل استخدام ال Scrolls ، اي عنصر مشتق منها يمكن ان يتمتع بهذه الخاصية .

System.Windows.Forms.ContainerControl
من اجل جعله يمكن ان يحتوي على Controls أخرى ، اي عنصر مشتق منها يمكن ان يحتوي بداخله على عناصر أخرى .

System.Windows.Forms.Form
سنتناوله بالتفصيل لاحقاً .

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

ذكرنا أن ال Form مشتق من الفئة System.Windows.Forms.Form ، لذا فإن جميع خصائص ودوال وأحداث هذه الفئة تنتقل له بالتبعية ، وهي ما سنتعرف عليها الآن :

خصائص الفئة Form :

AcceptButton : تحديد الزر الذي يتم تنفيذ أوامره عند ضغط المستخدم على Enter .
ActiveMDIChild : عندما يكون للفورم أبناء ، يتم هذا لتحديد الإبن النشط .
IsMDIChildIsMDIContainer : لتحديد امكانية جعل هذا الفورم حاضن لفورمات أخرى .
CancelButton : تحديد الزر الذي يتم تنفيذ أوامره عندما يضغط المستخدم على زر Esc .
ControlBox : تحديد هل للفورم Control Box أم لا .
FormBorderStyle : تحديد شكل حدود الفورم .
Menu : تحديد القائمة الرئيسية للفورم .
MaximizeBox : عرض زر التكبير والتصغير أم لا ، ستجد واحدة أخرى باسم Minimize لعرض زر وضعه في الشريط السفلي .
ShowInTaskbar : تحديد العرض في الشريط السفلي للويندوز أم لا .
StartPosition : تحديد نقطة البداية للفورم عند ظهوره لأول مرة ، يتم اختيارها من enumeration المسمى FormStartPosition والذي يحتوي على العناصر التالية :


WindowState : تحديد حالة الفورم والتي يتم اختيارها من ال enumeration المسمى FormWindowState والذي يحتوي على العناصر التالية :



دوال الفئة Form :

Activate() : لتنشط الفورم .
Close() : اغلاق الفورم .
CenterToScreen() : وضع الفورم في منتصف الشاشة .
LayoutMDI() : تحديد نظام عرض الشاشات الأبناء في حالة وجودها
ShowDialog() : عرض الفورم بصورة Dialog بحيث لا يمكن الرجوع لما خلفها إلا بعد اغلاقها .

أحداث الفئة Form :

Activated : ينطلق هذا الحدث عندما يتم تنشيط الفورم سواء بأمر Activate او عندما يقوم المستخدم بجعله النافذة النشطة على سطح مكتبه .
Closing : عندما يبدأ حدث الإغلاق .
Closed : عندما ينتهي حدث الإعلاق .
Deactivate : عندما يذهب التحكم إلى شيء آخر غير الفورم .
Load : عندما يتم تحميل الفورم ، ولكن ينطلق هذا الحدث قبل ظهور الفورم على الشاشة أصلاً - لتجنب واحد من أكثر الأخطاء شيوعاً - .
MDIChildActive : عند تحديد واحد من الشاشات الأبناء في حالة وجودها .

الدرس الثاني والخمسون - Windows Forms - RaggiTech - 14-10-12

كما ذكرنا ايضاً سابقاً ، فإن الفورم مشتق من الفئة Controls ، ولذا فهو يتمتع بكافة مميزاتها والتي سنستعرضها هنا .

خصائص الفئة Controls :

BackColor : لون الخلفية .
ForeColor : لون النص الداخلي .
BackgroundImage : خلفية صورة .
Font : الخط وحجمه ونوعه وخلافه .
Cursor : نوع المؤشر الذي يظهر عند العبور فوق الأداة أو الفورم .
Anchor : للتعامل مع خاصية ال Dock والتي تثبت مكان الادوات على الفورم مهما تغير حجم الفورم .
AutoSize : حجم تلقائي للاداة حسب محتوياتها .
Top : موضع الاداة او الفورم من الحد العلوي للاب.
Left : موضع الاداة او الفورم من الحد الأيسر للأب .
Bottom : موضع الاداة او الفورم من الحد الأسفل للأب .
Right : موضع الاداة او الفورم من الحد الأيمن للأب .
Bounds : الحدود .
ClientRectangle : من مربع .
Height : الطول .
Width : العرض .
Enabled : تحديد امكانية التحكم بالأداة او الفورم من عدمه .
Visible : الظهور والاختفاء .
ModifierKeys : قراءة حالة ال ModifierKeys مثل ال Alt و Ctrl و Shift .
MouseButtons : معرفة الزر المضغوط من الماوس ( أيمن - ايسر - المنتصف ) .
TabIndex: تحدد ترتيب العناصر للانتقال بينها بواسطة زر Tab .
TabStop : منع الوصول للعنصر من خلال زر Tab .
Opacity : درجة الشفافية ما بين 0 و 1 .
Text : النص المعروض داخل الاداة .
Controls : تمكنك من الوصول للاداوات الداخلية في حالة كان العنصر قادراً على استيعاب عناصر داخله .

أحداث الفئة Controls :

Click : الضغط بالماوس .
DoubleClick : ضغطتين بالماوس .
MouseEnter : دخول الماوس .
MouseLeave : خروج الماوس من نطاق الاداة .
MouseDown : ضغط زر الماوس لاسفل .
MouseUp : رفع الاصبع عن ضغطة زر الماوس .
MouseMove : عبور الماوس فوق نقطة .
MouseHover
MouseWheel : الضغط على ال Wheel
KeyPress : ضغط زر .
KeyUp : ضغط زر لاسفل .
KeyDown : رفع الاصبع عن الزر المضغوط .
DragDrop : سحب اداة فوق .
DragEnter : دخول اداة لمجال اداة أخرى .
DragLeave : خروج .
DragOver : عبور فوق .
Paint : حدث الرسم .