• 1
Sniper.ps

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

سؤال

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

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

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

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

01316101755.png

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

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

أولاً : عرض التفاصيل أو عرض البيانات كما في أداة ال DataGridView

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

01316101770.png

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


ListView1.View = View.Details
End Sub
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

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

1) Add : وهذه الوظيفة تمكننا من إضافة عمود ولها الباراميترات من أهمها :

Text : وهو لتعيين النص الذي يظهر على عنوان العمود

Width : وهو لتحديد عرض العمود

TextAlign : وهو لضبط إزاحة النص في عنوان العمود

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


ListView1.View = View.Details
ListView1.Columns.Add("Name", 100)
ListView1.Columns.Add("Number", 100, HorizontalAlignment.Center)
End Sub
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

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

2) Clear : وهذه الوظيفة تستخدم لمسح جميع الأعمدة والبيانات أيضاً

3) RemoveAt : حذف عمود بناء على رقم ذلك العمود مع العلم أن رقم أول عمود = 0

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

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

01316101781.png

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


ListView1.View = View.Details
ListView1.Columns.Add("Name", 100)
ListView1.Columns.Add("Number", 100, HorizontalAlignment.Center)
ListView1.Columns.Add("Address", 100, HorizontalAlignment.Center)
End Sub
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

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

1) Add : وهذه الوظيفة تمكننا من إضافة بيانات داخل أداة الـ ListView ولها الباراميترات من أهمها ما يلي

Text : وهو لإضافة النص الذي نريد عرضه داخل أداة ال ListView

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

ListView1.SmallImageList = ImageList1

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

2) Clear : وهي لمسح جميع البيانات داخل أداة الـ ListView .. وبدون حذف الأعمدة.

3) Insert : وهي لإضافة صف في مكان معين في أداة الـ ListView .. والباراميترات لها تقريباً نفس باراميترات الوظيفة Add ما تختلف عنها هو وجود الباراميتر Index وهو رقم الصف الذي نريد إضافة صف جديد قبله.

4) RemoveAt : وهي لحذف صف معين من خلال تمرير رقم الصف لها.

5) Item : هذه الخاصية يمكن من خلالها التحكم في البيانات داخل أداة الـ ListView ولها العديد من الوظائف أهمها ما يلي :-

BackColor : لتغيير لون خلفية العنصر بلون معين .. مثال

ListView1.Items.Item(0).BackColor = Color.Green

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

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

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

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

ListView1.Items.Item(0).BeginEdit()

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

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

ListView1.Items.Item(0).Checked = True

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

ListView1.Items.Item(0).Font = New Font("Arial", 16, FontStyle.Bold)

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

ListView1.Items.Item(0).ForeColor = Color.Blue

Remove : حذف الصف

ListView1.Items.Item(0).Remove()

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


ListView1.Focus()
ListView1.Items.Item(0).Selected = True

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

MessageBox.Show(ListView1.Items.Item(0).SubItems(1).Text)

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

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

MessageBox.Show(ListView1.Items.Item(0).Text)

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


ListView1.Items.Add(TextBox1.Text)
ListView1.Items(ListView1.Items.Count - 1).SubItems.Add(TextBox2.Text)
ListView1.Items(ListView1.Items.Count - 1).SubItems.Add(TextBox3.Text)
End Sub
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

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

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

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


Dim Lst As ListViewItem
Lst = ListView1.Items.Add(TextBox1.Text)
Lst.SubItems.Add(TextBox2.Text)
Lst.SubItems.Add(TextBox3.Text)
End Sub
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

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

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


If ListView1.Items.Count > 0 Then
ListView1.Items.RemoveAt(ListView1.FocusedItem.Index)
End If
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

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


ListView1.Items.Clear()
End Sub
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

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


TextBox1.Text = ListView1.SelectedItems(0).Text
TextBox2.Text = ListView1.SelectedItems(0).SubItems(1).Text
TextBox3.Text = ListView1.SelectedItems(0).SubItems(2).Text
End Sub
Private Sub ListView1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ListView1.Click

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

يمكنكم تحميله من الرابط التالي

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

خصائص أداة الـ ListView

سنتعرف الآن على أهم خصائص ووظائف أداة الـ ListView وهي كما يلي :

AutoResizeColumn : تستخدم لتحجيم الأعمدة في الأداة .. ولها باراميترين وهما كما يلي

Index : رقم العمود

HeaderAutoResize : تحديد نمط التحديد ولها ثلاث خيارات وهي كما يلي

ColumnHeaderAutoResizeStyle.ColumnContent : تحجيم العمود بناء على طول نص في حقول ذلك العمود .

ColumnHeaderAutoResizeStyle.HeaderSize : تحجيم العمود بناء على طول النص في عنوان العمود .

ColumnHeaderAutoResizeStyle.None : عدم فعل أي شيء

AutoResizeColumns : تستخدم لتحجيم جميع الأعمدة في الأداة دفعة واحدة ولها بارميتر واحد وهو HeaderAutoResize

BackColor : لتغيير لون خلفية أداة الـ ListView

BackgroundImage : لوضع صورة في أداة الـ ListView

