[RaggiTech]

كاتب الموضوع : sniper.ps



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

شرح تفصيلي لأداة ال ListView وكيفية استخدامها

في هذا الدرس إن شاء الله سأقوم بشرح أداة ال ListView بشيء من التفصيل

في البداية يمكننا إضافة الأداة من ال ToolBox كما في الصورة



أساليب عرض البيانات في أداة ال ListView

أداة ال ListView توفر خمسة خيارات لعرض البيانات في هذه الأداة وذلك عن طريق الخاصية View وهي كما يلي :-
أولاً : عرض التفاصيل أو عرض البيانات كما في أداة ال DataGridView

لاحظ الصورة التالية :



نقوم بضبط الخاصية View = View.Deatils كما يلي

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]Private [/color][color=#0000bb]Sub Form1_Load[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles MyBase[/color][color=#007700].[/color][COLOR=#0000bb]Load
        ListView1[/COLOR][color=#007700].[/color][color=#0000bb]View [/color][color=#007700]= [/color][color=#0000bb]View[/color][color=#007700].[/color][COLOR=#0000bb]Details
    End Sub  
[/COLOR][/COLOR]

كما نلاحظ في الصورة هناك عمودين يحتويان على عناصر , لإضافة عمود نستخدم الخاصية Columns كما يلي وللخاصية Columns بعض الوظائف من أهمها ما يلي :

1) Add : وهذه الوظيفة تمكننا من إضافة عمود ولها الباراميترات من أهمها :
• Text : وهو لتعيين النص الذي يظهر على عنوان العمود
• Width : وهو لتحديد عرض العمود
• TextAlign : وهو لضبط إزاحة النص في عنوان العمود

والكود التالي لإضافة عمودين في أداة ال ListView

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]Private [/color][color=#0000bb]Sub Form1_Load[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles MyBase[/color][color=#007700].[/color][COLOR=#0000bb]Load
ListView1[/COLOR][color=#007700].[/color][color=#0000bb]View [/color][color=#007700]= [/color][color=#0000bb]View[/color][color=#007700].[/color][COLOR=#0000bb]Details  
ListView1[/COLOR][color=#007700].[/color][color=#0000bb]Columns[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#dd0000]"Name"[/color][color=#007700], [/color][color=#0000bb]100[/color][COLOR=#007700])
[/COLOR][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Columns[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#dd0000]"Number"[/color][color=#007700], [/color][color=#0000bb]100[/color][color=#007700], [/color][color=#0000bb]HorizontalAlignment[/color][color=#007700].[/color][color=#0000bb]Center[/color][COLOR=#007700])
[/COLOR][COLOR=#0000bb]End Sub  
[/COLOR][/COLOR]

ملاحظة : العمود الأول لا يمكن تغيير خاصية ال TextAlign له

2) Clear : وهذه الوظيفة تستخدم لمسح جميع الأعمدة والبيانات أيضاً
3) RemoveAt : حذف عمود بناء على رقم ذلك العمود مع العلم أن رقم أول عمود = 0

إنشاء مثال تطبيقي



الآن نأتي لكيفية إضافة عناصر لأداة ال ListView .. سنقوم بإنشاء مثال كما في الصورة التالية:



قم بفتح مشروع جديد ثم أضف أداة الـ ListView إلى الـ From ثم قم بضبط الخاصية View = View.Deatils كما ذكرنا سابقاً ثم نقوم بإضافة ثلاثة أعمدة باستخدام باستخدام الخاصية Columns ليصبح الكود قبل إضافة البيانات كما يلي

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]Private [/color][color=#0000bb]Sub Form1_Load[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles MyBase[/color][color=#007700].[/color][COLOR=#0000bb]Load
ListView1[/COLOR][color=#007700].[/color][color=#0000bb]View [/color][color=#007700]= [/color][color=#0000bb]View[/color][color=#007700].[/color][COLOR=#0000bb]Details  
ListView1[/COLOR][color=#007700].[/color][color=#0000bb]Columns[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#dd0000]"Name"[/color][color=#007700], [/color][color=#0000bb]100[/color][COLOR=#007700])
[/COLOR][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Columns[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#dd0000]"Number"[/color][color=#007700], [/color][color=#0000bb]100[/color][color=#007700], [/color][color=#0000bb]HorizontalAlignment[/color][color=#007700].[/color][color=#0000bb]Center[/color][COLOR=#007700])
[/COLOR][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Columns[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#dd0000]"Address"[/color][color=#007700], [/color][color=#0000bb]100[/color][color=#007700], [/color][color=#0000bb]HorizontalAlignment[/color][color=#007700].[/color][color=#0000bb]Center[/color][COLOR=#007700])
[/COLOR][COLOR=#0000bb]End Sub  
[/COLOR][/COLOR]

الآن لكي نضيف بيانات إلى الـ ListView سنستخدم الخاصية Items .. سنتعرف على أهم الوظائف لهذه الخاصية وهي :-

1) Add : وهذه الوظيفة تمكننا من إضافة بيانات داخل أداة الـ ListView ولها الباراميترات من أهمها ما يلي
• Text : وهو لإضافة النص الذي نريد عرضه داخل أداة ال ListView
• ImageIndex : وهي رقم الصورة التي ستظهر في الـ ListView في حال أردنا إضافة صورة .. طبعاً يجب ضبط خاصية SmallImageList كما يلي

كود :

[color=#000000][COLOR=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]SmallImageList [/color][color=#007700]= [/color][COLOR=#0000bb]ImageList1  
[/COLOR][/COLOR]

وهنا أخذنا الصور من أداة الـ ImageList1 .

2) Clear : وهي لمسح جميع البيانات داخل أداة الـ ListView .. وبدون حذف الأعمدة.
3) Insert : وهي لإضافة صف في مكان معين في أداة الـ ListView .. والباراميترات لها تقريباً نفس باراميترات الوظيفة Add ما تختلف عنها هو وجود الباراميتر Index وهو رقم الصف الذي نريد إضافة صف جديد قبله.
4) RemoveAt : وهي لحذف صف معين من خلال تمرير رقم الصف لها.
5) Item : هذه الخاصية يمكن من خلالها التحكم في البيانات داخل أداة الـ ListView ولها العديد من الوظائف أهمها ما يلي :-
•BackColor : لتغيير لون خلفية العنصر بلون معين .. مثال

كود :

[color=#000000][COLOR=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Item[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]BackColor [/color][color=#007700]= [/color][color=#0000bb]Color[/color][color=#007700].[/color][COLOR=#0000bb]Green  
[/COLOR][/COLOR]

وهنا قمنا بتغيير لون خلفية العنصر الأول إلى اللون الأخضر .

ملاحظة : في حالة كانت خاصية FullRowSelect = True لأداة الـ ListView ففي هذه الحالة سيتم تلوين جميع الصف أما في حالة كانت = False فسيتم تغيير أول حقل فقط من الصف .

• BeginEdit : تستخدم لبدء عملية تحرير الحقل الأول في السطر الذي نريده

ملاحظة : في هذه الحالة يجب ضبط خاصية LabelEdit = True لأداة الـListView

كود :

[color=#000000][COLOR=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Item[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]BeginEdit[/color][COLOR=#007700]()  
[/COLOR][color=#0000bb][/color][/COLOR]

• Checked : تستخدم لوضع علامة صح أمام العنصر ولها قيمتان إما True أو False

ملاحظة : في هذه الحالة يجب ضبط خاصية CheckBoxes = True لأداة الـListView

كود :

[color=#000000][COLOR=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Item[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]Checked [/color][color=#007700]= [/color][COLOR=#0000bb]True  
[/COLOR][/COLOR]

• Font : لضبط نوع الخط للصف الذي نريده

كود :

[color=#000000][COLOR=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Item[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]Font [/color][color=#007700]= New [/color][color=#0000bb]Font[/color][color=#007700]([/color][color=#dd0000]"Arial"[/color][color=#007700], [/color][color=#0000bb]16[/color][color=#007700], [/color][color=#0000bb]FontStyle[/color][color=#007700].[/color][color=#0000bb]Bold[/color][COLOR=#007700])  
[/COLOR][color=#0000bb][/color][/COLOR]

• ForeColor : لتغيير لون الخط للعناصر

كود :

[color=#000000][COLOR=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Item[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]ForeColor [/color][color=#007700]= [/color][color=#0000bb]Color[/color][color=#007700].[/color][COLOR=#0000bb]Blue  
[/COLOR][/COLOR]

• Remove : حذف الصف

كود :

[color=#000000][COLOR=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Item[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]Remove[/color][COLOR=#007700]()  
[/COLOR][color=#0000bb][/color][/COLOR]

• Selected : وضع شريط التحديد على الصف

كود :

[color=#000000][COLOR=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Item[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]Selected [/color][color=#007700]= [/color][COLOR=#0000bb]True
ListView1[/COLOR][color=#007700].[/color][color=#0000bb]Focus[/color][COLOR=#007700]()  
[/COLOR][color=#0000bb][/color][/COLOR]

• SubItems : للتحكم في الحقول الموجودة في الأعمدة وأهم خاصية لها هي Text وهي لجلب نص من حقل معين أو إضافة نص في حقل معين .

كود :

[color=#000000][COLOR=#0000bb]MessageBox[/color][color=#007700].[/color][color=#0000bb]Show[/color][color=#007700]([/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Item[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]SubItems[/color][color=#007700]([/color][color=#0000bb]1[/color][color=#007700]).[/color][color=#0000bb]Text[/color][COLOR=#007700])  
[/COLOR][color=#0000bb][/color][/COLOR]

هنا سيتم إظهار نص الحقل الموجود في الصف الأول وفي العمود الثاني .. لأن ترقيم الأعمدة والصفوف يبدأ من الرقم 0

• Text : لإضافة أو جلب نص من الحقل الموجود في العمود الأول للصف

كود :

[color=#000000][COLOR=#0000bb]MessageBox[/color][color=#007700].[/color][color=#0000bb]Show[/color][color=#007700]([/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Item[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]Text[/color][COLOR=#007700])  
[/COLOR][color=#0000bb][/color][/COLOR]

* نعود الآن لبرمجة مثالنا .. نبدأ بوضع كود زر إضافة حيث يمكننا برمجته بطريقتين كما يلي :

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]Private [/color][color=#0000bb]Sub Button1_Click[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles Button1[/color][color=#007700].[/color][COLOR=#0000bb]Click
ListView1[/COLOR][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#0000bb]TextBox1[/color][color=#007700].[/color][color=#0000bb]Text[/color][COLOR=#007700])
[/COLOR][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700]([/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Count [/color][color=#007700]- [/color][color=#0000bb]1[/color][color=#007700]).[/color][color=#0000bb]SubItems[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#0000bb]TextBox2[/color][color=#007700].[/color][color=#0000bb]Text[/color][COLOR=#007700])
[/COLOR][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700]([/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Count [/color][color=#007700]- [/color][color=#0000bb]1[/color][color=#007700]).[/color][color=#0000bb]SubItems[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#0000bb]TextBox3[/color][color=#007700].[/color][color=#0000bb]Text[/color][COLOR=#007700])
[/COLOR][COLOR=#0000bb]End Sub  
[/COLOR][/COLOR]

في السطر الأول من الكود قمنا بإضافة صف جديد ويتم وضع النص الموجود في الـ TextBox1 في الحقل الأول من العمود .. وفي السطر الثاني يتم وضع النص الموجود في الـ TextBox2 في الحقل الثاني من العمود .. وفي السطر الثالث يتم وضع النص الموجود في الـ TextBox3 في الحقل الثالث من العمود .. وقد قمنا باستخدام الخاصية ListView1.Items.Count لإضافة النص الموجود في الـ TextBox2 و TextBox3 في آخر صف والذي رقمه = عدد الصفوف – 1 .


الطريقة الثانية

نقوم بتعريف متغير من نوع ListViewItem ثم نقوم بإسناده للوظيفة Add وبعد ذلك نضيف العناصر في الصف كما يلي

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]Private [/color][color=#0000bb]Sub Button1_Click[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles Button1[/color][color=#007700].[/color][COLOR=#0000bb]Click
Dim Lst [/COLOR][color=#007700]As [/color][COLOR=#0000bb]ListViewItem
Lst [/COLOR][color=#007700]= [/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#0000bb]TextBox1[/color][color=#007700].[/color][color=#0000bb]Text[/color][COLOR=#007700])
[/COLOR][color=#0000bb]Lst[/color][color=#007700].[/color][color=#0000bb]SubItems[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#0000bb]TextBox2[/color][color=#007700].[/color][color=#0000bb]Text[/color][COLOR=#007700])
[/COLOR][color=#0000bb]Lst[/color][color=#007700].[/color][color=#0000bb]SubItems[/color][color=#007700].[/color][color=#0000bb]Add[/color][color=#007700]([/color][color=#0000bb]TextBox3[/color][color=#007700].[/color][color=#0000bb]Text[/color][COLOR=#007700])
[/COLOR][COLOR=#0000bb]End Sub  
[/COLOR][/COLOR]

والآن برمجة الزر حذف المحدد

نستخدم الخاصية FocusedItem لجلب رقم الصف المحدد .. طبعاً في البداية يجب أن نتحقق من وجود بيانات داخل الأداة كما يلي

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]Private [/color][color=#0000bb]Sub Button2_Click[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles Button2[/color][color=#007700].[/color][COLOR=#0000bb]Click
[/COLOR][color=#007700]If [/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Count [/color][color=#007700]> [/color][COLOR=#0000bb]0 Then
ListView1[/COLOR][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]RemoveAt[/color][color=#007700]([/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]FocusedItem[/color][color=#007700].[/color][color=#0000bb]Index[/color][COLOR=#007700])
[/COLOR][color=#0000bb]End [/color][COLOR=#007700]If
[/COLOR][COLOR=#0000bb]End Sub  
[/COLOR][/COLOR]

زر حذف الكل وهذا سهل جداً وذلك عن طريق الوظيفة Clear كما يلي

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]Private [/color][color=#0000bb]Sub Button3_Click[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles Button3[/color][color=#007700].[/color][COLOR=#0000bb]Click
ListView1[/COLOR][color=#007700].[/color][color=#0000bb]Items[/color][color=#007700].[/color][color=#0000bb]Clear[/color][COLOR=#007700]()
[/COLOR][COLOR=#0000bb]End Sub  
[/COLOR][/COLOR]

الآن بقي آخر شيء في المثال وهو عن الضغط على صف معين يتم إظهار بيانات ذلك الصف في الـ TextBoxes .. سنستخدم الحدث Click لأداة الـ ListView كما يلي :-

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]Private [/color][color=#0000bb]Sub ListView1_Click[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles ListView1[/color][color=#007700].[/color][COLOR=#0000bb]Click
TextBox1[/COLOR][color=#007700].[/color][color=#0000bb]Text [/color][color=#007700]= [/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]SelectedItems[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][COLOR=#0000bb]Text
TextBox2[/COLOR][color=#007700].[/color][color=#0000bb]Text [/color][color=#007700]= [/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]SelectedItems[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]SubItems[/color][color=#007700]([/color][color=#0000bb]1[/color][color=#007700]).[/color][COLOR=#0000bb]Text
TextBox3[/COLOR][color=#007700].[/color][color=#0000bb]Text [/color][color=#007700]= [/color][color=#0000bb]ListView1[/color][color=#007700].[/color][color=#0000bb]SelectedItems[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700]).[/color][color=#0000bb]SubItems[/color][color=#007700]([/color][color=#0000bb]2[/color][color=#007700]).[/color][COLOR=#0000bb]Text
End Sub  
[/COLOR][/COLOR]

الآن نكون قد انتهينا من برمجة المثال
يمكنكم تحميله من الرابط التالي

حمل المثال التوضيحي من هنا

يتبع ...