شرح تفصيلي لأداة ال ListView وكيفية استخدامها
صفحة 1 من اصل 1 • شاطر
شرح تفصيلي لأداة ال ListView وكيفية استخدامها
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
شرح تفصيلي لأداة ال ListView وكيفية استخدامها
بعد
مشاهدتي للعديد من الأسئلة والاستفسارات حول أداة ال ListView قررت كتابة
مقال بشكل تفصيلي عن أداة ال ListView وسيتم خلال هذا المثال طرح أمثلة
لتقريب الأفكار إلى ذهن القارئ , وأنوه في بداية الشرح أنني سأستخدم الكود
فقط في التعامل مع أداة ال ListView ولن استخدم الخصائص مطلقاً .. لنبدأ
على بركة الله :-
في البدء سنتعلم كيف تتم إضافة الأداة , من قائمة
Project اختر Components ثم اختر Microsoft Windows Common Controls 6.0
كما في الصور التالية :
صورة الأداة بعد إضافتها على ال Form
من استخدامات أداة ال ListView هو استخدامها كأداة لعرض البيانات مثل أداة DataGrid وأداة MSFlexGrid المعروفة.
لاستخدام أداة ال ListView كأداة لعرض البيانات يجب ضبط خاصية View على الخيار lvwReport ,طبعاً خاصية View تستخدم لتحديد أسلوب العرض في أداة ال ListView وهناك خيارات أخرى لأسلوب العرض وهذه الخيارات هي كما يلي
■ lvwIcon : وهي لعرض أيقونات كبيرة داخل أداة ال ListView كما في الصورة التالية :
■ lvwList : وهي البيانات كقائمة داخل أداة ال ListView كما في الصورة التالية:
■
lvwReport : وهي لعرض البيانات كتقرير داخل أداة ال ListView وهي تشبه
كثيراً الأدوات المعروفة لعرض البيانات من قاعدة البيانات مثل أداة
DataGrid وأداة MSFlexGrid … الخ. وهي أكثر الخيارات المستخدمة من قبل
المبرمجين كما في الصورة التالية
■ lvwSmallIcon : وهي لعرض أيقونات صغيرة داخل أداة ال ListView كما في الصورة التالية
تصميم مثال
● سأبدأ الآن بمثال بسيط لا يعتمد على قاعدة البيانات تابع معي
1)أضف أداة ListView إلى الForm
2)اذهب إلى حدث Load لل Form واكتب الكود التالي , وهذا الكود كما شرحنا سابقاً لتحديد أسلوب العرض في أداة ال ListView .
3)لنفترض أن نريد إضافة ثلاثة أعمدة داخل أداة ال ListView في هذه الحالة يجب إضافة عنوان رأسي لكل عمود وهذا يتم باستخدام خاصية ColumnHeaders لأداة ال ListView
◄ قبل إضافة العناوين الرأسية لأداة ال ListView سأشرح خاصية ColumnHeaders لهذه الخاصية خمس وظائف وهي كالتالي
♦ Add : وهي الوظيفة تستخدم لإضافة عنوان رأسي داخل أداة ال ListView ولهذه الخاصية ست باراميترات وهي كما يلي
حيث
▪ Index : هي الفهرس لهذا العنوان الرأسي
▪ Key : المفتاح لهذا العنوان الرأسي
▪ Text: النص الذي سيظهر عليه وهو الباراميتير الوحيد الذي سأستخدمه في إضافة العناوين الرأسية
▪ Width: لتحديد عرض العنوان الرأسي
▪ Alignment : لتحديد اتجاه محاذاة النص على العنوان الرأسي ولهذه الخاصية ثلاثة قيم
مع ملاحظة أن العمود الأول في أداة ال ListView تكون قيمة ال Alignment = 0 أي النص محاذاة النص دائماً له تكون على اليسار
▪ Icon: وهي خاصية لإضافة أيقونات للعناوين الرأسية.مع مراعاة ضبط خاصية ColumnHeaderIcons باسم أداة ال ImageList التي يتم إدراج الصور منها كما في الكود التالي
♦ Clear : وتستخدم هذه الوظيفة لمسح جميع العناوين الرأسية الموجودة داخل أداة ال ListView كما في الكود التالي
♦ Count : وتستخدم هذه الوظيفة لجلب عدد العناوين الرأسية الموجودة داخل أداة ال ListView كما في الكود التالي مثلاً
♦ Remove : وتستخدم هذه الوظيفة لحذف عنوان رأسي معين بناء على قيمة ال Index لهذا العنوان كما في الكود التالي
حيث قيمة ال Index لأول عنوان رأسي في هذه الحالة = 1 وباقي العناوين بنفس الطريقة مع زيادة ال Index بمقدار 1 للعنوان الرأسي الذي يليه
♦ Item : وظائف هذه الأداة هي نفسها باراميترات الوظيفة Add فقط هناك وظيفتين جديدتين وهما
▪ Position : وهي لتحديد رقم العنوان الرأسي
▪ SubItemIndex : وهي لتحديد رقم ال Index للعناصر الموجود أسفل هذا العنوان الرأسي
4) بعد أن شرحنا وظائف الخاصية ColumnHeaders كما قلنا سابقاً نقوم بتحديد أسلوب العرض في أداة ال ListView من خلال الخاصية View كما يلي
4) نقوم بإضافة ثلاث عنوانين رأسية ليصبح الكود كما يلي
5) قم بتشغيل المثال ستلاحظ تغير شكل ال ListView ليصبح كما في الصورة التالية
6)نأتي الآن لإضافة بيانات داخل أداة ال ListView , لإضافة عناصر داخل أداة ال ListView نستخدم خاصية ListItems ولهذه الخاصية خمس وظائف أيضاً وهي كالتالي
♦ Add : وهي الوظيفة تستخدم لإضافة بيانات داخل أداة ال ListView ولهذه الخاصية خمس باراميترات وهي كما يلي
حيث
▪ Index : هي الفهرس لهذا العنصر المضاف.
▪ Key : المفتاح لهذا العنوان العنصر .
▪ Text: النص الذي سيظهر لهذا العنصر .
▪ Icon : وهي خاصية لإضافة أيقونات للعناصر ,مع مراعاة ضبط خاصيةIcons باسم أداة ال ImageList التي يتم إدراج الصور منها كما في الكود التالي وهذه الخاصية تستخدم عندما يكون أسلوب العرض = lvwIcon .
▪ SmallIcon : وهي خاصية لإضافة أيقونات للعناصر ,مع مراعاة ضبط خاصيةIcons باسم أداة ال ImageList التي يتم إدراج الصور منها كما في الكود التالي وهذه هي الخاصية التي سنستخدمها في هذه الحالة.
♦ Clear : وتستخدم لحذف محتويات الListView
♦ Count : وتستخدم لمعرفة عدد الصفوف داخل أداة ال ListView
♦ Remove : وتستخدم لحذف صف معين في أداة ال ListView مع العلم أن قيمة ال Index لأول سطر = 1
♦ Item : ولها العديد من الخصائص وأهم هذه الخصائص هي
▪ Bold : وهي لجعل الخط غامق وهي خاصية منطقية ترجع قيمة إما True أو False
▪ Checked
: وهي خاصية لوضع علامة صح أمام العنصر داخل أداة ال ListView طبعاً في
هذه الحالة يجب ضبط خاصية Checkboxes = True لأداة ال ListView كما في
الكود التالي
▪ ForeColor : لتغيير لون الخط لعنصر معين داخل أداة ال ListView
▪ Selected : لتحديد صف معيّن وهي خاصية منطقية ترجع قيمة إما True أو False
●
طبعاً في وظيفة Add كلما أضفنا عنصر بالصيغة الموجودة في الأعلى يتم
إضافته في نفس العمود .. إذن كيف سنضيف بيانات في الأعمدة الأخرى ؟ تابع
معي ..
نقوم بتعريف متغير من نوع ListItem ونقوم بإسناده إلى الوظيفة Addثم نستخدم هذا المتغير في إضافة بيانات للأعمدة الأخرى كما يلي
● كما هو الحال بالنسبة للخاصية ListItems فإن الخاصية ListSubItems لها نفس الوظائف فالصيغة العامة لوظيفة Add هي كما يلي
كما تلاحظ في البارميترات فالوظيفة Add للخاصية ListSubItems هي تقريبا نفسها البارميترات للوظيفة Add للخاصية ListItems ف ReportIcon هي نفسها SmallIcon والباراميتر ToolTipText فهو للنافذة الصغير المنبثقة عند وضع مؤشر الفأرة على ذلك العنصر.
7)نأتي الآن لنضيف بيانات داخل أداة ال ListView كما في الكود التالي
ليصبح الشكل كما في الشكل التالي
تلاحظ في الصورة عند تحديد صف يتم تحديد العنصر الأول فقط في هذا الصف ولتحديد جميع العناصر داخل أداة ال ListView نقوم بجعل خاصية FullRowSelect = True .
هناك أيضاً خصائص أخرى لأداة ال ListView يمكنك استخدامها أيضاً كما يلي
● Appearance
: وهي لتحديد مظهر أداة ال ListView ولها قيمتين وهما ccFlat لجعل أداة
الListView مسطحة و cc3D وهي لجعل أداة الListView ثلاثية الأبعاد.
● BackColor : لتغيير لون خلفية أداة ال ListView .
● FlatScrollBar : لتحديد مظهر أشرطة التمرير لأداة ال ListView وهي خاصية ذات قيمة منطقية .
● ForeColor : لتحديد لون الخط .
● GridLines : وهي خاصية لجعل أداة ال ListView كالشبكة وهي خاصية ذات قيمة منطقية.
● HideColumnHeaders : وهي لإخفاء العناوين الرأسية وهي خاصية ذات قيمة منطقية.
● HotTracking : وهي خاصية لتتبع شريط التحديد وهي خاصية ذات قيمة منطقية.
● HoverSelection : وهذه الخاصية عند تفعيلها يتم وضع شريط التحديد على الصف الذي يمر عليه مؤشر الفأرة.
● MultiSelect : وهذه الخاصية تستخدم لتحديد أكثر من صف في نفس الوقت وهي خاصية منطقية.
● Picture : وهي لوضع خلفية لأداة ال ListView .
● PictureAlignment : وهي لتحديد محاذاة خلفية ال ListView .
● Sorted : يتم ضبط هذه الخاصية لتساوي True لترتيب العناصر.
● SortKey : تستخدم هذه الخاصية لتحديد رقم العمود الذي نريد ترتيب البيانات بواسطته حيث رقم أو عمود هو 0
● SortOrder : تستخدم هذه الخاصية لتحديد نمط ترتيب العناصر داخل ال ListView ولها قيمتين وهما lvwAscending لترتيب العناصر بشكل أبجدي تصاعدياً و lvwDescending لترتيب العناصر بشكل أبجدي تنازلياً .
البدء ننشئ قاعدة بيانات وننشئ داخلها جدول اسمه Table1 يحتوي أربع حقول
وهي ID , Name , Number , Address ثم ضعها في مجلد المشروع .
سنستخدم
مكتبة Ado في ربط قاعدة البيانات اذهب إلى قائمة Project اختر Reference
ثم اختر مكتبة Microsoft ActiveX Object كما في الصورة التالية
سنعرف في الGeneral المتغيرين التاليين
حيث
سنستخدم المتغير DB في الاتصال بقاعدة البيانات والمتغير RS في التعامل مع
الجداول والحقول . في حدث ال Form_Load استخدم الكود التالي في قاعدة
البيانات
ثم سنقوم بتحديد أسلوب العرض للبيانات وجعل شريط التحديد يحدد جميع العناصر في الصف كما في الكود التالي
ثم سنضيف ثلاثة عناوين رأسية كما يلي
نعرف متغيّر من نوع ListItem كما يلي
إغلاق المتغير RS إذا كان مفتوحاً
نستخدم هنا حلقة Do While .. Loop لملئ أداة ال ListView حتى نصل للسجل الأخير في قاعدة البيانات
نسند
المتغير Lst للوظيفة Add التي تضيف حقل Name في السجل لأداة الListView ,
ثم نستخدم المتغير Lst في إضافة العمود الثاني (Number) والعمود الثالث
(Address)
ننتقل إلى السجل التالي , ثم نستخدم Loop لإغلاق الحلقة.
ويمكن الاستغناء عن الوظيفة Add للمتغير Lst واستخدام الوظيفة SubItems ليصبح الكود كما يلي
ملاحظات قد تهمك في حالة استخدام أداة ال ListView كأداة لعرض البيانات
● حذف العنصر المحدد يتم باستخدام الكود التالي
● حذف جميع العناصر المحددة في أداة الListView عند تفعيل خاصية MultiSelect باستخدام الكود التالي
حيث في هذا الكود نستخدم حلقة For .. Next
لكن كما تلاحظ فإننا نستخدم هنا الحلقة بالعكس وذلك حتى يتم حذف العناصر
الصحيحة في أداة الListView لأننا لو قمنا بحذف عنصر من بداية العناصر فإن
جميع مواقع العناصر الأخر ستتغير .
● عرض بيانات الصف المحدد في أداة ال ListView كما في الكود التالي
حيث استخدمنا هذا الكود في حدث ListView1_Click فيتم عرض العنصر الأول في أداة Text1 طبعاً لأول عنصر في الصف نستخدم خاصية Text وباقي العناصر في الصف نستخدم الخاصية SubItems .
● عمل AutoSize للأعمدة الموجود في أداة ال ListView : سنستخدم هنا دالة SendMessage وهي إحدى دوال ال Api سنكون هنا دالة بسيطة لاستخدامها في حالة كان لدينا أكثر من ListView كما يلي
هذه هي دالة SendMessage وبعض ثوابتها
وهذه هي الدالة التي قمنا بتصميمها
كما يلي
AutoSizeListView ListView1
ثانياً : استخدام أداة ال ListView عندما تكون خاصية View = lvwIcon
طبعاً عندما يكون أسلوب العرض lvwIcon فلن يختلف عن أسلوب العرض lvwReport من حيث إضافة العناصر لكن هنا لا يوجد أعمدة ولا ColumnHeaders (عنوانين رأسية) وهناك خصائص أخرى لا نستخدمها في هذه الحالة وسيكون شكل ال ListView كما في الشكل التالي
لكن
في هذه الحالة سنستخدم الباراميتر Key للوظيفة Add لنتمكن من التعامل
بسهولة مع كل عنصر. سنضيف 5 عناصر كما في الصورة السابقة , سنبدأ الآن في
برمجة المثال سنحتاج في هذا المثال أداة ImageList تحتوي على بعض الصور كما
في الصورة التالية
في حدث Form_Load الكود التالي
ListView1.View = lvwIcon
لتحديد أسلوب عرض الأداة وهو lvwIcon
ListView1.Icons = ImageList1
لتحديد مصدر الإيقونات التي سيتم استخدامها في الListView
ثم الكود التالي
قمنا بتعرف المتغير i لاستخدامه في حلقة For .. Next
ثم قمنا بتحديد عدد دورات الحلقة For .. Next وهي من 1 إلى 5
ثم
سيتم إضافة عنصر في دورة كما هو ملاحظ من الكود حيث سيكون ال Key للعنصر
الأول هو M1 العنصر الثاني هو M2 … وهكذا . مع ملاحظ أن ال Key لا يجب أن
يتكرر عند إضافة العناصر , وبالنسبة لباراميتر الأيقونة يتم تحديده بكتابة
رقم ال Index للصورة المراد إضافتها للعنصر المضاف مع ملاحظ أن
الباراميترالذي يتم إضافة رقم ال Index هو الباراميتر Icon وليس الباراميتر
SmallIcon .
ثم قمنا بإغلاق حلقة Next .
إذن الكود النهائي سيكون كما يلي
الآن
انتهينا من تصميم المثال .. طيب السؤال الآن كيف سنقوم بربط كل أيقونة
بكود معيّن عن النقر DblClick مثلاً ؟ .. الجواب طبعاً باستخدام ال Key لكل
عنصر .. تابع معي ..
سنقوم باستخدام جملة Select Case في حدث ListView1_DblClick كما في الكود التالي
حيث في هذا الكود نستخدم جملة بناء على قيمة الKey للعنصر المحدد لذلك استخدمنا الخاصية SelectedItem
ثم قلنا أنه في حالة كان ال Key للعنصر قيمته هي M1 فسيتم إظهار الForm2 وبنفس الطريقة لجميع العناصر.
حمل المثال التوضيحي من هنا
ثالثاً : استخدام أداة ال ListView عندما تكون خاصية View = lvwSmallIcon و lvwList
في هاتين الحالتين لن تختلفا عن الحالة lvwIcon إلا في نمط عرض الأيقونات حيث في حالة lvwSmallIcon ستظهر الإيقونات كما في الصورة التالية
وفي حالة lvwList ستظهر الإيقونات كما في الصورة التالية
السلام عليكم ورحمة الله وبركاته
شرح تفصيلي لأداة ال ListView وكيفية استخدامها
بعد
مشاهدتي للعديد من الأسئلة والاستفسارات حول أداة ال ListView قررت كتابة
مقال بشكل تفصيلي عن أداة ال ListView وسيتم خلال هذا المثال طرح أمثلة
لتقريب الأفكار إلى ذهن القارئ , وأنوه في بداية الشرح أنني سأستخدم الكود
فقط في التعامل مع أداة ال ListView ولن استخدم الخصائص مطلقاً .. لنبدأ
على بركة الله :-
في البدء سنتعلم كيف تتم إضافة الأداة , من قائمة
Project اختر Components ثم اختر Microsoft Windows Common Controls 6.0
كما في الصور التالية :
صورة الأداة بعد إضافتها على ال Form
استخدامات أداة ال ListView
أولاً : استخدام أداة ال ListView كأداة لعرض البياناتمن استخدامات أداة ال ListView هو استخدامها كأداة لعرض البيانات مثل أداة DataGrid وأداة MSFlexGrid المعروفة.
لاستخدام أداة ال ListView كأداة لعرض البيانات يجب ضبط خاصية View على الخيار lvwReport ,طبعاً خاصية View تستخدم لتحديد أسلوب العرض في أداة ال ListView وهناك خيارات أخرى لأسلوب العرض وهذه الخيارات هي كما يلي
■ lvwIcon : وهي لعرض أيقونات كبيرة داخل أداة ال ListView كما في الصورة التالية :
■ lvwList : وهي البيانات كقائمة داخل أداة ال ListView كما في الصورة التالية:
■
lvwReport : وهي لعرض البيانات كتقرير داخل أداة ال ListView وهي تشبه
كثيراً الأدوات المعروفة لعرض البيانات من قاعدة البيانات مثل أداة
DataGrid وأداة MSFlexGrid … الخ. وهي أكثر الخيارات المستخدمة من قبل
المبرمجين كما في الصورة التالية
■ lvwSmallIcon : وهي لعرض أيقونات صغيرة داخل أداة ال ListView كما في الصورة التالية
تصميم مثال
● سأبدأ الآن بمثال بسيط لا يعتمد على قاعدة البيانات تابع معي
1)أضف أداة ListView إلى الForm
2)اذهب إلى حدث Load لل Form واكتب الكود التالي , وهذا الكود كما شرحنا سابقاً لتحديد أسلوب العرض في أداة ال ListView .
- الكود:
Private Sub Form_Load()
ListView1.View = lvwReport
End Sub
3)لنفترض أن نريد إضافة ثلاثة أعمدة داخل أداة ال ListView في هذه الحالة يجب إضافة عنوان رأسي لكل عمود وهذا يتم باستخدام خاصية ColumnHeaders لأداة ال ListView
◄ قبل إضافة العناوين الرأسية لأداة ال ListView سأشرح خاصية ColumnHeaders لهذه الخاصية خمس وظائف وهي كالتالي
♦ Add : وهي الوظيفة تستخدم لإضافة عنوان رأسي داخل أداة ال ListView ولهذه الخاصية ست باراميترات وهي كما يلي
- الكود:
ListView1.ColumnHeaders.Add Index, Key, Text, Width, Alignment, Icon
حيث
▪ Index : هي الفهرس لهذا العنوان الرأسي
▪ Key : المفتاح لهذا العنوان الرأسي
▪ Text: النص الذي سيظهر عليه وهو الباراميتير الوحيد الذي سأستخدمه في إضافة العناوين الرأسية
▪ Width: لتحديد عرض العنوان الرأسي
▪ Alignment : لتحديد اتجاه محاذاة النص على العنوان الرأسي ولهذه الخاصية ثلاثة قيم
lvwColumnLeft = 0
lvwColumnRight = 1
lvwColumnCenter = 2
lvwColumnRight = 1
lvwColumnCenter = 2
مع ملاحظة أن العمود الأول في أداة ال ListView تكون قيمة ال Alignment = 0 أي النص محاذاة النص دائماً له تكون على اليسار
▪ Icon: وهي خاصية لإضافة أيقونات للعناوين الرأسية.مع مراعاة ضبط خاصية ColumnHeaderIcons باسم أداة ال ImageList التي يتم إدراج الصور منها كما في الكود التالي
- الكود:
ListView1.ColumnHeaderIcons = ImageList1
♦ Clear : وتستخدم هذه الوظيفة لمسح جميع العناوين الرأسية الموجودة داخل أداة ال ListView كما في الكود التالي
- الكود:
ListView1.ColumnHeaders.Clear
♦ Count : وتستخدم هذه الوظيفة لجلب عدد العناوين الرأسية الموجودة داخل أداة ال ListView كما في الكود التالي مثلاً
- الكود:
MsgBox ListView1.ColumnHeaders.Count
♦ Remove : وتستخدم هذه الوظيفة لحذف عنوان رأسي معين بناء على قيمة ال Index لهذا العنوان كما في الكود التالي
- الكود:
ListView1.ColumnHeaders.Remove Index
حيث قيمة ال Index لأول عنوان رأسي في هذه الحالة = 1 وباقي العناوين بنفس الطريقة مع زيادة ال Index بمقدار 1 للعنوان الرأسي الذي يليه
♦ Item : وظائف هذه الأداة هي نفسها باراميترات الوظيفة Add فقط هناك وظيفتين جديدتين وهما
▪ Position : وهي لتحديد رقم العنوان الرأسي
▪ SubItemIndex : وهي لتحديد رقم ال Index للعناصر الموجود أسفل هذا العنوان الرأسي
4) بعد أن شرحنا وظائف الخاصية ColumnHeaders كما قلنا سابقاً نقوم بتحديد أسلوب العرض في أداة ال ListView من خلال الخاصية View كما يلي
- الكود:
Private Sub Form_Load()
ListView1.View = lvwReport
End Sub
4) نقوم بإضافة ثلاث عنوانين رأسية ليصبح الكود كما يلي
- الكود:
Private Sub Form_Load()
ListView1.View = lvwReport
ListView1.ColumnHeaders.Add , , "Name"
ListView1.ColumnHeaders.Add , , "Number"
ListView1.ColumnHeaders.Add , , "Address"
End Sub
5) قم بتشغيل المثال ستلاحظ تغير شكل ال ListView ليصبح كما في الصورة التالية
6)نأتي الآن لإضافة بيانات داخل أداة ال ListView , لإضافة عناصر داخل أداة ال ListView نستخدم خاصية ListItems ولهذه الخاصية خمس وظائف أيضاً وهي كالتالي
♦ Add : وهي الوظيفة تستخدم لإضافة بيانات داخل أداة ال ListView ولهذه الخاصية خمس باراميترات وهي كما يلي
- الكود:
ListView1.ListItems.Add Index, Key, Text, Icon, SmallIcon
حيث
▪ Index : هي الفهرس لهذا العنصر المضاف.
▪ Key : المفتاح لهذا العنوان العنصر .
▪ Text: النص الذي سيظهر لهذا العنصر .
▪ Icon : وهي خاصية لإضافة أيقونات للعناصر ,مع مراعاة ضبط خاصيةIcons باسم أداة ال ImageList التي يتم إدراج الصور منها كما في الكود التالي وهذه الخاصية تستخدم عندما يكون أسلوب العرض = lvwIcon .
- الكود:
ListView1. Icons= ImageList1
▪ SmallIcon : وهي خاصية لإضافة أيقونات للعناصر ,مع مراعاة ضبط خاصيةIcons باسم أداة ال ImageList التي يتم إدراج الصور منها كما في الكود التالي وهذه هي الخاصية التي سنستخدمها في هذه الحالة.
♦ Clear : وتستخدم لحذف محتويات الListView
♦ Count : وتستخدم لمعرفة عدد الصفوف داخل أداة ال ListView
♦ Remove : وتستخدم لحذف صف معين في أداة ال ListView مع العلم أن قيمة ال Index لأول سطر = 1
♦ Item : ولها العديد من الخصائص وأهم هذه الخصائص هي
▪ Bold : وهي لجعل الخط غامق وهي خاصية منطقية ترجع قيمة إما True أو False
▪ Checked
: وهي خاصية لوضع علامة صح أمام العنصر داخل أداة ال ListView طبعاً في
هذه الحالة يجب ضبط خاصية Checkboxes = True لأداة ال ListView كما في
الكود التالي
- الكود:
ListView1.Checkboxes = True
▪ ForeColor : لتغيير لون الخط لعنصر معين داخل أداة ال ListView
▪ Selected : لتحديد صف معيّن وهي خاصية منطقية ترجع قيمة إما True أو False
●
طبعاً في وظيفة Add كلما أضفنا عنصر بالصيغة الموجودة في الأعلى يتم
إضافته في نفس العمود .. إذن كيف سنضيف بيانات في الأعمدة الأخرى ؟ تابع
معي ..
نقوم بتعريف متغير من نوع ListItem ونقوم بإسناده إلى الوظيفة Addثم نستخدم هذا المتغير في إضافة بيانات للأعمدة الأخرى كما يلي
- الكود:
Dim Lst As ListItem
Set Lst = ListView1.ListItems.Add(, , "Sniper.ps")
Lst.ListSubItems.Add , , "123"
Lst.ListSubItems.Add , , "Palestine"
● كما هو الحال بالنسبة للخاصية ListItems فإن الخاصية ListSubItems لها نفس الوظائف فالصيغة العامة لوظيفة Add هي كما يلي
- الكود:
Lst.ListSubItems.Add Index, Key, Text, ReportIcon, ToolTipText
كما تلاحظ في البارميترات فالوظيفة Add للخاصية ListSubItems هي تقريبا نفسها البارميترات للوظيفة Add للخاصية ListItems ف ReportIcon هي نفسها SmallIcon والباراميتر ToolTipText فهو للنافذة الصغير المنبثقة عند وضع مؤشر الفأرة على ذلك العنصر.
7)نأتي الآن لنضيف بيانات داخل أداة ال ListView كما في الكود التالي
- الكود:
Private Sub Form_Load()
ListView1.View = lvwReportListView1.ColumnHeaders.Add , , ”Name”
ListView1.ColumnHeaders.Add , , ”Number”
ListView1.ColumnHeaders.Add , , ”Address”Dim Lst As ListItemDim i As IntegerFor i = 0 To 4
Set Lst = ListView1.ListItems.Add(, , ”Sniper.ps”)
Lst.ListSubItems.Add , , i
Lst.ListSubItems.Add , , ”Palestine”
Next i
End Sub
ليصبح الشكل كما في الشكل التالي
تلاحظ في الصورة عند تحديد صف يتم تحديد العنصر الأول فقط في هذا الصف ولتحديد جميع العناصر داخل أداة ال ListView نقوم بجعل خاصية FullRowSelect = True .
هناك أيضاً خصائص أخرى لأداة ال ListView يمكنك استخدامها أيضاً كما يلي
● Appearance
: وهي لتحديد مظهر أداة ال ListView ولها قيمتين وهما ccFlat لجعل أداة
الListView مسطحة و cc3D وهي لجعل أداة الListView ثلاثية الأبعاد.
● BackColor : لتغيير لون خلفية أداة ال ListView .
● FlatScrollBar : لتحديد مظهر أشرطة التمرير لأداة ال ListView وهي خاصية ذات قيمة منطقية .
● ForeColor : لتحديد لون الخط .
● GridLines : وهي خاصية لجعل أداة ال ListView كالشبكة وهي خاصية ذات قيمة منطقية.
● HideColumnHeaders : وهي لإخفاء العناوين الرأسية وهي خاصية ذات قيمة منطقية.
● HotTracking : وهي خاصية لتتبع شريط التحديد وهي خاصية ذات قيمة منطقية.
● HoverSelection : وهذه الخاصية عند تفعيلها يتم وضع شريط التحديد على الصف الذي يمر عليه مؤشر الفأرة.
● MultiSelect : وهذه الخاصية تستخدم لتحديد أكثر من صف في نفس الوقت وهي خاصية منطقية.
● Picture : وهي لوضع خلفية لأداة ال ListView .
● PictureAlignment : وهي لتحديد محاذاة خلفية ال ListView .
● Sorted : يتم ضبط هذه الخاصية لتساوي True لترتيب العناصر.
● SortKey : تستخدم هذه الخاصية لتحديد رقم العمود الذي نريد ترتيب البيانات بواسطته حيث رقم أو عمود هو 0
● SortOrder : تستخدم هذه الخاصية لتحديد نمط ترتيب العناصر داخل ال ListView ولها قيمتين وهما lvwAscending لترتيب العناصر بشكل أبجدي تصاعدياً و lvwDescending لترتيب العناصر بشكل أبجدي تنازلياً .
برمجة مثال لربط ال ListView بقاعدة البيانات
فيالبدء ننشئ قاعدة بيانات وننشئ داخلها جدول اسمه Table1 يحتوي أربع حقول
وهي ID , Name , Number , Address ثم ضعها في مجلد المشروع .
سنستخدم
مكتبة Ado في ربط قاعدة البيانات اذهب إلى قائمة Project اختر Reference
ثم اختر مكتبة Microsoft ActiveX Object كما في الصورة التالية
سنعرف في الGeneral المتغيرين التاليين
- الكود:
Dim DB As ADODB.Connection
Dim RS As ADODB.Recordset
حيث
سنستخدم المتغير DB في الاتصال بقاعدة البيانات والمتغير RS في التعامل مع
الجداول والحقول . في حدث ال Form_Load استخدم الكود التالي في قاعدة
البيانات
- الكود:
Set DB = New ADODB.Connection
Set RS = New ADODB.Recordset
DB.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & App.Path + "\Sniper.mdb"
DB.CursorLocation = adUseClient
ثم سنقوم بتحديد أسلوب العرض للبيانات وجعل شريط التحديد يحدد جميع العناصر في الصف كما في الكود التالي
- الكود:
ListView1.View = lvwReport
ListView1.FullRowSelect = True
ثم سنضيف ثلاثة عناوين رأسية كما يلي
- الكود:
ListView1.ColumnHeaders.Add , , "Name"
ListView1.ColumnHeaders.Add , , "Number"
ListView1.ColumnHeaders.Add , , "Address"
نعرف متغيّر من نوع ListItem كما يلي
- الكود:
Dim Lst As ListItem
If RS.State = adStateOpen Then RS.Close
إغلاق المتغير RS إذا كان مفتوحاً
- الكود:
RS.Open "Select * From Table1", DB, adOpenDynamic, adLockOptimistic
- الكود:
Do While Not RS.EOF
Set Lst = ListView1.ListItems.Add(, , RS!Name)
Lst.ListSubItems.Add , , RS!Number
Lst.ListSubItems.Add , , RS!Address
RS.MoveNext
Loop
نستخدم هنا حلقة Do While .. Loop لملئ أداة ال ListView حتى نصل للسجل الأخير في قاعدة البيانات
نسند
المتغير Lst للوظيفة Add التي تضيف حقل Name في السجل لأداة الListView ,
ثم نستخدم المتغير Lst في إضافة العمود الثاني (Number) والعمود الثالث
(Address)
ننتقل إلى السجل التالي , ثم نستخدم Loop لإغلاق الحلقة.
ويمكن الاستغناء عن الوظيفة Add للمتغير Lst واستخدام الوظيفة SubItems ليصبح الكود كما يلي
- الكود:
Do While Not RS.EOF
Set Lst = ListView1.ListItems.Add(, , RS!Name)
Lst.SubItems(1) = RS!Number
Lst.SubItems(2) = RS!Address
RS.MoveNext
Loop
ملاحظات قد تهمك في حالة استخدام أداة ال ListView كأداة لعرض البيانات
● حذف العنصر المحدد يتم باستخدام الكود التالي
- الكود:
ListView1.ListItems.Remove ListView1.SelectedItem.Index
● حذف جميع العناصر المحددة في أداة الListView عند تفعيل خاصية MultiSelect باستخدام الكود التالي
- الكود:
Dim i As Integer
For i = ListView1.ListItems.Count To 1 Step -1
If ListView1.ListItems(i).Selected = True Then ListView1.ListItems.Remove i
Next i
حيث في هذا الكود نستخدم حلقة For .. Next
لكن كما تلاحظ فإننا نستخدم هنا الحلقة بالعكس وذلك حتى يتم حذف العناصر
الصحيحة في أداة الListView لأننا لو قمنا بحذف عنصر من بداية العناصر فإن
جميع مواقع العناصر الأخر ستتغير .
● عرض بيانات الصف المحدد في أداة ال ListView كما في الكود التالي
- الكود:
Private Sub ListView1_Click()
Text1.Text = ListView1.SelectedItem.Text
Text2.Text = ListView1.SelectedItem.SubItems(1)
Text3.Text = ListView1.SelectedItem.SubItems(2)
End Sub
حيث استخدمنا هذا الكود في حدث ListView1_Click فيتم عرض العنصر الأول في أداة Text1 طبعاً لأول عنصر في الصف نستخدم خاصية Text وباقي العناصر في الصف نستخدم الخاصية SubItems .
● عمل AutoSize للأعمدة الموجود في أداة ال ListView : سنستخدم هنا دالة SendMessage وهي إحدى دوال ال Api سنكون هنا دالة بسيطة لاستخدامها في حالة كان لدينا أكثر من ListView كما يلي
هذه هي دالة SendMessage وبعض ثوابتها
- الكود:
Private Declare Function SendMessage _
Lib "user32" Alias "SendMessageA" _
(ByVal hWnd As Long, ByVal wMsg As Long, _
ByVal wParam As Long, ByVal lParam As Long) As Long
Private Const LVM_FIRST = &H1000
Private Const LVM_SETCOLUMNWIDTH = (LVM_FIRST + 30)
Private Const LVSCW_AUTOSIZE = -1
Private Const LVSCW_AUTOSIZE_USEHEADER = -2
وهذه هي الدالة التي قمنا بتصميمها
- الكود:
Public Function AutoSizeListView(xListView As ListView)
Dim i As Integer
For i = 0 To xListView.ColumnHeaders.Count - 1
SendMessage xListView.hWnd, LVM_SETCOLUMNWIDTH, i, LVSCW_AUTOSIZE_USEHEADER
Next i
End Function
كما يلي
AutoSizeListView ListView1
ثانياً : استخدام أداة ال ListView عندما تكون خاصية View = lvwIcon
طبعاً عندما يكون أسلوب العرض lvwIcon فلن يختلف عن أسلوب العرض lvwReport من حيث إضافة العناصر لكن هنا لا يوجد أعمدة ولا ColumnHeaders (عنوانين رأسية) وهناك خصائص أخرى لا نستخدمها في هذه الحالة وسيكون شكل ال ListView كما في الشكل التالي
لكن
في هذه الحالة سنستخدم الباراميتر Key للوظيفة Add لنتمكن من التعامل
بسهولة مع كل عنصر. سنضيف 5 عناصر كما في الصورة السابقة , سنبدأ الآن في
برمجة المثال سنحتاج في هذا المثال أداة ImageList تحتوي على بعض الصور كما
في الصورة التالية
في حدث Form_Load الكود التالي
ListView1.View = lvwIcon
لتحديد أسلوب عرض الأداة وهو lvwIcon
ListView1.Icons = ImageList1
لتحديد مصدر الإيقونات التي سيتم استخدامها في الListView
ثم الكود التالي
- الكود:
Dim i As Integer
For i = 1 To 5
ListView1.ListItems.Add , "M" & i, "Sniper" & i, i
Next i
قمنا بتعرف المتغير i لاستخدامه في حلقة For .. Next
ثم قمنا بتحديد عدد دورات الحلقة For .. Next وهي من 1 إلى 5
ثم
سيتم إضافة عنصر في دورة كما هو ملاحظ من الكود حيث سيكون ال Key للعنصر
الأول هو M1 العنصر الثاني هو M2 … وهكذا . مع ملاحظ أن ال Key لا يجب أن
يتكرر عند إضافة العناصر , وبالنسبة لباراميتر الأيقونة يتم تحديده بكتابة
رقم ال Index للصورة المراد إضافتها للعنصر المضاف مع ملاحظ أن
الباراميترالذي يتم إضافة رقم ال Index هو الباراميتر Icon وليس الباراميتر
SmallIcon .
ثم قمنا بإغلاق حلقة Next .
إذن الكود النهائي سيكون كما يلي
- الكود:
Private Sub Form_Load()
ListView1.View = lvwIcon
ListView1.Icons = ImageList1
Dim i As Integer
For i = 1 To 5
ListView1.ListItems.Add , "M" & i, "Sniper" & i, i
Next i
End Sub
الآن
انتهينا من تصميم المثال .. طيب السؤال الآن كيف سنقوم بربط كل أيقونة
بكود معيّن عن النقر DblClick مثلاً ؟ .. الجواب طبعاً باستخدام ال Key لكل
عنصر .. تابع معي ..
سنقوم باستخدام جملة Select Case في حدث ListView1_DblClick كما في الكود التالي
- الكود:
Private Sub ListView1_DblClick()
Select Case ListView1.SelectedItem.Key
Case "M1"
Form2.Show
Case "M2"
Form3.Show
Case "M3"
MsgBox "Programmed By Sniper.ps"
Case "M4"
MsgBox "www.vb4arab.com"
Case "M5"
End
End Select
End Sub
حيث في هذا الكود نستخدم جملة بناء على قيمة الKey للعنصر المحدد لذلك استخدمنا الخاصية SelectedItem
ثم قلنا أنه في حالة كان ال Key للعنصر قيمته هي M1 فسيتم إظهار الForm2 وبنفس الطريقة لجميع العناصر.
حمل المثال التوضيحي من هنا
ثالثاً : استخدام أداة ال ListView عندما تكون خاصية View = lvwSmallIcon و lvwList
في هاتين الحالتين لن تختلفا عن الحالة lvwIcon إلا في نمط عرض الأيقونات حيث في حالة lvwSmallIcon ستظهر الإيقونات كما في الصورة التالية
وفي حالة lvwList ستظهر الإيقونات كما في الصورة التالية
بنت البلد- .....
- تاريخ التسجيل : 18/02/2011
المساهمات : 85
النقاط : 160
التقيم : 11
الجنس :
بنت البلد- .....
- تاريخ التسجيل : 18/02/2011
المساهمات : 85
النقاط : 160
التقيم : 11
الجنس :
رد: شرح تفصيلي لأداة ال ListView وكيفية استخدامها
أحسنتى جزاكم الله خيرا
ذوكا- .....
- تاريخ التسجيل : 26/05/2013
المساهمات : 92
النقاط : 156
التقيم : 12
الدولة :
الجنس :
| |
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
أمس في 9:18 pm من طرف wdqwd
» رش الدفان بالرياض
أمس في 7:11 pm من طرف moslema_r
» شركة تنظيف خزانات الشارقة
أمس في 6:57 pm من طرف moslema_r
» شركة مكافحة الفئران بالرياض
الإثنين أبريل 15, 2024 8:23 pm من طرف moslema_r
» افضل شركة كشف تسربات المياه بالباحة
الخميس أبريل 04, 2024 7:02 am من طرف gmalnagy
» ساعدوني وفهموني help me
الجمعة مارس 29, 2024 8:37 am من طرف linesoft
» كشف تسربات المياه في جدة
السبت مارس 23, 2024 7:23 pm من طرف gmalnagy
» خدمات كشف تسربات المياه بخصم 25% - اتصل الان
السبت مارس 23, 2024 7:22 pm من طرف gmalnagy
» كهربائي منازل بالرياض
الأحد مارس 17, 2024 1:52 pm من طرف رانيا حماد
» افضل شركة نقل عفش بالرياض نقل باكستاني 40% خصم | موقع الانوار
الأحد مارس 17, 2024 1:25 pm من طرف رانيا حماد