منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب
معلومة ::: TreeView - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغة الفيجوال بيسك VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=182)
+--- قسم : قسم مقالات VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=184)
+--- الموضوع : معلومة ::: TreeView (/showthread.php?tid=5274)

الصفحات: 1 2

معلومة ::: TreeView - RaggiTech - 06-10-12

كاتب الموضوع : BADRMEDIA


أداة العرض الشجري TreeView

تستخدم فى كثير من المهام ومهمة لأى مبمرج لابد يتعرف على مفهومها وأهميتها

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


سنبدأ نتعرف الحين فى نقاط وسنتطرق لفوائد حولها

==============================


قم بادراج الأداة من صندوق الأدوات ToolBox على الفورم وضع زر أمر Button

هذه الأداة TreeView عبارة عن حياة كاملة لمجموعة من الكائنات تتكامل مع بعضها

وطالما TreeView هى عرض شجرى إذن لابد أن يكون للشجرة بداية وبداية الشجرة الجذر

وهذا مثل مستكشف الانترنت - الجذر له هو سطح المكتب ومنه يتفرع كل شئ

لكن فى الأداة TreeView ممكن أن يكون هناك أكثر من جذر وكل جذر تحته مجموعته - والمجموعة التى تتفرع منه تسمي أيناء - ولك أن تشبه ذلك بشجرة العائلة - جد منه أب من الأب حفيد وهكذا

وكل عنصر يسمى Node أى عقدة - أى تشبيه بالشجرة والعقد التى فيها التى تعبر عن عمرها

وعدد العقد هو عدد العناصر فى الشجرة TreeView



كيف نضيف جذر للأداة TreeView :

ضع هذا الكود فى حدث الزر Button :



كود :
' هنا سنعرف متغير ونجعله نسخة من الفئة TreeNode

' أى حضرنا متغير ليكون عقدة من عقد الأداة بصرف النظر عن موقعه العائلى هل هو أب أم ابن

Dim rootNode As New TreeNode

' هنا أعطينا للمتغير الذى هو العقدة بعد أن أنشأناه أعطيناه اسم ظاهر للمستخدم

rootNode.Text = "الجذر الرئيسى"

' هنا النقطة المهمة وهلا اننا أضفناه لأداة الشجرة مباشرة أى كجذر مرتبط بالأداة مباشرة

TreeView1.Nodes.Add(rootNode)

معلومة ::: TreeView - RaggiTech - 06-10-12

بالطبع نحن أضفنا جذر ومنه يتفرع كل شئ

وقلنا أن أن الجذر أو الأب أو الابن أعى عنصر داخل أداة TreeView هو عقدة مثل أمر الشجرة بالضبط عمرها بعدد العقد وهذه الأداة عدد عناصر بعدد العقد

تعال لننظر كيف نضع تحت الجذر أب وهكذا



كود :
' هنا سنعرف متغير ونجعله نسخة من الفئة TreeNode
' وسيكون الجذر الرئيسى
Dim rootNode As New TreeNode

' وهذا سيكون أول ابن

Dim childNode1 As New TreeNode

' وهذا سيكون ثاني ابن

Dim childNode2 As New TreeNode

' وهذا سيكون أول حفيد

Dim grandChildNode1 As New TreeNode

' وهذا سيكون ثاني حفيد

Dim grandChildNode2 As New TreeNode

' وهذا سيكون ثالث حفيد

Dim grandChildNode3 As New TreeNode



لاحظ أننا عرفنا كل هذه المتغييرات بنوع TreeNode ولكن التمميز فى اسمها ومكان اضافتها





كود :
' اعطينا اسم للمتغير الذى أردناه أن يكون هو الجذر
rootNode.Text = "الجذر الرئيسى"

' ثم اعطينا اسم للأب الأول
childNode1.Text = "الأبن1"
' ثم اعطينا اسم للأب الثاني
childNode2.Text = "الأبن2"

' ثم اعطينا اسم للحفيد الأول
grandChildNode1.Text = "الحفيد1"
' ثم اعطينا اسم للحفيد الثاني
grandChildNode2.Text = "الحفيد2"
' ثم اعطينا اسم للحفيد الثالث
grandChildNode3.Text = "الحفيد3"


هنا سيكون الأمر الهام وهو الذى يحدد من الأب ومن الأين





كود :
' هنا أضفنا للابن الأول الحفيد الأول
childNode1.Nodes.Add(grandChildNode1)

' هنا أضفنا للابن الأول الحفيد الثاني

childNode1.Nodes.Add(grandChildNode2)

' هنا أضفنا للابن الثاني الحفيد الثالث
childNode2.Nodes.Add(grandChildNode3)


' هنا سنضيف للجذر هذه الأبناء
rootNode.Nodes.Add(childNode1)
rootNode.Nodes.Add(childNode2)

