Tree View

Tree view เป็น Windows Common control ที่ผู้ใช้คุ้นเคยเนื่องจากคล้ายกับ Windows Explorer ลักษณะพื้นฐานของ Tree view แสดงรายการตามลำดับขั้น และมีลักษณะสำหรับระบุรายการย่อยที่สามารถแสดงหรือรวมได้ Tree view แสดงเป็น Node collection

การตั้งค่าคุณสมบัติเมื่อออกแบบ

เมื่อวาด Tree view ลงบนฟอร์ม ให้เปิดไดอะล๊อกบ๊อกซ์ของคุณสมบัติด้วยการคลิกที่ตัว control แล้วไปที่เมนู View เลือก Property Page หรือคลิกเมาส์ปุ่มขวาบนตัว control แล้วเลือก Properties

คุณสมบัติ Style มีผลกับกราฟฟิกของส่วนประกอบ โดย Tree view สามารถแสดงได้ 4 แบบ คือข้อความกับอ๊อบเจค Node, ภาพกับอ๊อบเจค Node, เครื่องหมายบวกหรือลบหน้าอ๊อบเจค Node และเส้นที่ออกจากอ๊อบเจค Node แต่ละอ๊อบเจคไปยังอ๊อบเจคลูก โดยส่วนมากใช้ตามค่าเริ่มต้น คือ 7-tvwtreelinePlusMinusPictureText

คุณสมบัติ LineStyle มีผลกับเส้นโดยค่า 0-tvwTreeLines ไม่แสดงเส้นระหว่าง root ของอ๊อบเจค Node ซึ่งค่านี้เป็นค่าเริ่มต้น ค่า 1-tvwRootLines แสดงเส้นระหว่าง root ของอ๊อบเจค Node และจากลูกไปยัง Node ในระดับที่สูงกว่า

คุณสมบัติ Indentation ระบุระยะเป็น twips ระหว่าง แนวตั้งของบรรทัดว่าง

คุณสมบัติ LabelEdit มีผลต่อการให้ผู้ใช้ปรับปรุงข้อความของแต่ละอ๊อบเจค Node ถ้ากำหนดค่า 0-tvwAutomatic (เป็นค่าเริ่มต้น) ผู้ใช้สามารถแก้ไขข้อความโดยการคลิกบน Node ขณะเรียกใช้กำหนดค่า 1- tvwManual การแก้ไขทำได้เฉพาะโปรแกรม โดยการใช้ เมธอด StartLabelEdit

คุณสมบัติ ImageList มีรายการ Image list ให้เลือกสำหรับการดึงภาพของแต่ละอ๊อบเจค Node ซึ่งเป็น Image list ที่อยู่บนฟอร์มปัจจุบัน

Tip: การสร้างความสัมพันธ์ระหว่าง Tree view กับ Image list ที่อยู่บนฟอร์มอื่น ทำได้โดยการกำหนดขณะเรียกใช้ ด้วยคำสั่ง

Private Sub Form_Load ( )
   Set TreeView1.ImageList = AnotherForm.ImageList1
End Sub

คุณสมบัติ HideSelection ใช้หาว่าอ๊อบเจค Node ที่เลือกยังคงไฮไลต์ เมื่อ Tree view ไม่ได้รับโฟกัส

คุณสมบัติ PathSeparator ระบุเครื่องหมายหรือตัวอักษรที่ใช้ในคุณสมบัติ FullPath ของอ๊อบเจค Node ซึ่งมีค่าเริ่มต้นเป็นเครื่องหมาย \

คุณสมบัติ Store ระบุ Node ในตัว control เรียงตามลำดับตัวอักษร

คุณสมบัติมีผลเฉพาะ root Node ไม่มีผลกับอ๊อบเจค ลูกในระดับต่ำกว่า

คุณสมบัติ FullRowSelect เป็นคุณสมบัติใหม่ที่มากับ Visual Basic 6 ถ้าเป็น True จะทำให้ Node ของตัว control ได้รับการเลือกเมื่อผู้ใช้คลิกที่ตำแหน่งใดๆ บนแถว แต่ค่าเริ่มต้น เป็น False การเลือกเกิดขึ้นเมื่อคลิก Node หรือเครื่องหมายบวกหรือลบ

