[VB.NET] การนำไฟล์ข้อมูลภาพมาแสดงผลในเซลล์ของตารางกริดแบบ Run Time

thongkorn

จากโปรเจค แจกฟรีโค้ดโปรแกรมการเก็บบันทึกข้อมูลบุคคล แอดมินจะขอเลือกส่วนสำคัญเพื่อนำมาอธิบายรายละเอียดกันนะครับ สำหรับบทความนี้ คือ การนำไฟล์ข้อมูลภาพมาแสดงผลในเซลล์ของตารางกริดแบบ Run Time ก็เพราะเนื่องจากว่าในฐานข้อมูล MS Access ที่แอดมินออกแบบเอาไว้ จะบันทึกเฉพาะชื่อไฟล์ (PictureName) เอาไว้เท่านั้น ไม่ได้จัดเก็บข้อมูลในรูปแบบ BLOB (Binary Large OBject) ซึ่งจะทำให้ฐานข้อมูลไม่ใหญ่โตเทอะทะ อีกทั้งมีข้อดีที่สำคัญมากคือ สามารถย้ายระบบไปใช้ฐานข้อมูลค่ายอื่นๆได้อย่างไม่ยากเย็นอะไร ...

การที่จะทำเช่นนี้ได้ต้องอาศัยวิธีการที่เราเรียกว่า UnBound Data Control หรือ การไม่ผูกข้อมูลใดๆเข้ากับคอนโทรล เพื่อที่จะสามารถนำชื่อไฟล์ภาพจากตารางข้อมูล ให้ไปปรากฏอยู่ในเซลล์ของตารางกริดได้ (พื้นฐานการนำข้อมูลจาก DataBase มาแสดงผลบนตารางกริด (Data Reader))

หากไม่มีข้อมูลภาพ เราก็ให้เป็นค่าว่าง (Blank) เอาไว้

โค้ดในส่วนของการนำข้อมูลมาแสดงผล ...

1.     ' / --------------------------------------------------------------------------------
   
2.     ' / Collect all searches and impressions. Come in the same place
   
3.     ' / blnSearch = True, Show that the search results.
   
4.     ' / blnSearch is set to False, Show all records.
   
5.     Private Sub RetrieveData(Optional ByVal blnSearch As Boolean = False)
   
6.         strSQL = _
   
7.             " SELECT tblContact.ContactPK, tblContact.Fullname, tblContact.Nickname, tblContact.Mobile, " & _
   
8.             " tblContact.Phone, tblContact.eMail, tblContact.LineID, tblContact.FacebookID, " & _
   
9.             " tblContact.PictureName, tblContact.Note, " & _
   
10.             " tblPosition.PositionName, tblDepartment.DepartmentName " & _
    
11.             " FROM [tblPosition] INNER JOIN (tblDepartment INNER JOIN tblContact ON " & _
    
12.             " tblDepartment.DepartmentPK = tblContact.DepartmentFK) ON tblPosition.PositionPK = tblContact.PositionFK "
    
13. 
    
14.         '// blnSearch = True for Serach
    
15.         If blnSearch Then
    
16.             strSQL = strSQL & _
    
17.                 " WHERE " & _
    
18.                 " [Fullname] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
    
19.                 " [Nickname] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
    
20.                 " [PositionName] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
    
21.                 " [DepartmentName] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
    
22.                 " [Mobile] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
    
23.                 " [Phone] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
    
24.                 " [eMail] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
    
25.                 " [LineID] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
    
26.                 " [FaceBookID] " & " Like '%" & txtSearch.Text & "%'" & _
    
27.                 " ORDER BY ContactPK "
    
28.         Else
    
29.             strSQL = strSQL & " ORDER BY ContactPK "
    
30.         End If
    
31.         '//
    
32.         Try
    
33.             Cmd = New OleDbCommand
    
34.             If Conn.State = ConnectionState.Closed Then Conn.Open()
    
35.             Cmd.Connection = Conn
    
36.             Cmd.CommandText = strSQL
    
37.             Dim DR As OleDbDataReader = Cmd.ExecuteReader
    
38.             Dim i As Long = dgvData.RowCount
    
39.             While DR.Read
    
40.                 With dgvData
    
41.                     .Rows.Add(i)
    
42.                     .Rows(i).Cells(0).Value = DR.Item("ContactPK").ToString
    
43.                     .Rows(i).Cells(1).Value = DR.Item("Fullname").ToString
    
44.                     .Rows(i).Cells(2).Value = DR.Item("Nickname").ToString
    
45.                     .Rows(i).Cells(3).Value = DR.Item("PositionName").ToString
    
46.                     .Rows(i).Cells(4).Value = DR.Item("DepartmentName").ToString
    
47.                     .Rows(i).Cells(5).Value = DR.Item("Mobile").ToString
    
48.                     .Rows(i).Cells(6).Value = DR.Item("Phone").ToString
    
49.                     .Rows(i).Cells(7).Value = DR.Item("eMail").ToString
    
50.                     .Rows(i).Cells(8).Value = DR.Item("LineID").ToString
    
51.                     .Rows(i).Cells(9).Value = DR.Item("FaceBookID").ToString
    
52.                     '// Show picture in cell.
    
53.                     If DR.Item("PictureName").ToString <> "" Then
    
54.                         '//dgvData.Rows(i).Height = 75
    
55.                         '// Column 10 = "PictureName"
    
56.                         dgvData.Columns(10).Width = 75
    
57.                         '// First, before load data into DataGrid and check File exists or not?
    
58.                         If Dir(strPathImages & DR.Item("PictureName").ToString) = "" Then
    
59.                             '// strPathImages in modDataBase.vb
    
60.                             dgvData.Rows(i).Cells(10).Value = Image.FromFile(strPathImages & "people.png")
    
61.                         Else
    
62.                             dgvData.Rows(i).Cells(10).Value = Image.FromFile(strPathImages & DR.Item("PictureName").ToString)
    
63.                         End If
    
64.                         '// If image is not exists, then show default image.
    
65.                     Else
    
66.                         dgvData.Rows(i).Cells(10).Value = Image.FromFile(strPathImages & "people.png")
    
67.                         '//dgvData.Rows(i).Height = 75
    
68.                         dgvData.Columns(10).Width = 75
    
69.                     End If
    
70.                     ' / --------------------------------------------------------------------------------
    
71.                     '// Keep picture's name into TAG for each cell in DataGrid.
    
72.                     '// Used to load images into PictureBox or apply for something else.
    
73.                     dgvData.Rows(i).Cells(10).Tag = DR.Item("PictureName").ToString
    
74.                     ' / --------------------------------------------------------------------------------
    
75.                     '//
    
76.                     .Rows(i).Cells(11).Value = DR.Item("Note").ToString
    
77.                 End With
    
78.                 i += 1
    
79.             End While
    
80.             lblRecordCount.Text = "[Total : " & dgvData.RowCount & " records]"
    
81.             DR.Close()
    
82.             '// Adjust row height.
    
83.             If chkPicture.Checked Then
    
84.                 dgvData.Columns("PictureName").Visible = True
    
85.                 '// Jump to sub program
    
86.                 Call AdjustRowHeight(75)
    
87.             Else
    
88.                 dgvData.Columns("PictureName").Visible = False
    
89.                 Call AdjustRowHeight(28)
    
90.             End If
    
91. 
    
92.         Catch ex As Exception
    
93.             MessageBox.Show(ex.Message)
    
94.         End Try
    
95.         '//
    
96.         txtSearch.Clear()
    
97.     End Sub

คัดลอกไปที่คลิปบอร์ด

ต้องทำการตรวจสอบก่อนว่ามีชื่อไฟล์ภาพอยู่หรือไม่ หากไม่มีให้โหลดภาพอื่น (people.png) ลงไปแทน ไม่อย่างนั้นมันก็จะเกิดเอ้อเหรอซิครับ

1.     '// First, before load data into DataGrid and check File exists or not?
   
2.     If Dir(strPathImages & DR.Item("PictureName").ToString) = "" Then
   
3.         '// strPathImages in modDataBase.vb
   
