[C#] DataGridView 搭配 PictureBox 動態顯示圖片

這篇筆記 [C#] DataGridView - 字串路徑圖片 的作法是直接在 DataGridView 上顯示圖片，缺點是 DataGridView 資料因為 DataGridViewImageColumn 會拉的很長，且也不見得使用者需要看見每筆資料圖片，所以這篇就練習，一開始並不顯示圖片，當使用者需要時才把相片叫出來，且相片位置要顯示在該資料行上，算是這篇筆記的延伸 [C#] PictureBox 顯示圖片。

簡單專案：就一個 Form

Layout：左邊一個 DataGridView、右邊是 PictureBox

C# Code

using System.IO;

namespace dgvImageColumn2PictureBox
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            dataGridView1.AutoGenerateColumns = false;
            dataGridView1.AllowUserToAddRows = false;
            dataGridView1.Dock = DockStyle.Fill;
            dataGridView1.DataSource = GetDataSource();

            pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;

            dataGridView1.Columns.Add(new DataGridViewTextBoxColumn
            {
                DataPropertyName = "ID",
                Name = "ColID",
                HeaderText = "編號",
                AutoSizeMode = DataGridViewAutoSizeColumnMode.ColumnHeader,
                Visible = true
            });
 
            dataGridView1.Columns.Add(new DataGridViewTextBoxColumn
            {
                DataPropertyName = "Photo",
                Name = "ColPhoto",
                HeaderText = "字串路徑",
                Width = 100,
                Visible = true
            });

            // UseColumnTextForButtonValue = true 才會顯示 Text 設定文字喔
            dataGridView1.Columns.Add(new DataGridViewButtonColumn
            {
                Name = "ColBtn",
                HeaderText = "檢視完整圖片",
                Text = "檢視完整圖片",
                Width = 100,
                Visible = true,
                UseColumnTextForButtonValue = true
            });

            dataGridView1.CellContentClick += DataGridView1_CellContentClick;
            pictureBox1.MouseLeave += PictureBox1_MouseLeave;

            // 預設 PictureBox 是隱藏的
            HidePhoto();
        }

        private void PictureBox1_MouseLeave(object sender, EventArgs e)
        {
            HidePhoto();
        }

        private void ShowPhoto(string PhotoPath)
        {
            using (FileStream fs = new FileStream(PhotoPath, FileMode.Open, FileAccess.Read))
            {
                pictureBox1.Image = Image.FromStream(fs);
                pictureBox1.Visible = true;
                pictureBox1.BringToFront();
                pictureBox1.Focus();

                // 設定 PictureBox 的位置。
                pictureBox1.Location = new Point
                (
                    PointToClient(MousePosition).X,
                    PointToClient(MousePosition).Y
                );
            }
        }

        private void HidePhoto()
        {
            pictureBox1.Visible = false;
            pictureBox1.SendToBack();
        }

        private void DataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e)
        {
            if (e.RowIndex < 0) return;

            if ((sender is DataGridView) == false) return;
                DataGridView dgv = sender as DataGridView;

            if (e.ColumnIndex != dgv.Columns["ColBtn"].Index) return;

            string PhotoPath = dgv.Rows[e.RowIndex].Cells["ColPhoto"].Value.ToString();
            ShowPhoto(PhotoPath);
        }

        private DataTable GetDataSource()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(int));
            dt.Columns.Add("Photo", typeof(string));

            dt.Rows.Add(1, @"D:\Image\Image1.JPG");
            dt.Rows.Add(2, @"D:\Image\Image2.JPG");
            dt.Rows.Add(3, @"D:\Image\Image3.JPG");
            dt.Rows.Add(4, @"D:\Image\Image4.JPG");
            dt.Rows.Add(5, @"D:\Image\Image5.JPG");

            return dt;
        }
    }
}

參考資料
• DataGridViewButtonColumn.UseColumnTextForButtonValue 屬性
• Control.PointToClient 方法
• Control.PointToScreen 方法