คุณสมบัติ CheckBoxes ถ้าเป็น True จะมี Check box หน้า Node ทำให้ผู้ใช้สามารถเลือกแบบหลายอ๊อบเจค Node

คุณสมบัติ SingleSel ตามปกติการขยายหรือรวมรายการ Node จะต้องดับเบิลคลิก แต่ถ้าให้ SingleSel เป็น True ใช้การคลิกเพียงครั้งเดียว

คุณสมบัติ Scroll ใช้หาว่า Tree view ควรแสดงแถบเลื่อนแนวตั้งหรือแนวนอน ถ้าจำเป็นตามปกติมี

Note: คุณสมบัติ FullRowSelect, CheckBoxes, SingleSel, Scroll เป็นคุณสมบัติใหม่ใน Visual Basic 6 มีค่าเริ่มต้นเป็น True

คุณสมบัติ HotTracking เป็นการสร้างอินเตอร์เฟซแบบเว็บ ถ้ากำหนดเป็น True เคอร์เซอร์จะเปลี่ยนเป็นรูปมือ เมื่อเมาส์ผ่านอ๊อบเจค Node และข้อความของ Node จะมีเส้นใต้

การทำงานเมื่อเรียกใช้

ศักยภาพของ Tree view ที่ใช้ในการประยุกต์มาจาก Node collection และคุณสมบัติและเมธอดของอ๊อบเจค Node

การเพิ่มอ๊อบเจค Node

การเพิ่มรายการให้กับ Tree view ทำได้ขณะที่เรียกใช้ด้วยการใช้เมธอด Add ของ Node collection ซึ่งเมธอด Add มีไวยากรณ์ ดังนี้

Add ([Relative], [Relationship], [Key], [Text], [Image], [SelectedImage]) As Node

Relative และ Relationship ชี้ตำแหน่งที่ควรแทรก Node ใหม่
Key คือ string key ใน Node collection
Text คือ ข้อความที่จะปรากฏในตัว control
Image เป็น ดัชนีหรือ string key ใน Image list ที่จะใช้ปรากฏหน้า Node
SelectedImage เป็น ดัชนี หรือ คีย์ ของภาพที่ใช้เมื่อมีการเลือก Node

Dim nod Ad Node
Set nod = Add (, , , "C\system", "Folder", "OpenFolder")

Sub ShowDbStructure(MdbFile As String, Tree As TreeView, _
ShowSystemTables As Boolean)
   Dim db As DAO.Database, td As DAO.TableDef, fld As DAO.Field
   Dim nod1 As Node, nod2 As Node
   ' ลบข้อมูลปัจจุบันของ tree view
   Tree.Nodes.Clear

   ' เปิดฐานข้อมูล
   Set db = DBEngine.OpenDatabase(MdbFile)
   ' การ root ของโหนด แล้วขยายออกเพื่อแสดง table
   Set nod1 = Tree.Nodes.Add(, , "Root", db.Name, "Database")
   nod1.Tag = DatabaseInfo(db)
   nod1.Expanded = True

   ' สำรวจ table ทั้งหมดในฐานข้อมูล
   For Each td In db.TableDefs
      ' ไม่แสดง system table ถ้าไม่เลือก แสดง system table
      If (td.Attributes And dbSystemObject) = 0 Or ShowSystemTables Then
         ' เพิ่ม table ภายใต้อ๊อบเจค root
         Set nod1 = Tree.Nodes.Add("Root", tvwChild, , td.Name, "Table")
         nod1.Tag = TableDefInfo(td)
         ' เพิ่มฟิลด์ทั้งหมด
         For Each fld In td.Fields
            Set nod2 = Tree.Nodes.Add(nod1.Index, tvwChild, , fld.Name, "Field")
            nod2.Tag = FieldInfo(fld)
         Next
      End If
   Next
   db.Close
End Sub

ลักษณะภายนอกและการมองเห็น

การควบคุมลักษณะภายนอกของแต่ละอ๊อบเจค Node ใช้การตั้งค่าคุณสมบัติ ForeColor, BackColor และ Bold ตามปกติ การตั้งคุณสมบัติเหล่านี้ทำเมื่อเพิ่มรายการใหม่เข้าไปยัง Node collection

With TV.Nodes.Add ( , , , "New Node")
   .Bold = True
   .ForeColor = vbRed
   .BackColor = vbYellow
