Images in a ListView with text below them

Question

I am creating a 2D Map Editor in C#, And I've been trying to display objects in a ListView, So it will look like this example (I'm not sure if the control in the example is an ListView. It might be something else):

But I can't seem to get there ! I'm using a ListView with an imageList, the listView.View is Tile and I'm setting the ListViewItem's text.

That's how it looks (I've added one item)

I can't find a method to put the item's text BELOW the image and not next to it, like in the example.

Any thoughts on how I could do this?

you can find ur soluntion here :http://www.c-sharpcorner.com/UploadFile/9f4ff8/listview-in-C-Sharp/ and http://stackoverflow.com/questions/561798/how-do-i-align-text-for-a-single-subitem-in-a-listview-using-c — Rahul Sharma, Nov 22 '14 at 13:40
@TaW That doesn't change anything. I've tried all sorts of Views. — FightRay, Nov 22 '14 at 13:56
@Rahul I just had a quick look into it, And that looks quite like what I wanted =) Thanks, Let me try it — FightRay, Nov 22 '14 at 13:57

score 1 · Accepted Answer · edited Jan 12 '18 at 08:26

TaW was certainly right with his answer, However, the problem with View=LargeIcon was that the spacing between items is too large, And I wanted to use View=Tile at first since there's no spacing between the items. So, after a little research I did about this, I came up with a solution for spacing, Which was a little altered by me.

[DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = false)]
    private static extern Int32 SendMessage(IntPtr hwnd, Int32 wMsg, Int32 wParam, Int32 lParam);

    const int LVM_FIRST = 0x1000;
    const int LVM_SETICONSPACING = LVM_FIRST + 53;

    public void SetControlSpacing(Control control, Int16 x, Int16 y)
    {
        SendMessage(control.Handle, LVM_SETICONSPACING, 0, x * 65536 + y);
        control.Refresh();
    }

And since the default spacing for a list control seems to be 100 (x), 100 (y), changing each to 75 has fixed the problem,

listView.View = View.largeIcon;
SetControlSpacing(listView, 75, 75);

And now looks like this:

Thanks for your help.

TaW · Answer 2 · 2014-11-22T15:56:19.333

The simplest solution is to chose View=LargeIcon. It certainly does change the position of the Text to be below the LargeImage.

The solution for View=Tiles is to owner draw the ListView:

private void listView1_DrawItem(object sender, DrawListViewItemEventArgs e)
{
    e.DrawBackground();

    ImageList iList = listView1.LargeImageList;
    Size iSize = iList.ImageSize;
    int fSize2 = 7;

    Rectangle R0 = new Rectangle(Point.Empty, iSize);
    Rectangle R1 = new Rectangle(new Point(e.Bounds.X , e.Bounds.Y ),
                    new Size(iSize.Width - fSize2, iSize.Height - fSize2) );

    e.Graphics.DrawImage(iList.Images[e.Item.ImageIndex], R1, R0, GraphicsUnit.Pixel);

    e.Graphics.DrawString(e.Item.Text, Font, Brushes.Black, 
                          2f, e.Bounds.Y + iSize.Height - fSize2);

}

note that the ItemHeight is always restricted by the Image.Height of the chosen ImageList, so I am shrinking the image a little to make room for the text below it.

Images in a ListView with text below them

2 Answers2