4.         dgvData.Rows(i).Cells(10).Value = Image.FromFile(strPathImages & "people.png")
   
5.     Else
   
6.         dgvData.Rows(i).Cells(10).Value = Image.FromFile(strPathImages & DR.Item("PictureName").ToString)
   
7.     End If

คัดลอกไปที่คลิปบอร์ด

เพราะเนื่องจากหลักที่ 10 (เป็นค่า Index นะครับ) เรากำหนดให้เป็น Dim colPicture As New DataGridViewImageColumn มันถึงจะแสดงผลภาพออกมา ... แล้วถ้าหากว่าต้องการอยากรู้ชื่อไฟล์ภาพแต่ละภาพจะทำอย่างไร???
จะมีอยู่บรรทัดคำสั่งหนึ่ง คือการโหลดชื่อไฟล์ภาพเข้าสู่คุณสมบัติ TAG ในเซลล์ของตารางกริด คือ ...

1.     ' / --------------------------------------------------------------------------------
   
2.     '// Keep picture's name into TAG for each cell in DataGrid.
   
3.     '// Used to load images into PictureBox or apply for something else.
   
4.    dgvData.Rows(i).Cells(10).Tag = DR.Item("PictureName").ToString
   
5.    ' / --------------------------------------------------------------------------------

คัดลอกไปที่คลิปบอร์ด

นั่นก็หมายความว่า หากเราต้องการนำชื่อไฟล์ภาพไปใช้งานก็กำหนดที่นี่แหละครับ ทำให้เราประหยัดตัวแปร หรือไม่ต้องเพิ่มหลักของตารางกริดเพื่อเอาข้อมูลมาซ่อน ... นี่ก็เป็นอีกหนึ่งเคล็ดลับเทคนิคของการใช้งานตารางกริด

การหาค่า Primary Key และเรียกใช้ชื่อไฟล์ภาพ ... จะอยู่ในเหตุการณ์ของการดับเบิ้ลคลิ๊กเมาส์ในแต่ละแถวของตารางกริด

1.     ' / -----------------------------------------------------------------------------
   
2.     ' / Double Click mouse on DataGridView.
   
3.     ' / -----------------------------------------------------------------------------
   
4.     Private Sub dgvData_DoubleClick(sender As Object, e As System.EventArgs) Handles dgvData.DoubleClick
   
5.         If dgvData.RowCount <= 0 Then Return
   
6.         '// Read the value of the focus row.
   
7.         Dim iRow As Integer = dgvData.CurrentRow.Index
   
8.         '// Get Primary Key in Column(0) and show picture's name which It is stored in TAG property each cell.
   
9.         MessageBox.Show("Primary Key is : " & dgvData.Item(0, iRow).Value & vbCrLf & _
   
10.                         "Picture Name: " & dgvData.Item(10, iRow).Tag)
    
11.     End Sub

คัดลอกไปที่คลิปบอร์ด

กรณีที่เราต้องการให้แสดงหรือไม่แสดงผลรูปภาพ ...

1.     ' / -----------------------------------------------------------------------------
   
2.     ' / Show picture or not?
   
3.     ' / -----------------------------------------------------------------------------
   
4.     Private Sub chkPicture_CheckedChanged(sender As System.Object, e As System.EventArgs) Handles chkPicture.CheckedChanged
   
5.         If chkPicture.Checked Then
   
6.             dgvData.Columns("PictureName").Visible = True
   
7.             Call AdjustRowHeight(75)
   
8.         Else
   
9.             dgvData.Columns("PictureName").Visible = False
   
10.             Call AdjustRowHeight(28)
    
11.         End If
    
12.     End Sub
    
13. 
    
14.     ' / -----------------------------------------------------------------------------
    
15.     ' / Change the height of the rows.
    
16.     ' / -----------------------------------------------------------------------------
    
17.     Private Sub AdjustRowHeight(h As Integer)
    
18.         For i As Integer = 0 To dgvData.Rows.Count - 1
    
19.             dgvData.Rows(i).Height = h
    
20.         Next
    
21.     End Sub

