0

I want add multiple image into one cell in DataGirdViewImageColumn

enter image description here

You can easily seen five circles with different color, at first, I've tried to written "•" character in DataGirdViewTextBoxColumn but I can not change color for each character, does anyone have any idea to do this?

Many thanks

Viet Nguyen
  • 2,285
  • 2
  • 26
  • 43
  • As posted I would go for cellpainting this cell. But if more complicated things come along maybe creating an image and setting it to the cell value would be better. What kind of graphics will come along and how are they controlled i.e. how are the colors determined?? – TaW Aug 25 '15 at 13:05
  • I really do not know where to start to do this work, this image I paint in photoshop to explain my idea, but sorry for my bad english, I really don't understand your question. – Viet Nguyen Aug 25 '15 at 13:09
  • 1
    My question was about which colors should the dots have in each row? Have a look at my answer, which assumes that each cell value encodes the colors. Feel free to ask, if something is confusing.. – TaW Aug 25 '15 at 13:31

2 Answers2

1

Here is an example of cell-painting this one Cell: enter image description here

The CellPainting event does the work:

private void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
    if (e.ColumnIndex == 2 && e.RowIndex >= 0 && e.Value != null)
    {
        // use your own code here...
        string val = ((int)e.Value).ToString("00000000");

        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
        e.PaintBackground(e.CellBounds, false);

        for (int i = 0; i < count; i++)
            using (SolidBrush brush = new   // ..and here!!!
                   SolidBrush(colors[Convert.ToInt16(val[i].ToString())]))
                e.Graphics.FillEllipse(brush, 
                    e.CellBounds.X + i * 12 + 6, e.CellBounds.Y + 5 , 11, 11);
        e.Handled = true;

    }

}

It makes use of a predefined list of colors:

 List<Color> colors = new List<Color>() // use your own set of colors here!
 { Color.Red, Color.Black, Color.Blue, Color.ForestGreen, Color.DarkKhaki, 
   Color.Goldenrod, Color.DeepPink, Color.Orange, Color.DarkSlateGray, Color.GreenYellow };

And a count of how many dots to draw:

    int count = 7; // ditto!

Obviously you may want to change the way I stored the data for my test...

I have stored a large integer number as the cell's value and each digint is mapped onto one color.

you can (and probably should) change this!

Here is how I set up may DGV:

        dataGridView1.Columns.Add("asd", "asd");
        dataGridView1.Columns.Add("ko", "ok");
        dataGridView1.Columns.Add("col", "col");
        dataGridView1.Rows.Add(66);
        for (int r = 0; r < 66; r++)
        {
            dataGridView1[0, r].Value = r;
            dataGridView1[1, r].Value = r * 3.14f;
            dataGridView1[2, r].Value = (int )( r * 314.345 + 1231542f);

        }

Obviously none of it is how you will do it ;-)

TaW
  • 53,122
  • 8
  • 69
  • 111
  • Don't worry, Although I've learned code from google but I can found how to do it, anyway, you're my hero :x, but can you help me, how can I draw these circles look smoother than this? – Viet Nguyen Aug 25 '15 at 13:32
  • 2
    Try antialiasing to get the circle "smoother": e.Graphics.SmoothingMode = SmoothingMode.AntiAlias – Waescher Aug 25 '15 at 13:35
  • 1
    Done. You may want to play around with the spots I marked! – TaW Aug 25 '15 at 13:41
  • While I scrolling to the end of the rows, it has been error `An exception of type 'System.NullReferenceException' occurred in WindowsFormsApplication1.exe but was not handled in user code Additional information: Object reference not set to an instance of an object.` it's about row index has wrong? – Viet Nguyen Aug 25 '15 at 13:45
  • 1
    This means that the system tries to paint a cell that has no or not a valid value. Probably you have `AllowUserToAddRows` on? simply make sure to not draw anything is such a case. I have add the check for null. It is up to you to set only working values.. – TaW Aug 25 '15 at 13:46
  • Oops, I've fixed, disable adding default row and it working :) – Viet Nguyen Aug 25 '15 at 13:47
1

There are different approaches to this. Here are the three I'd consider:

  1. Draw the cell by yourself in the CellPainting event (see stackoverflow)
  2. Draw an image by yourself and assign it to the image column (see stackoverflow)
  3. Create an own column type with an own editor (see msdn) which cares for the drawing

But in all the three options you will have to draw the circles with GDI+, so they are pretty close to each other.

I'd go for option 3 because it seems to be the cleanest approach to me and the column can be reused in other grids easily. With "clean" I mean the code to draw the circles is located in the column implementation instead of the form (or any other place) where you are reacting on the grid's event.

Community
  • 1
  • 1
Waescher
  • 5,361
  • 3
  • 34
  • 51