- tarik
- عدد المساهمات : 134
تاريخ التسجيل : 08/10/2012
شرح تفصيلى للاداة ليست فيو فى vb.net
الأربعاء أكتوبر 10, 2012 6:30 pm
السلام عليكم ورحمة الله وبركاته
شرح تفصيلي لأداة ال ListView وكيفية استخدامها
في هذا الدرس إن شاء الله سأقوم بشرح أداة ال ListView بشيء من التفصيل
في البداية يمكننا إضافة الأداة من ال ToolBox كما في الصورة
[img] [/img]
أساليب عرض البيانات في أداة ال ListView
أداة ال ListView توفر خمسة خيارات لعرض البيانات في هذه الأداة وذلك عن طريق الخاصية View وهي كما يلي :-
أولاً : عرض التفاصيل أو عرض البيانات كما في أداة ال DataGridView
لاحظ الصورة التالية :
[img] [/img]
نقوم بضبط الخاصية View = View.Deatils كما يلي
1) Add : وهذه الوظيفة تمكننا من إضافة عمود ولها الباراميترات من أهمها :
• Text : وهو لتعيين النص الذي يظهر على عنوان العمود
• Width : وهو لتحديد عرض العمود
• TextAlign : وهو لضبط إزاحة النص في عنوان العمود
والكود التالي لإضافة عمودين في أداة ال ListView
2) Clear : وهذه الوظيفة تستخدم لمسح جميع الأعمدة والبيانات أيضاً
3) RemoveAt : حذف عمود بناء على رقم ذلك العمود مع العلم أن رقم أول عمود = 0
إنشاء مثال تطبيقي
الآن نأتي لكيفية إضافة عناصر لأداة ال ListView .. سنقوم بإنشاء مثال كما في الصورة التالية:
[img] [/img]
قم بفتح مشروع جديد ثم أضف أداة الـ ListView إلى الـ From ثم قم بضبط الخاصية View = View.Deatils كما ذكرنا سابقاً ثم نقوم بإضافة ثلاثة أعمدة باستخدام باستخدام الخاصية Columns ليصبح الكود قبل إضافة البيانات كما يلي
1) Add : وهذه الوظيفة تمكننا من إضافة بيانات داخل أداة الـ ListView ولها الباراميترات من أهمها ما يلي
• Text : وهو لإضافة النص الذي نريد عرضه داخل أداة ال ListView
• ImageIndex : وهي رقم الصورة التي ستظهر في الـ ListView في حال أردنا إضافة صورة .. طبعاً يجب ضبط خاصية SmallImageList كما يلي
2) Clear : وهي لمسح جميع البيانات داخل أداة الـ ListView .. وبدون حذف الأعمدة.
3) Insert : وهي لإضافة صف في مكان معين في أداة الـ ListView .. والباراميترات لها تقريباً نفس باراميترات الوظيفة Add ما تختلف عنها هو وجود الباراميتر Index وهو رقم الصف الذي نريد إضافة صف جديد قبله.
4) RemoveAt : وهي لحذف صف معين من خلال تمرير رقم الصف لها.
5) Item : هذه الخاصية يمكن من خلالها التحكم في البيانات داخل أداة الـ ListView ولها العديد من الوظائف أهمها ما يلي :-
•BackColor : لتغيير لون خلفية العنصر بلون معين .. مثال
ملاحظة : في حالة كانت خاصية FullRowSelect = True لأداة الـ ListView ففي هذه الحالة سيتم تلوين جميع الصف أما في حالة كانت = False فسيتم تغيير أول حقل فقط من الصف .
• BeginEdit : تستخدم لبدء عملية تحرير الحقل الأول في السطر الذي نريده
ملاحظة : في هذه الحالة يجب ضبط خاصية LabelEdit = True لأداة الـListView
ملاحظة : في هذه الحالة يجب ضبط خاصية CheckBoxes = True لأداة الـListView
• Text : لإضافة أو جلب نص من الحقل الموجود في العمود الأول للصف
الطريقة الثانية
نقوم بتعريف متغير من نوع ListViewItem ثم نقوم بإسناده للوظيفة Add وبعد ذلك نضيف العناصر في الصف كما يلي
نستخدم الخاصية FocusedItem لجلب رقم الصف المحدد .. طبعاً في البداية يجب أن نتحقق من وجود بيانات داخل الأداة كما يلي
خصائص أداة الـ 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 ويتم تطبيق هذه الوظائف على الصف المحدد في الأداة .. فمثلاً يمكن حذف الصف المحدد كما يلي
• 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 : تحديد رقم العمود الذي سيتم الترتيب بواسطته .. لكن هنا سيلزمنا هذه الفئة
أحداث الأداة ListView
سنتعرف الآن على أهم أحداث أداة الـ ListView وهي كما يلي :
• AfterLabelEdit : ينشط هذا الحدث عند الانتهاء من تعديل خلية في أداة الـ ListView
• BeforeLabelEdit : ينشط هذا الحدث قبل البدء في تعديل خلية في أداة الـ ListView
• Click : ينشط هذا الحدث عند النقر على أداة الـ ListView
• ColumnClick : ينشط هذا الحدث عند النقر على الـ Header (العنوان الرأسي) لأداة الـ ListView ويمكن استخدامه كما يلي
• Disposed : ينشط هذا الحدث عند إزالة باستخدام الأمر Dipose أداة الـ ListView
• DoubleClick : ينشط هذا الحدث عند النقر المزدوج على أداة الـ ListView
• ItemSelectionChanged : ينشط هذا الحدث عند تغيير موقع شريط التحديد أداة الـ
ListView
ثانياً : عرض البيانات عندما تكون خاصية View = LargeIcon أو Tile
هنا سنقوم بإنشاء مثال كما في الصورة (LargeIcon)
أو كما في الصورة (Tile
[img] [/img]
في البداية سنقوم بضبط خاصية View كما يلي
رموز PHP:
ListView1.LargeImageList = ImageList1
إضافة العناصر داخل الأداة كما يلي
ListView1.Items.Add (Text , ImageIndex)
حيث Text : هو النص الذي سيظهر أسفل صورة العنصر
ImageIndex : رقم الفهرس للصورة التي سنضعها للعنصر
والمثال التوضيحي في الرابط التالي
حمل المثال التوضيحي من هنا
ثالثاً : عرض البيانات عندما تكون خاصية View = List أو SmallIcon
هنا سنقوم بإنشاء مثال كما في الصورة (List)
الصورة فى اخر الموضوع
في البداية سنقوم بضبط خاصية View كما يلي
ListView1.Items.Add (Text , ImageIndex)
حيث Text : هو النص الذي سيظهر أسفل صورة العنصر
ImageIndex : رقم الفهرس للصورة التي سنضعها للعنصر
[img] [/img]شرح تفصيلي لأداة ال ListView وكيفية استخدامها
في هذا الدرس إن شاء الله سأقوم بشرح أداة ال ListView بشيء من التفصيل
في البداية يمكننا إضافة الأداة من ال ToolBox كما في الصورة
[img] [/img]
أساليب عرض البيانات في أداة ال ListView
أداة ال ListView توفر خمسة خيارات لعرض البيانات في هذه الأداة وذلك عن طريق الخاصية View وهي كما يلي :-
أولاً : عرض التفاصيل أو عرض البيانات كما في أداة ال DataGridView
لاحظ الصورة التالية :
[img] [/img]
نقوم بضبط الخاصية View = View.Deatils كما يلي
- الكود:
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
ListView1.View = View.Details
End Sub
1) Add : وهذه الوظيفة تمكننا من إضافة عمود ولها الباراميترات من أهمها :
• Text : وهو لتعيين النص الذي يظهر على عنوان العمود
• Width : وهو لتحديد عرض العمود
• TextAlign : وهو لضبط إزاحة النص في عنوان العمود
والكود التالي لإضافة عمودين في أداة ال ListView
- الكود:
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
ListView1.View = View.Details
ListView1.Columns.Add("Name", 100)
ListView1.Columns.Add("Number", 100, HorizontalAlignment.Center)
End Sub
2) Clear : وهذه الوظيفة تستخدم لمسح جميع الأعمدة والبيانات أيضاً
3) RemoveAt : حذف عمود بناء على رقم ذلك العمود مع العلم أن رقم أول عمود = 0
إنشاء مثال تطبيقي
الآن نأتي لكيفية إضافة عناصر لأداة ال ListView .. سنقوم بإنشاء مثال كما في الصورة التالية:
[img] [/img]
قم بفتح مشروع جديد ثم أضف أداة الـ ListView إلى الـ From ثم قم بضبط الخاصية View = View.Deatils كما ذكرنا سابقاً ثم نقوم بإضافة ثلاثة أعمدة باستخدام باستخدام الخاصية Columns ليصبح الكود قبل إضافة البيانات كما يلي
- الكود:
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
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
1) Add : وهذه الوظيفة تمكننا من إضافة بيانات داخل أداة الـ ListView ولها الباراميترات من أهمها ما يلي
• Text : وهو لإضافة النص الذي نريد عرضه داخل أداة ال ListView
• ImageIndex : وهي رقم الصورة التي ستظهر في الـ ListView في حال أردنا إضافة صورة .. طبعاً يجب ضبط خاصية SmallImageList كما يلي
- الكود:
ListView1.SmallImageList = 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()
ملاحظة : في هذه الحالة يجب ضبط خاصية CheckBoxes = True لأداة الـListView
- الكود:
ListView1.Items.Item(0).Checked = True
- الكود:
ListView1.Items.Item(0).Font = New Font("Arial", 16, FontStyle.Bold)
- الكود:
ListView1.Items.Item(0).ForeColor = Color.Blue
- الكود:
ListView1.Items.Item(0).Remove()
- الكود:
ListView1.Items.Item(0).Selected = True
ListView1.Focus()
- الكود:
MessageBox.Show(ListView1.Items.Item(0).SubItems(1).Text)
• Text : لإضافة أو جلب نص من الحقل الموجود في العمود الأول للصف
- الكود:
MessageBox.Show(ListView1.Items.Item(0).Text)
- الكود:
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
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
الطريقة الثانية
نقوم بتعريف متغير من نوع ListViewItem ثم نقوم بإسناده للوظيفة Add وبعد ذلك نضيف العناصر في الصف كما يلي
- الكود:
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim Lst As ListViewItem
Lst = ListView1.Items.Add(TextBox1.Text)
Lst.SubItems.Add(TextBox2.Text)
Lst.SubItems.Add(TextBox3.Text)
End Sub
نستخدم الخاصية FocusedItem لجلب رقم الصف المحدد .. طبعاً في البداية يجب أن نتحقق من وجود بيانات داخل الأداة كما يلي
- الكود:
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
If ListView1.Items.Count > 0 Then
ListView1.Items.RemoveAt(ListView1.FocusedItem.Index)
End If
End Sub
- الكود:
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
ListView1.Items.Clear()
End Sub
- الكود:
Private Sub ListView1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ListView1.Click
TextBox1.Text = ListView1.SelectedItems(0).Text
TextBox2.Text = ListView1.SelectedItems(0).SubItems(1).Text
TextBox3.Text = ListView1.SelectedItems(0).SubItems(2).Text
End Sub
خصائص أداة الـ 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()
• 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 : تحديد رقم العمود الذي سيتم الترتيب بواسطته .. لكن هنا سيلزمنا هذه الفئة
- الكود:
Class ListViewItemComparer
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
- الكود:
ListView1.Sorting = SortOrder.Ascending
ListView1.ListViewItemSorter = New ListViewItemComparer()
ListView1.Sort()
- الكود:
ListView1.ListViewItemSorter = New ListViewItemComparer(1)
- الكود:
ListView1.TopItem.Remove()
أحداث الأداة ListView
سنتعرف الآن على أهم أحداث أداة الـ ListView وهي كما يلي :
• AfterLabelEdit : ينشط هذا الحدث عند الانتهاء من تعديل خلية في أداة الـ ListView
• BeforeLabelEdit : ينشط هذا الحدث قبل البدء في تعديل خلية في أداة الـ ListView
• Click : ينشط هذا الحدث عند النقر على أداة الـ ListView
• ColumnClick : ينشط هذا الحدث عند النقر على الـ Header (العنوان الرأسي) لأداة الـ ListView ويمكن استخدامه كما يلي
- الكود:
Private Sub ListView1_ColumnClick(ByVal sender As Object, ByVal e As System.Windows.Forms.ColumnClickEventArgs) Handles ListView1.ColumnClick
If e.Column = 1 Then
MsgBox("Sniper")
End If
End Sub
• Disposed : ينشط هذا الحدث عند إزالة باستخدام الأمر Dipose أداة الـ ListView
• DoubleClick : ينشط هذا الحدث عند النقر المزدوج على أداة الـ ListView
• ItemSelectionChanged : ينشط هذا الحدث عند تغيير موقع شريط التحديد أداة الـ
ListView
ثانياً : عرض البيانات عندما تكون خاصية View = LargeIcon أو Tile
هنا سنقوم بإنشاء مثال كما في الصورة (LargeIcon)
أو كما في الصورة (Tile
[img] [/img]
في البداية سنقوم بضبط خاصية View كما يلي
- الكود:
ListView1.View = View.LargeIcon
رموز PHP:
ListView1.LargeImageList = ImageList1
إضافة العناصر داخل الأداة كما يلي
ListView1.Items.Add (Text , ImageIndex)
حيث Text : هو النص الذي سيظهر أسفل صورة العنصر
ImageIndex : رقم الفهرس للصورة التي سنضعها للعنصر
والمثال التوضيحي في الرابط التالي
حمل المثال التوضيحي من هنا
ثالثاً : عرض البيانات عندما تكون خاصية View = List أو SmallIcon
هنا سنقوم بإنشاء مثال كما في الصورة (List)
الصورة فى اخر الموضوع
في البداية سنقوم بضبط خاصية View كما يلي
- الكود:
ListView1.View = View.List
- الكود:
ListView1. SmallImageList = ImageList1
ListView1.Items.Add (Text , ImageIndex)
حيث Text : هو النص الذي سيظهر أسفل صورة العنصر
ImageIndex : رقم الفهرس للصورة التي سنضعها للعنصر
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى