ชุมชนคนรักภาษาเบสิค - Visual Basic Community

 ลืมรหัสผ่าน
 ลงทะเบียน
ค้นหา
ดู: 3845|ตอบกลับ: 1

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

[คัดลอกลิงก์]

308

กระทู้

498

โพสต์

5973

เครดิต

ผู้ดูแลระบบ

ทองก้อน ทับทิมกรอบ

Rank: 9Rank: 9Rank: 9

เครดิต
5973


จากโปรเจค แจกฟรีโค้ดโปรแกรมการเก็บบันทึกข้อมูลบุคคล แอดมินจะขอเลือกส่วนสำคัญเพื่อนำมาอธิบายรายละเอียดกันนะครับ สำหรับบทความนี้ คือ การนำไฟล์ข้อมูลภาพมาแสดงผลในเซลล์ของตารางกริดแบบ 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.         '// blnSearch = True for Serach
  14.         If blnSearch Then
  15.             strSQL = strSQL & _
  16.                 " WHERE " & _
  17.                 " [Fullname] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
  18.                 " [Nickname] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
  19.                 " [PositionName] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
  20.                 " [DepartmentName] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
  21.                 " [Mobile] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
  22.                 " [Phone] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
  23.                 " [eMail] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
  24.                 " [LineID] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
  25.                 " [FaceBookID] " & " Like '%" & txtSearch.Text & "%'" & _
  26.                 " ORDER BY ContactPK "
  27.         Else
  28.             strSQL = strSQL & " ORDER BY ContactPK "
  29.         End If
  30.         '//
  31.         Try
  32.             Cmd = New OleDbCommand
  33.             If Conn.State = ConnectionState.Closed Then Conn.Open()
  34.             Cmd.Connection = Conn
  35.             Cmd.CommandText = strSQL
  36.             Dim DR As OleDbDataReader = Cmd.ExecuteReader
  37.             Dim i As Long = dgvData.RowCount
  38.             While DR.Read
  39.                 With dgvData
  40.                     .Rows.Add(i)
  41.                     .Rows(i).Cells(0).Value = DR.Item("ContactPK").ToString
  42.                     .Rows(i).Cells(1).Value = DR.Item("Fullname").ToString
  43.                     .Rows(i).Cells(2).Value = DR.Item("Nickname").ToString
  44.                     .Rows(i).Cells(3).Value = DR.Item("PositionName").ToString
  45.                     .Rows(i).Cells(4).Value = DR.Item("DepartmentName").ToString
  46.                     .Rows(i).Cells(5).Value = DR.Item("Mobile").ToString
  47.                     .Rows(i).Cells(6).Value = DR.Item("Phone").ToString
  48.                     .Rows(i).Cells(7).Value = DR.Item("eMail").ToString
  49.                     .Rows(i).Cells(8).Value = DR.Item("LineID").ToString
  50.                     .Rows(i).Cells(9).Value = DR.Item("FaceBookID").ToString
  51.                     '// Show picture in cell.
  52.                     If DR.Item("PictureName").ToString <> "" Then
  53.                         '//dgvData.Rows(i).Height = 75
  54.                         '// Column 10 = "PictureName"
  55.                         dgvData.Columns(10).Width = 75
  56.                         '// First, before load data into DataGrid and check File exists or not?
  57.                         If Dir(strPathImages & DR.Item("PictureName").ToString) = "" Then
  58.                             '// strPathImages in modDataBase.vb
  59.                             dgvData.Rows(i).Cells(10).Value = Image.FromFile(strPathImages & "people.png")
  60.                         Else
  61.                             dgvData.Rows(i).Cells(10).Value = Image.FromFile(strPathImages & DR.Item("PictureName").ToString)
  62.                         End If
  63.                         '// If image is not exists, then show default image.
  64.                     Else
  65.                         dgvData.Rows(i).Cells(10).Value = Image.FromFile(strPathImages & "people.png")
  66.                         '//dgvData.Rows(i).Height = 75
  67.                         dgvData.Columns(10).Width = 75
  68.                     End If
  69.                     ' / --------------------------------------------------------------------------------
  70.                     '// Keep picture's name into TAG for each cell in DataGrid.
  71.                     '// Used to load images into PictureBox or apply for something else.
  72.                     dgvData.Rows(i).Cells(10).Tag = DR.Item("PictureName").ToString
  73.                     ' / --------------------------------------------------------------------------------
  74.                     '//
  75.                     .Rows(i).Cells(11).Value = DR.Item("Note").ToString
  76.                 End With
  77.                 i += 1
  78.             End While
  79.             lblRecordCount.Text = "[Total : " & dgvData.RowCount & " records]"
  80.             DR.Close()
  81.             '// Adjust row height.
  82.             If chkPicture.Checked Then
  83.                 dgvData.Columns("PictureName").Visible = True
  84.                 '// Jump to sub program
  85.                 Call AdjustRowHeight(75)
  86.             Else
  87.                 dgvData.Columns("PictureName").Visible = False
  88.                 Call AdjustRowHeight(28)
  89.             End If

  90.         Catch ex As Exception
  91.             MessageBox.Show(ex.Message)
  92.         End Try
  93.         '//
  94.         txtSearch.Clear()
  95.     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.     ' / Change the height of the rows.
  15.     ' / -----------------------------------------------------------------------------
  16.     Private Sub AdjustRowHeight(h As Integer)
  17.         For i As Integer = 0 To dgvData.Rows.Count - 1
  18.             dgvData.Rows(i).Height = h
  19.         Next
  20.     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) ได้ที่นี่

ขออภัย! โพสต์นี้มีไฟล์แนบหรือรูปภาพที่ไม่ได้รับอนุญาตให้คุณเข้าถึง

คุณจำเป็นต้อง ลงชื่อเข้าใช้ เพื่อดาวน์โหลดหรือดูไฟล์แนบนี้ คุณยังไม่มีบัญชีใช่ไหม? ลงทะเบียน

x
สิ่งที่ดีกว่าการให้ คือการให้แบบไม่มีที่สิ้นสุด

0

กระทู้

58

โพสต์

10

เครดิต

Member

Rank: 2

เครดิต
10
โพสต์ 2022-10-25 19:52:00 | ดูโพสต์ทั้งหมด

ขอบคุณครับ
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | ลงทะเบียน

รายละเอียดเครดิต

ข้อความล้วน|อุปกรณ์พกพา|ประวัติการแบน|G2GNet.com  

GMT+7, 2024-3-29 17:27 , Processed in 0.219845 second(s), 4 queries , File On.

Powered by Discuz! X3.4, Rev.62

Copyright © 2001-2020 Tencent Cloud.

ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้