How to Show Image in Datagridview

สิ่งที่จำเป็น (Prerequisites)

• Microsoft Visual Studio 2008 (C#)
• SQL Server (2005,2008) Express

---

Download source: 

---

หากว่าเราต้องการแสดงรูปภาพบนคอนโทรล dataGridView แทนข้อความธรรมดา เช่น ถ้าข้อมูลสินในสต็อก(UnitsInStock) น้อยกว่าข้อมูลสินค้าสั่งซื้อ(UnitsOnOrder) ให้ใส่รูปเป็นสีแดง แต่หากไม่ใช่ใส่เป็นสีเขียวแทนซึ่งจะช่วยทำให้หน้าจอแอพพลิเคชันที่ดูเรียบๆ ให้ดูน่าใช้งานยิ่งขึ้น เราสามารถทำได้โดยการใช้ DataGridViewImageColumn ไปดูวิธีการเลยครับ:...

หน้าตาแอพพลิเคชันตาม เป้าประสงค์ :

สร้างประเภทโปรเจ็กต์เป็น WindowsForms Application

 

ใช้งาน dataGridView ลากมันมาใส่ฟอร์ม

เพิ่ม LINQ เนื่องจากเราจะใช้แหล่งข้อมูลจากมัน

แมปตาราง Product เข้าไปใน LINQ โดยการลาก-วาง

เปิด Resource เราจะไปใส่แหล่งทรัพยกรที่เป็นรูปภาพ เพื่อไว้ใช้ในอนาคตต่อไป...

เพิ่ม Resource Image เข้าไป เพราะเราจะดึงไปแสดงในคอนโทรล dataGridView

ลากรูปภาพ หรือ Copy แล้ววางในหน้าต่าง Resource

เสร็จสิ้นขั้นตอนกำหนดสรรพสิ่งแล้ว ต่อไปเป็นการใส่โค้ดให้มันดึงข้อมูล และนำรูปไปแสดง

Code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WinDataGridViewImageColumn
{
    public partial class Form1 : Form
    {
        DataGridViewImageColumn imColumn = null;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            //ใช้แหล่งข้อมูลจาก LINQ ผูกข้อมูลเข้ากับ dataGridView1            

            using (DataClasses1DataContext db = new DataClasses1DataContext())
            {
                //ดึงข้อมูลจาก LINQ เฉพาะฟิลด์  ProductID, ProductName, UnitPrice, UnitsInStock, UnitsOnOrder
                var p = from t in db.Products
                        select new
                        {
                            t.ProductID,
                            t.ProductName,
                            t.UnitPrice,
                            t.UnitsInStock,
                            t.UnitsOnOrder
                        };

                dataGridView1.DataSource = p.ToList();//ผูกข้อมูลใส่ dataGridView1 

                //สร้างออบเจ็กต์ DataGridViewImageColumn 
                imColumn = new DataGridViewImageColumn();
                imColumn.Name = "Status";//ตั้งชื่อ Column เป็น Status
                imColumn.HeaderText = "สถานะ";//ใส่ป้ายชื่อ Column เป็น สถานะ
                
                //กำหนดให้มันอยู่ตรงกลาง
                imColumn.HeaderCell.Style.Alignment = DataGridViewContentAlignment.MiddleCenter;
                imColumn.DefaultCellStyle.Alignment = DataGridViewContentAlignment.MiddleCenter;
                
                //เพิ่ม Column ใหม่ต่อท้าย {dataGridView1.ColumnCount = เป็น Index ของ Column ที่เราจะเพิ่มเข้าไปใหม่}
                dataGridView1.Columns.Insert(dataGridView1.ColumnCount, imColumn);

                //เมธอด ตรวจสอบเงื่อไขในการแสดงรูป
                setImage2Column();
            }
        }

        private void setImage2Column()
        {
            for (int i = 0; i < dataGridView1.RowCount - 1; i++)
            {
                int UnitsOnOrder = Convert.ToInt32(dataGridView1.Rows[i].Cells["UnitsOnOrder"].Value);
                int UnitsInStock = Convert.ToInt32(dataGridView1.Rows[i].Cells["UnitsInStock"].Value);

                //ถ้าจำนวนสินค้าสั่งซื้อมากว่า จำนวนสินค้าในสต็อก 
                //ให้ Cell จำนวนสินค้าในสต็อก ตัวหนังเป็นสีแดง, พื้นเป็นสีเหลือง, ให้แก้ไขได้ และใน Column Status ให้แสดงรูป fail

                if (UnitsOnOrder > UnitsInStock)//ถ้าจำนวนสินค้าสั่งซื้อมากว่า จำนวนสินค้าในสต็อก
                {
                    dataGridView1.Rows[i].Cells["UnitsInStock"].Style.ForeColor = Color.Red;//จำนวนสินค้าในสต็อก ตัวหนังเป็นสีแดง
                    dataGridView1.Rows[i].Cells["UnitsInStock"].Style.BackColor = Color.Yellow;//จำนวนสินค้าในสต็อก พื้นเป็นสีเหลือง
                    dataGridView1.Rows[i].Cells["UnitsInStock"].ReadOnly = false;//จำนวนสินค้าในสต็อก ให้แก้ไขได้

                    dataGridView1.Rows[i].Cells["Status"].Value = Properties.Resources.fail;//ใน Column Status ให้แสดงรูป fail
                    dataGridView1.Rows[i].Cells["Status"].ToolTipText = "Faliure";//แสดง Tooltip ว่า Faliure

                }

                else
                {
                    dataGridView1.Rows[i].Cells["Status"].Value = Properties.Resources.pass;//ใน Column Status ให้แสดงรูป fail
                    dataGridView1.Rows[i].Cells["Status"].ToolTipText = "Pass";//แสดง Tooltip ว่า Pass
                    dataGridView1.Rows[i].ReadOnly = true;//ให้ทั้งแถวไม่สามารถแก้ไขได้
                }
            }
        }
    }
}

ท่านผู้อ่านสามารถ Download ตัวอย่างโปรเจ็กต์ไปศึกษาได้กันเลยครับ

แหล่งข้อมูลอ้างอิง:

• How t Display Images in Cells of the Windows Forms DataGridView Control: http://msdn.microsoft.com/en-us/library/2ab8kd75.aspx

Download source: 

ref : http://greatfriends.biz/webboards/msg.asp?id=35277