اذهب الي المحتوي
أوفيسنا

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


الردود الموصى بها

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

في البدء سنتعلم كيف تتم إضافة الأداة , من قائمة
Additional Controls
كما في الصور التالية :

1.jpg.c57e61b927f32e76d46e577b47433753.jpg

صورة الأداة بعد إضافتها على ال Form

2.jpg.929698ce42ef009fa44c1687493e1701.jpg

 

3.jpg.576fc12a4bdc533e29e2697ed1c1912e.jpg

خصائص الأداة وسوف نتعرف علي استخدمها تباعا بالتفصيل

4.jpg.cb9c95fdf20b3194581d75f453faf904.jpg

استخدامات أداة ال ListView

أولاً : استخدام أداة ال ListView كأداة لعرض البيانات
من استخدامات أداة ال ListView هو استخدامها كأداة لعرض البيانات مثل أداة DataGrid وأداة MSFlexGrid المعروفة. لاستخدام أداة ال ListView كأداة لعرض البيانات يجب ضبط خاصية View على الخيار lvwReport ,طبعاً خاصية View تستخدم لتحديد أسلوب العرض في أداة ال ListView وهناك خيارات أخرى لأسلوب العرض وهذه الخيارات هي كما يلي
■ lvwIcon : وهي لعرض أيقونات كبيرة داخل أداة ال ListView .
■ lvwList : وهي البيانات كقائمة داخل أداة ال ListView .
lvwReport : وهي لعرض البيانات كتقرير داخل أداة ال ListView وهي تشبه كثيراً الأدوات المعروفة لعرض البيانات من قاعدة البيانات مثل أداة DataGrid وأداة MSFlexGrid … الخ. وهي أكثر الخيارات المستخدمة من قبل المبرمجين .

lvwSmallIcon : وهي لعرض أيقونات صغيرة داخل أداة ال ListView

أبدأ الآن بمثال بسيط لا يعتمد على قاعدة البيانات تابع معي
1)أضف أداة ListView إلى الForm
2)اذهب إلى حدث UserForm_Activateواكتب الكود التالي , وهذا الكود كما شرحنا سابقاً لتحديد أسلوب العرض في أداة ال ListView .

Private Sub UserForm_Activate()
  Me.ListView1.View = lvwReport
End Sub

5.jpg.6c885a9ea586834557d9bcc7df5d2f75.jpg

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

مع ملاحظة أن العمود الأول في أداة ال ListView تكون قيمة ال Alignment = 0 أي النص محاذاة النص دائماً له تكون على اليسار
▪ Icon: وهي خاصية لإضافة أيقونات للعناوين الرأسية.مع مراعاة ضبط خاصية ColumnHeaderIcons باسم أداة ال ImageList التي يتم إدراج الصور منها كما في الكود التالي

 ListView1.ColumnHeaderIcons = ImageList1

 Clear : وتستخدم هذه الوظيفة لمسح جميع العناوين الرأسية الموجودة داخل أداة ال ListView كما في الكود التالي

ListView1.ColumnHeaders.Clear

♦ Count : وتستخدم هذه الوظيفة لجلب عدد العناوين الرأسية الموجودة داخل أداة ال ListView كما في الكود التالي مثلاً

MsgBox ListView1.ColumnHeaders.Count

 

6.jpg.706a8465267c064e14ca61463c964ef1.jpg


♦ Remove : وتستخدم هذه الوظيفة لحذف عنوان رأسي معين بناء على قيمة ال Index لهذا العنوان كما في الكود التالي

ListView1.ColumnHeaders.Remove Index

حيث قيمة ال Index لأول عنوان رأسي في هذه الحالة = 1 وباقي العناوين بنفس الطريقة مع زيادة ال Index بمقدار 1 للعنوان الرأسي الذي يليه

♦ Item : وظائف هذه الأداة هي نفسها باراميترات الوظيفة Add فقط هناك وظيفتين جديدتين وهما
▪ Position : وهي لتحديد رقم العنوان الرأسي
▪ SubItemIndex : وهي لتحديد رقم ال Index للعناصر الموجود أسفل هذا العنوان الرأسي