คัดลอกไปที่คลิปบอร์ด

มันจำเป็นจะต้องมีการปรับขนาดความสูงของแถวแบบ @Run Time ตามโค้ดด้านบน ในกรณีที่ปิดเปิดการแสดงผลภาพ

แถมท้าย ... การออกแบบตารางกริด แอดมินชอบการใช้โค้ดสั่งให้ทำงานในขณะ Run Time (โปรแกรมทำงานจึงจะเห็นผล) มากกว่า Design Time (ปรับแต่งคุณสมบัติต่างๆก่อนทำการสั่งรัน) ก็เพราะมีหลายๆเหตุผล หลักๆก็คือหากเราต้องการเพิ่มฟิลด์ (Field ไม่ได้อ่านว่า ฟิว) หรือตัดออกในภายหลัง สามารถทำได้ง่ายและรวดเร็วกว่า หรือการโยกย้ายไปใช้ Control ของค่ายอื่นๆแทนก็ง่ายดาย ดังนั้นแอดมินขอแนะนำให้เขียนโค้ดทำเป็นเทมเพลตเอาไว้รอล่วงหน้าเลยครับ

1.     ' / --------------------------------------------------------------------------------
   
2.     '// Initialize DataGridView @Run Time
   
3.     Private Sub SetupDGVData()
   
4.         With dgvData
   
5.             .RowHeadersVisible = False
   
6.             .AllowUserToAddRows = False
   
7.             .AllowUserToDeleteRows = False
   
8.             .AllowUserToResizeRows = False
   
9.             .MultiSelect = False
   
10.             .SelectionMode = DataGridViewSelectionMode.FullRowSelect
    
11.             .ReadOnly = True
    
12.             .Font = New Font("Tahoma", 9)
    
13.             ' Columns Specified
    
14.             .Columns.Add("ContactPK", "ContactPK")
    
15.             .Columns.Add("Fullname", "Full name")
    
16.             .Columns.Add("Nickname", "Nickname")
    
17.             .Columns.Add("PositionName", "Position")
    
18.             .Columns.Add("DepartmentName", "Department")
    
19.             .Columns.Add("Mobile", "Mobile")
    
20.             .Columns.Add("Phone", "Phone Ext.")
    
21.             .Columns.Add("Email", "Email")
    
22.             .Columns.Add("LineID", "Line")
    
23.             .Columns.Add("FacebookID", "Facebook")
    
24.             '// Column Picture
    
25.             Dim colPicture As New DataGridViewImageColumn
    
26.             .Columns.Add(colPicture)
    
27.             With colPicture
    
28.                 .HeaderText = "Picture"
    
29.                 .Name = "PictureName"
    
30.                 .ImageLayout = DataGridViewImageCellLayout.Stretch
    
31.             End With
    
32.             '//
    
33.             .Columns.Add("Note", "Note")
    
34.             '// Hidden Columns
    
35.             .Columns(0).Visible = False
    
36.             .Columns(7).Visible = False
    
37.             .Columns(8).Visible = False
    
38.             .Columns(9).Visible = False
    
39.             '// PictureName
    
40.             .Columns("PictureName").Visible = True
    
41.             .Columns("Note").Visible = False
    
42.             ' Autosize Column
    
43.             .AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill
    
44.             .AutoResizeColumns()
    
45.             '// Even-Odd Color
    
46.             .AlternatingRowsDefaultCellStyle.BackColor = Color.AliceBlue
    
47.             ' Adjust Header Styles
    
48.             With .ColumnHeadersDefaultCellStyle
    
49.                 .BackColor = Color.Navy
    
50.                 .ForeColor = Color.Black ' Color.White
    
51.                 .Font = New Font("Tahoma", 9, FontStyle.Bold)
    
52.             End With
    
53.         End With
    
54.     End Sub

คัดลอกไปที่คลิปบอร์ด

สำหรับตอนนี้ก็ขอจบแต่เพียงเท่านี้ ... สวัสดี
ดาวน์โหลดโค้ดต้นฉบับ VB.NET (2010) ได้ที่นี่

g2gsoftuser

ขอบคุณครับ