BorderStyle : لتغيير شكل الأداة

BringToFront : جعل أداة الـ ListView في مقدمة الأدوات

CheckBoxes : إظهار أو إخفاء مربعات التحديد في الأداة

Clear : مسح جميع محتويات أداة الـListView بما في ذلك الأعمدة

Dispose : إزالة الأداة عن النموذج

Enabled : تفعيل وتعطيل أداة الـ ListView

Focus : التركيز على أداة الـ ListView

FocusedItem : ولها عدة وظائف مشابهه للخاصية Item التابعة للخاصية Items ويتم تطبيق هذه الوظائف على الصف المحدد في الأداة .. فمثلاً يمكن حذف الصف المحدد كما يلي

ListView1.FocusedItem.Remove()

Font : تغيير الخط في كامل الأداة

ForeColor : تغيير لون الخط في أداة الـ ListView

FullRowSelect : جعل شريط التحديد يمتد على جميع الحقول في الصف

GridLines : لإظهار الخطوط في أداة الـ ListView

HeaderStyle : وهي لأسلوب عرض عنوان الأعمدة وهي كما يلي

ColumnHeaderStyle.Clickable : القدرة على ضغط عنوان الأعمدة .

ColumnHeaderStyle.Nonclickable : عدم القدرة على ضغط عنوان الأعمدة.

ColumnHeaderStyle.None : عدم فعل أي شيء

Hide : اخفاء الأداة عن النموذج

HoverSelection : القدرة على تحريك شريط التحديد من خلال تحريك الماوس

MultiSelect : خاصية تتيح القدرة على تحديد أكثر من صف في الـ ListView

• RightToLeftLayout : تحويل اتجاه أداة الـ ListView من اليمين إلى اليسار وهذا مناسب مع البرامج العربية .. ولكي تعمل هذه الخاصية يجب ضبط خاصية RightToLeft = True كما يلي

ListView1.RightToLeft = RightToLeft.Yes

ListView1.RightToLeftLayout = True

Scrollable : يمكن من خلال هذه الخاصية إظهار أو إخفاء أشرطة التمرير في أداة الـ ListView

SendToBack : وضع الأداة خلف الأدوات

Show : إظهار أداة الـ ListView .. وهي عكس الوظيفة Hide

Sort : تستخدم لترتيب الـ ListView بناء على قيمة الخاصية Sorting

Sorting : تستخدم لتحديد نوع الترتيب إما تصاعدي (Ascending) أو تنازلي (Descending)

ListViewItemSorter : تحديد رقم العمود الذي سيتم الترتيب بواسطته .. لكن هنا سيلزمنا هذه الفئة



Implements IComparer
Private col As Integer

Public Sub New()
col = 0
End Sub

Public Sub New(ByVal column As Integer)
col = column
End Sub

Public Function Compare(ByVal x As Object, ByVal y As Object) As Integer Implements IComparer.Compare
Return [String].Compare(CType(x, ListViewItem).SubItems(col).Text, CType(y, ListViewItem).SubItems(col).Text)
End Function
End Class
Class ListViewItemComparer

ليصبح كود ترتيب الـ ListView كما يلي


ListView1.ListViewItemSorter = New ListViewItemComparer()
ListView1.Sort()
ListView1.Sorting = SortOrder.Ascending

حيث القيمة الافتراضية لـ ListViewItemComparer = 0 وهي رقم العمود الأول ويمكن جعل الترتيب بواسطة العمود الثاني بتعديل السطر الثاني ليصبح كما يلي

ListView1.ListViewItemSorter = New ListViewItemComparer(1)

TopItem : للتحكم في العنصر الذي يكون في أعلى أداة الـ ListView وليس شرطاً أن يكون أول عنصر في الأداة .. ولها نفس خصائص الخاصية Items .. فمثلاً لحذف العنصر الموجود في أعلى أداة الـListView نستخدم الكود التالي :

ListView1.TopItem.Remove()

Visible : إخفاء وإظهار أداة الـ ListView

أحداث الأداة ListView

سنتعرف الآن على أهم أحداث أداة الـ ListView وهي كما يلي :

AfterLabelEdit : ينشط هذا الحدث عند الانتهاء من تعديل خلية في أداة الـ ListView

BeforeLabelEdit : ينشط هذا الحدث قبل البدء في تعديل خلية في أداة الـ ListView

Click : ينشط هذا الحدث عند النقر على أداة الـ ListView

ColumnClick : ينشط هذا الحدث عند النقر على الـ Header (العنوان الرأسي) لأداة الـ ListView ويمكن استخدامه كما يلي


If e.Column = 1 Then
MsgBox("Sniper")
End If
End Sub
Private Sub ListView1_ColumnClick(ByVal sender As Object, ByVal e As System.Windows.Forms.ColumnClickEventArgs) Handles ListView1.ColumnClick

حيث الرقم 1 هو رقم العمود الذي نريد عند الضغط عليه يتم تنفيذ هذا الحدث

Disposed : ينشط هذا الحدث عند إزالة باستخدام الأمر Dipose أداة الـ ListView

DoubleClick : ينشط هذا الحدث عند النقر المزدوج على أداة الـ ListView