4) بعد أن شرحنا وظائف الخاصية ColumnHeaders كما قلنا سابقاً نقوم بتحديد أسلوب العرض في أداة ال ListView من خلال الخاصية View كما يلي

Private Sub UserForm_Activate()
  Me.ListView1.View = lvwReport
  
End Sub

 

4) نقوم بإضافة ثلاث عنوانين رأسية ليصبح الكود كما يلي

Private Sub UserForm_Activate()
   ListView1.View = lvwReport
    ListView1.ColumnHeaders.Add , , "Name"
    ListView1.ColumnHeaders.Add , , "Number"
    ListView1.ColumnHeaders.Add , , "Address"
  
End Sub

5) قم بتشغيل المثال ستلاحظ تغير شكل ال ListView ليصبح كما في الصورة التالية

7.jpg.e16d0fe8fa3dd57f019e8bc1e61842d7.jpg


6)نأتي الآن لإضافة بيانات داخل أداة ال ListView , لإضافة عناصر داخل أداة ال ListView نستخدم خاصية ListItems ولهذه الخاصية خمس وظائف أيضاً وهي كالتالي

♦ Add : وهي الوظيفة تستخدم لإضافة بيانات داخل أداة ال ListView ولهذه الخاصية خمس باراميترات وهي كما يلي

ListView1.ListItems.Add Index, Key, Text, Icon, SmallIcon

 

▪ 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ثم نستخدم هذا المتغير في إضافة بيانات للأعمدة الأخرى كما يلي

Private Sub UserForm_Activate()
     Dim Lst As ListItem
       Set Lst = ListView1.ListItems.Add(, , "Dahy Algharieb")
       Lst.ListSubItems.Add , , "Officana"
       Lst.ListSubItems.Add , , "Excel"
       
End Sub

كما هو الحال بالنسبة للخاصية ListItems فإن الخاصية ListSubItems لها نفس الوظائف فالصيغة العامة لوظيفة Add هي كما يلي

Lst.ListSubItems.Add Index, Key, Text, ReportIcon, ToolTipText

كما تلاحظ في البارميترات فالوظيفة Add للخاصية ListSubItems هي تقريبا نفسها البارميترات للوظيفة Add للخاصية ListItems ف ReportIcon هي نفسها SmallIcon والباراميتر ToolTipText فهو للنافذة الصغير المنبثقة عند وضع مؤشر الفأرة على ذلك العنصر.

7)نأتي الآن لنضيف بيانات داخل أداة ال ListView 


هناك أيضاً خصائص أخرى لأداة ال 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

8.jpg.ee7c1a9931d844b8d0ef4511e3fdc2aa.jpg

9.jpg.9ba96bfcecd0ff3062fb45b5b4191648.jpg

10.jpg.793904d30527401f90e21ee820ec1098.jpg

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

المثال مع الشرح بالمرفقات

ListView.xlsm

رابط الدرس الثاني  ListView Right to Left الدرس الثاني

 

  • Like 4
  • Thanks 1
رابط هذا التعليق
شارك

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

عمل اكثر من رائع 🌹 وبارك الله فيك وجزاك الله خيرا 🌹

لم اكن اعلم بان مثل هذه الأداة موجود من ذي قبل .

 

رابط هذا التعليق
شارك

3 ساعات مضت, ابراهيم الحداد said:

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

بارك الله فيك دائم الابداع

 

3 ساعات مضت, حسونة حسين said:

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

بارك الله فيك وجعله الله في ميزان حسناتك

 

2 ساعات مضت, كريم نظيم said:

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

عمل اكثر من رائع 🌹 وبارك الله فيك وجزاك الله خيرا 🌹

لم اكن اعلم بان مثل هذه الأداة موجود من ذي قبل .

 

 

منذ ساعه, spyhearts said:

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

ما شاء الله 

جزاك الله كل خير 

بارك الله فيكم جمعيا ونفعنا بما علما 

رابط هذا التعليق
شارك

  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

زائر
اضف رد علي هذا الموضوع....

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • تصفح هذا الموضوع مؤخراً   0 اعضاء متواجدين الان

    • لايوجد اعضاء مسجلون يتصفحون هذه الصفحه
×
×
  • اضف...

Important Information