End With

แต่ละอ๊อบเจค Node มีความสัมพันธ์กับภาพ 3 ภาพ คือ คุณสมบัติ Image เป็น ดัชนีของภาพที่เป็นค่าเริ่มต้น คุณสมบัติ SelectedImage เป็น ดัชนีของภาพที่ใช้ เมื่อเลือก Node และคุณสมบัติ ExtendedImage เป็น ดัชนีของภาพที่ใช้เมื่อมีการขยาย Node โดยคุณสมบัติ Image และ SelectedImage สามารถตั้งค่าได้เมื่อมีการเพิ่มรายการเข้าไปใน Node collection ด้วย เมธอด Add ส่วนคุณสมบัติ ExtendedImage กำหนดภายหลังที่เพิ่มรายการใน collection

กำหนดการมองเห็น Node ด้วยคุณสมบัติ Visible รายการของ Node ไม่สามารถมองเห็นได้เพราะมีการขยาย Tree หรือมีการเลื่อนพื้นที่ที่มองเห็นได้ คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว แต่สามารถบังคับให้เห็นได้โดยการประมวลผล Node ด้วยเมธอด EnsureVisible

If aNode.Visible = False Then aNode.EnsureVisible

การรับรู้ว่ามี Node ที่มองเห็นได้ในตัว control ด้วยเมธอด GetVisibleCount

การหา Node ปัจจุบันที่ได้รับการเลือก ทำได้โดยการสอบถามคุณสมบัติ Selected หรือทดสอบคุณสมบัติ SelectedItem ใน Tree view

วิธีที่ 1
If aNode.Selected Then MsgBox "Selected"

วิธีที่ 2
If TreeView1.SelectedItem Is Anode Then MsgBox "Selected"

การทำให้ Node ที่กำหนดเป็น Node ปัจจุบันที่เลือก

วิธีที่ 1
aNode.Selected = True

วิธีที่ 2
Set TreeView1.SelectedItem = aNode

การแสดงสารสนเทศของ Node

การแสดงสนเทศของ Node ใช้ Node Click event และหาสารสนเทศจากคุณสมบัติ Index หรือ Key

Private Sub treDatabase_NodeClick(ByVal Node As MSComctlLib.Node)
   ' info() เป็น array ของข้อความที่เก็บข้อมูลของโหนด
   lblDetails.Caption = Node.Tag
End Sub

ตามปกติ คุณสมบัติ Key น่าเชื่อถือมากกว่าคุณสมบัติ Index
NodeClick event แตกต่างจาก Click event ธรรมดา คือ NodeClick เกิด event คลิกบนอ๊อบเจค Node ส่วน Click เกิด event เมื่อคลิกบน Tree view

การแก้ไขข้อความของ Node

ตามค่าเริ่มต้นผู้ใช้สามารถคลิกที่อ๊อบเจค Node เพื่อเข้าสู่โหมดแก้ไข และเปลี่ยนคุณสมบัติ Text ทางอ้อม ถ้าคุณสมบัติ LabelEditor กำหนดเป็น 1-tvwManual การแก้ไขทำได้โดยการประมวลผลเมธอด StartLabelEditor

วิธีกรองการแก้ไขคุณสมบัติ Text ทำได้ด้วยการจับ instance เมื่อเริ่มแก้ไข คำสั่งใน BeforeLabelEdit event procedure ถ้าต้องการยกเลิกการทำงานให้ตั้งค่าพารามิเตอร์ Cancel เป็น True

Private Sub TreeView1_BeforeLabelEdit (Cancel As Integer)
   ' ป้องกันคุณสมบัติ Text ของ root Node จากการแก้ไข
   If TreeView1.SelectedItem.Key = "Root" Then Cancel = True
End Sub

เมื่อมีการแก้ไขคุณสมบัติ Text จะสามารถจับ AfterLabelEdit event ซึ่งสามารถนำ event นี้ตรวจสอบค่าที่นำเข้าได้ เช่น การปฏิเสธข้อความว่าง

Private Sub TreeView1_AfterLabelEdit (Cancel As Integer, NewString As String)
   If Len (NewString) = 0 Then Cancel = True
End Sub

ดาวน์โหลดตัวอย่าง (BrowMDB.vbp)