How to Show Image in Datagridview


 

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

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

 

Download source:
http://cid-7d608959d854cb28.skydrive.live.com/embedrowdetail.aspx/SourcesCode/WinDataGridViewImageColumn|_7-11-2008.zip

 

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

 

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

เป้าประสงค์

 

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

WindowsForms Application WindowsForms Application structure

 

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

Add dataGridView and set Anchor

 

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

Add LINQ to SQL

 

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

Product

 

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

6

 

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

7

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

8

 

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

 

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 ตัวอย่างโปรเจ็กต์ไปศึกษาได้กันเลยครับ

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

Download source:
http://cid-7d608959d854cb28.skydrive.live.com/embedrowdetail.aspx/SourcesCode/WinDataGridViewImageColumn|_7-11-2008.zip

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Windows Application
2 comments on “How to Show Image in Datagridview
  1. kuan พูดว่า:

    ขอบคุณนะคะ…น่าสนใจดี… ขอเอาไปใช้บ้างนะค้าาา…

  2. Pongsiri พูดว่า:

    พี่ครับ ช่วยส่งโค้ดที่เป็น vb.net ให้หน่อยได้ป่าวครบผมงงมากๆเลย แกะไม่ถูก ใช้database access

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: