Show image in tooltip of datagridview

Question

Background: I am working with winforms in c#. I do not want images to be shown in datagridview cells, i have stored only path in database and showing them in datagridview from database.

Problem: When user enters a cell a tooltip is poped-up. What I need is that when column index of current-cell is 2 then the tool tip should show an image from the path given in the current cell.

I have found This Article very good. But unable to get succeeded. I have following code

    void CustomizedToolTip_Popup(object sender, PopupEventArgs e)
    {
        DataGridView parent = e.AssociatedControl as DataGridView;
        if (parent.CurrentCell != null)
        {
            if (parent.CurrentCell.ColumnIndex == 2)
            {
                Bitmap bmpIn = new Bitmap(parent.CurrentCell.Value + "");
                using (Graphics g = Graphics.FromImage(bmpIn))
                {
                    Rectangle mr = new Rectangle(5, 5, 50, 50);
                    mr.Location = new Point(5, 5);
                    g.PageUnit = GraphicsUnit.Pixel;
                    g.DrawImage(bmpIn, mr);
                }
            }
        }
    }

I thought this code should draw image, but it is not drawing, and more than drawing I am uncertain about the location, even If I could draw, how to locate it in tootip. I have not been able to understand it from the article i mentioned. Below is the image of my datagridview.

Answer 1

I did something similar for a project.

Instead, I just used a form which I set to open on CellMouseOver , close on CellMouseLeave

    frm_MouseOverPicture HoverZoom = new frm_MouseOverPicture();

    private void dgv_CellMouseEnter(object sender, DataGridViewCellEventArgs e)
    {
       DataGridView dgv_sender = sender as DataGridView;
       DataGridViewCell dgv_MouseOverCell = dgv_sender.Rows[e.RowIndex].Cells[e.ColumnIndex];

       //Get FilePath from dgv_MouseOverCell content

       //Get x, y based on position relative to edge of screen
       //x, y = top left point of HoverZoom form

       HoverZoom.LoadPicture(FilePath);
       HoverZoom.Location = new System.Drawing.Point(x, y);
       HoverZoom.Show();

    }

    private void dgv_CellMouseLeave(object sender, DataGridViewCellEventArgs e)
    {
       HoverZoom.Hide();
       HoverZoom.ClearPicture();
    }

Hope that is close enough to what you are looking for. I just made the form with no border and put a picture box over the whole thing.

Answer 2

    void CustomizedToolTip_Popup(object sender, PopupEventArgs e)
    {
        DataGridView parent = e.AssociatedControl as DataGridView;
        if (parent.CurrentCell != null)
        {
            if (parent.CurrentCell.ColumnIndex == 2)
            {
                string path = parent.CurrentCell.Value.ToString();
                using (System.Drawing.Imaging.Metafile emf = new System.Drawing.Imaging.Metafile(path))
                using (System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(emf.Width, emf.Height))
                {
                    bmp.SetResolution(emf.HorizontalResolution, emf.VerticalResolution);

                    using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bmp))
                    {
                        g.DrawImage(emf,
                            new Rectangle(0, 0, emf.Width, emf.Height),
                            new Rectangle(0, 0, emf.Width, emf.Height),
                            GraphicsUnit.Pixel
                        );

                        return System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(bmp.GetHbitmap(), IntPtr.Zero, Int32Rect.Empty, BitmapSizeOptions.FromEmptyOptions());
                    }
                }
            }
        }
    }

Source

To use the System.Windows.Interop

"You have to download the .NET 3.0 runtime or later and install it to get the assembly..."

"After .NET 3.0 is installed, it should appear in the Add References list with component name as "WindowsBase". If it doesn't you can always add it from the Browse tab in the Add References dialog. (C:\\Program Files\\Reference Assemblies\\Microsoft\\Framework\\v3.0 on my box)"

Source

Answer 3

Just add a picturebox to your form and set size mode to "StretchImage" and visible= false, then add the following events to your datagridview

       private void metroGrid1_CellMouseEnter(object sender, DataGridViewCellEventArgs e)
    {
        DataGridView dgv_sender = sender as DataGridView;
        DataGridViewCell dgv_MouseOverCell=null;
        if (e.RowIndex > 0 && e.ColumnIndex > 0 && e.RowIndex <dgv_sender.RowCount && e.ColumnIndex<dgv_sender.ColumnCount)
        {
          dgv_MouseOverCell = dgv_sender.Rows[e.RowIndex].Cells[e.ColumnIndex];
        }
        if(dgv_MouseOverCell !=null)
        if (e.ColumnIndex == 4) {
            if (dgv_MouseOverCell.Value != null)
            {
                if (File.Exists(dgv_MouseOverCell.Value.ToString()))
                {
                    Image img = Image.FromFile(dgv_MouseOverCell.Value.ToString());
                    pictureBox1.ImageLocation = dgv_MouseOverCell.Value.ToString();
                    pictureBox1.Location = new System.Drawing.Point(Cursor.Position.X - this.Location.X, Cursor.Position.Y - this.Location.Y);
                    pictureBox1.Visible = true;
                }
            }
        }
    }

    private void metroGrid1_CellMouseLeave(object sender, DataGridViewCellEventArgs e)
    {
        pictureBox1.Visible = false;
    }

Click here to view image