' هنا سنضيف الجذر للشجرة مباشرة بعد أن حددنا له عائلته الكريمة

TreeView1.Nodes.Add(rootNode)

معلومة ::: TreeView - RaggiTech - 06-10-12

كل ما قمنا به بالكود فى الشرح السابق - يمكن فعله أثناء التصميم عن طريق الخاصية Nodes للأداة TreeView من نافذة الخصائص الخاصة بها

لكن هذا سيكون فى حالة لو كان المعروض أشياء ثابتة أو عرضنا بالكود سيكون فى الأمور الأكثر فاعلية

أعتقد حتى الان قصة الشجرة ومحور حياتها وعائلتها الكريمة أصبح أمر سهل ومفهوم

معلومة ::: TreeView - RaggiTech - 06-10-12

هذا هو الكود فى المثال السابق

ضعه فى حدث Load للفورم



كود :
Dim rootNode As New TreeNode
Dim childNode1 As New TreeNode
Dim childNode2 As New TreeNode
Dim grandChildNode1 As New TreeNode
Dim grandChildNode2 As New TreeNode
Dim grandChildNode3 As New TreeNode
rootNode.Text = "الجذر الرئيسى"
childNode1.Text = "الأبن1"
childNode2.Text = "الأبن2"
grandChildNode1.Text = "الحفيد1"
grandChildNode2.Text = "الحفيد2"
grandChildNode3.Text = "الحفيد3"
childNode1.Nodes.Add(grandChildNode1)
childNode1.Nodes.Add(grandChildNode2)
childNode2.Nodes.Add(grandChildNode3)
rootNode.Nodes.Add(childNode1)
rootNode.Nodes.Add(childNode2)
TreeView1.Nodes.Add(rootNode)


كيف نقرأ عقدة ( جذر - أب - ابن - لقيط ) محددة


ضع زر على الفورم واكتب تحته هذا الكود :



كود :
If TreeView1.SelectedNode Is Nothing Then
Exit Sub
End If

Dim SelectedNode As New TreeNode

SelectedNode = TreeView1.SelectedNode

MessageBox.Show("[" & SelectedNode.Text & "]")

قمنا أولاً بمعرفة هل هناك محدد فى الأداة أم لا

If TreeView1.SelectedNode Is Nothing

فإذا لم يكن هناك عنصر محدد أوقفنا الاجراء

Exit Sub



أما لو كان هناك عنصر محدد - فسنحدد ننشأ متغير نسميه SelectedNode من نوع الفئة TreeNode


ثم نساويه بالعنصر المحدد


كود :
SelectedNode = TreeView1.SelectedNode

ثم قرأناه فى رسالة - أى قرأنا اسمه



كود :
MessageBox.Show("[" & SelectedNode.Text & "]")

معلومة ::: TreeView - RaggiTech - 06-10-12

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

هكذا



كود :
MsgBox(TreeView1.SelectedNode.Text())

لذلك يمكن أن نحذفه مباشرة



كود :
TreeView1.SelectedNode.Remove()

لكن دائما قبل القيام بأمر على العنصر أن تتأكد أنه محدد أصلاً



كود :
If TreeView1.SelectedNode Is Nothing Then
Exit Sub
End If
ثم نحذفه لو كان محدد



كود :
TreeView1.SelectedNode.Remove()

معلومة ::: TreeView - RaggiTech - 06-10-12

عند عرض الشجرة TreeView نجد أن العناصر التى بها تكون محضونة داخل الجذر ولا تظهر إلا لو ضغطنا على علامة الموجب التى بجانب كل عنصر حاضن لعناصر أخري


لو أحببت عرض كل العناصر - أى أنك تقوم بفرد العناصر كلها وأن تصبح ظاهرة كلها




كود :
TreeView1.ExpandAll()

سقوم باظهار كل محتوياتها من العناصر


==============================


أما لو أحببت اظهار العناصر التى تحت عنصر محدد يكون الكود هكذا




كود :
If TreeView1.SelectedNode Is Nothing Then
Exit Sub
End If

TreeView1.SelectedNode.Expand()

طبعاُ لابد من التحقق من التحديد للعنصر أولاً


لكن سنلاحظ أن الاظهار الذى تم - تم اظهار العناصر التى تحت العنصر مباشرة أما العناصر التى تحت العناصر التى تحت العنصر المحدد لم تظهر - لذلك لو أحببت اظهارها يكون الأمر هكذا


كود :
If TreeView1.SelectedNode Is Nothing Then
Exit Sub
End If

TreeView1.SelectedNode.ExpandAll()

معلومة ::: TreeView - RaggiTech - 06-10-12

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


لكن ماذا لو أحببت أن تدمج العناصر كلها للأداة - الأمر بسيط - كل ماعليك هو كتابة :



كود :
TreeView1.CollapseAll()

لكن لو أحببت أن تدمج عناصر متفرعة من عنصر محدد يكون الأمر هكذا :



كود :
TreeView1.SelectedNode.Collapse()

طبعاً لاتنسى أن تتحقق أولاً من تحديد العنصر كما بينا من قبل





إن شاء الله غداً نكمل - حان موعد النوم

معلومة ::: TreeView - RaggiTech - 06-10-12

نري فى شجرة العرض TreeView أنه يكون بجانب العنصر أو العقدة - صورة تعبر عن العنصر

كيف يتم ذلك ؟



قوم بادراج أداة ImageList من صندوق الأداوات ToolBox - وهى أداة حاضنة لمجموعة من الصورة يتم الوصول لهم برقم الفهرس للصورة الذى رتبت به داخل الأداة الحاضنة

بعد أن تضعها على الفورم - قم بفتح الخاصية Images من نافذة الخصائص - وقم باضافة صور لها


بعد ذلك اذهب للأداة TreeView واختار الخاصية ImageList واختار منها الأداة ImageList1 التى وضعناها


أذهب للخاصية Nodes والتى تعاملنا معها من قبل فى اضافة العناصر ( العقد )

وأثناء تصميم العقدة اختار الخاصية ImageIndex وستجد أن الصور التى أرفقتها فى الأداة ImageList ظهرت مرتبة بفهرس - اختار ما تريده وستجد الصورة تظهر بجانب العنصر

معلومة ::: TreeView - RaggiTech - 06-10-12

بالنسبة لما قمنا به فى الرد السابق - نستطيع أن نقوم به بالكود

فيمكن انشاء ImageList بالكود ووضع الصور فيه وترتب بالفهرس


كود :
Dim myImageList As New ImageList
myImageList.Images.Add(Image.FromFile("Default.gif"))
myImageList.Images.Add(Image.FromFile("Selected.gif"))

ثم نربط TreeView بأداة الصور


كود :
TreeView1.ImageList = myImageList

ثم نبدأ فى بناء العناصر ( العقد ) ونربط كل عقدة برقم فهرس صورة محددة


كود :
Dim rootNode As New TreeNode

rootNode.Text = "الجذر"
rootNode.ImageIndex = 0


rootNode.SelectedImageIndex = 1


Dim childNode1 As New TreeNode
Dim childNode2 As New TreeNode

childNode1.Text = "الابن1"
childNode1.ImageIndex = 0


childNode1.SelectedImageIndex = 1
childNode2.Text = "الابن2"
childNode2.ImageIndex = 0


childNode2.SelectedImageIndex = 1


rootNode.Nodes.Add(childNode1)
rootNode.Nodes.Add(childNode2)


TreeView1.Nodes.Add(rootNode)

وهذا الأمر شرحناه من قبل

معلومة ::: TreeView - RaggiTech - 06-10-12

كيف نعرف عدد العقد الموجودة فى شجرة عرض TreeView أو عدد العناصر التى تحت عنصر معين


سيرافقنا هذا المثال الدائم :


كود :
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

Dim rootNode As New TreeNode
Dim childNode1 As New TreeNode
Dim childNode2 As New TreeNode
Dim grandChildNode1 As New TreeNode
Dim grandChildNode2 As New TreeNode
Dim grandChildNode3 As New TreeNode
rootNode.Text = "الجذر الرئيسى"
childNode1.Text = "الأبن1"
childNode2.Text = "الأبن2"
grandChildNode1.Text = "الحفيد1"
grandChildNode2.Text = "الحفيد2"
grandChildNode3.Text = "الحفيد3"
childNode1.Nodes.Add(grandChildNode1)
childNode1.Nodes.Add(grandChildNode2)
childNode2.Nodes.Add(grandChildNode3)
rootNode.Nodes.Add(childNode1)
rootNode.Nodes.Add(childNode2)
TreeView1.Nodes.Add(rootNode)

TreeView1.ExpandAll()

End Sub

ولكن هنا قمنا بفرد كل العناصر وجعلها ظاهرة بالأمر


كود :
TreeView1.ExpandAll()

لو أردنا أن نعرف كل العناصر الموجودة فى TreeView

سنقوم بهذا النتيجة كرسالة للمستخدم



كود :
MessageBox.Show(TreeView1.GetNodeCount(True))

أما لو أردنا عرض عدد العناصر التى تحت عنصر محدد - وذلك يفيد فى معرفة مثلاً عدد الحسابات التى تحت حساب محدد - قمنا بتحديده بالماوس



كود :
MessageBox.Show(TreeView1.SelectedNode.GetNodeCount(True))