ItemSelectionChanged : ينشط هذا الحدث عند تغيير موقع شريط التحديد أداة الـ ListView

ربط أداة الـ ListView بقاعدة بيانات Access

وفي الرابط التالي مثال لربط أداة الـ ListView بقاعدة بيانات Access

حمل المثال من هنا

ثانياً : عرض البيانات عندما تكون خاصية View = LargeIcon أو Tile

هنا سنقوم بإنشاء مثال كما في الصورة (LargeIcon)

01316101789.png

أو كما في الصورة (Tile)

01316101795.png

في البداية سنقوم بضبط خاصية View كما يلي

ListView1.View = View.LargeIcon

هنا في هذين الأسلوبين من عرض البيانات نستخدم خاصية LargeImageList باسم أداة الـ ImageList التي نريد أخذ الصور منها كما يلي

ListView1.LargeImageList = ImageList1

إضافة العناصر داخل الأداة كما يلي

ListView1.Items.Add (Text , ImageIndex)

حيث Text : هو النص الذي سيظهر أسفل صورة العنصر

ImageIndex : رقم الفهرس للصورة التي سنضعها للعنصر

والمثال التوضيحي في الرابط التالي

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

ثالثاً : عرض البيانات عندما تكون خاصية View = List أو SmallIcon

هنا سنقوم بإنشاء مثال كما في الصورة (List)

01316101804.png

أو كما في الصورة (SmallIcon)

01316101813.png

في البداية سنقوم بضبط خاصية View كما يلي

ListView1.View = View.List

هنا في هذين الأسلوبين من عرض البيانات نستخدم خاصية SmallImageList باسم أداة الـ ImageList التي نريد أخذ الصور منها كما يلي

ListView1. SmallImageList = ImageList1

إضافة العناصر داخل الأداة كما يلي

ListView1.Items.Add (Text , ImageIndex)

حيث Text : هو النص الذي سيظهر أسفل صورة العنصر

ImageIndex : رقم الفهرس للصورة التي سنضعها للعنصر

والمثال التوضيحي في الرابط التالي

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

ارجو أن أكون قد وفقت في الشرح

وفقنا الله وإياكم لما يحبه ويرضاه

في المرفقات مثال منقول لكيفية إضافة أدوات داخل الـ ListView

بالتوفيق للجميع

ListViewExtra-01.rar

تم تعديل بواسطه Sniper.ps
5

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

11 إجابة على هذا السؤال .

  • 0

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

شكرا لك اخي على المجهود الرائع .. تمنياتي لك بالتوفيق ..

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

جزاك الله خير على هذا الشرح الرائع.

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

فعلاً لا يمكن تغيير خاصية الTextAlign بطريقة مباشرة , و لكن يمكن ذلك عن طريق رسمها ,

كالتالي:


' Draws column headers.
Private Sub listView1_DrawColumnHeader(ByVal sender As Object, _
ByVal e As DrawListViewColumnHeaderEventArgs) _
Handles listView1.DrawColumnHeader

Dim sf As New StringFormat()
Try

' Store the column text alignment, letting it default
' to Left if it has not been set to Center or Right.
Select Case e.Header.TextAlign
Case HorizontalAlignment.Center
sf.Alignment = StringAlignment.Center
Case HorizontalAlignment.Right
sf.Alignment = StringAlignment.Far
End Select

' Draw the standard header background.
e.DrawBackground()

' Draw the header text.
Dim headerFont As New Font("Helvetica", 10, FontStyle.Bold)
Try
e.Graphics.DrawString(e.Header.Text, headerFont, _
Brushes.Black, e.Bounds, sf)
Finally
headerFont.Dispose()
End Try

Finally
sf.Dispose()
End Try

End Sub

ولا ننسى ان نغير الخاصية OwnerDraw = True

المصدر

تمنياتي لك بالتوفيق.

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

بارك الله فيك وأكثر من أمثالك

لك منى كل الشكر والعرفان

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

اكرمك الله

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

انا الحقيقه مش عارف اقولك ايه يا أخ Sniper.ps انت بجد شخصية محترمه جدااا

وانا استفدت كتير جدااا من الموضوع ده وانا بجد كنت فى اشد الحاجه اليه لدرجه كبيره جداا نظراً لأهمية هذه الاداة وقوتها

جزاك الله خيراً وبرجاء قبول صداقتى

فى انتظار مواضيعك الجميله وتمنياتى بدوام التوفيق

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جزاك الله خيرا .. و جعله في ميزان حسناتك :)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

يعطيك العافية

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

 

فعلا مجهود رائع في الشرح

 

اخي الكريم

لدي سؤال هام

 

كيف يمكن لي ان اغير لون full  row select( عادة يكون كحلي ) وانا اريد ان اضع لون يتناسب مع شكل واجهات برنامجي

 

ارجو المساعدة

 

والف الف شكر

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

مشكورررررررررررررررررر

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جزآآك الله خير ..... وآآصل لآتوقف يـ ولد

 

 

 

 

 

 

 

 

شعآآري : الصمت علآمة الرضآ @... امزح سلآآآم

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .