如何在C#的ListView中用图片替代文本及替换删除项为.png图形

Hey there! Let's work through your two C# ListView image requirements together. I'll break each one down with clear steps and code examples so you can implement them easily.

To display images instead of text in a ListView, you'll need to use an ImageList control to manage your images—this is the standard way to handle images in WinForms ListViews. Here's how to do it:

Step 1: Set Up the ImageList #

First, add an ImageList to your form (either via the designer or code). Adjust its ImageSize to match your image dimensions (e.g., 32x32 pixels) so images display correctly.

You can add images to the ImageList in two ways:

• Designer: Select the ImageList, open its Images collection property, and import your PNG files directly.
• Code: Dynamically load images at runtime:

// Load an image from file (replace the path with your actual file location)
imageList1.Images.Add(Image.FromFile(@"C:\assets\your-image.png"));
// Add multiple images if needed—each gets an index starting at 0

Step 2: Bind the ImageList to Your ListView #

Link the ImageList to your ListView based on your preferred view mode:

• For LargeIcon/SmallIcon views: Set listView1.LargeImageList = imageList1 (or SmallImageList).
• For Details view: Use listView1.SmallImageList = imageList1 (we'll need custom drawing for column images, which we'll cover next).

Step 3: Display Images Instead of Text #

Scenario A: Icon View (Replace Item Text with Images) #

If you're using an icon-based view, create ListView items with empty text and set their ImageIndex to point to the image in your ImageList:

// Create an item that only shows an image (no text)
ListViewItem imageOnlyItem = new ListViewItem("");
imageOnlyItem.ImageIndex = 0; // Matches the first image in your ImageList
listView1.Items.Add(imageOnlyItem);

Scenario B: Details View (Replace Column Text with Images) #

Details view doesn't natively support images in subitems, so you'll need to enable custom drawing. Here's how:

1. Set listView1.OwnerDraw = true (either in the designer or code).
2. Subscribe to the DrawSubItem event, then add this code to draw images in your target column:

private void listView1_DrawSubItem(object sender, DrawListViewSubItemEventArgs e)
{
    // Check if we're drawing the column that should show images (e.g., column index 0)
    if (e.ColumnIndex == 0)
    {
        // Get the image from the ImageList
        Image targetImage = imageList1.Images[e.Item.ImageIndex];
        // Draw the image in the subitem's bounds
        e.Graphics.DrawImage(targetImage, e.Bounds.Location);
    }
    else
    {
        // Let the default drawing handle text for other columns
        e.DrawDefault = true;
    }
}

Assuming you want to replace a "Delete" text entry (like an action column in Details view) with a delete icon, follow these steps:

Step 1: Add the Delete Icon to Your ImageList #

Add your delete PNG to the ImageList (or a separate ImageList if you prefer). Note its index (e.g., index 1 if it's the second image).

Step 2: Set Up the Delete Column and Custom Drawing #

1. Add an "Actions" column to your ListView:

listView1.Columns.Add("Actions", 50); // Adjust width to fit your icon
listView1.View = View.Details;

2. Use the same OwnerDraw setup as before, and update the DrawSubItem event to draw the delete icon in the action column:

private void listView1_DrawSubItem(object sender, DrawListViewSubItemEventArgs e)
{
    if (e.ColumnIndex == 1) // Assuming the action column is index 1
    {
        Image deleteIcon = imageList1.Images[1];
        // Center the icon in the column for better visibility
        int centerX = e.Bounds.X + (e.Bounds.Width - deleteIcon.Width) / 2;
        int centerY = e.Bounds.Y + (e.Bounds.Height - deleteIcon.Height) / 2;
        e.Graphics.DrawImage(deleteIcon, centerX, centerY);
    }
    else
    {
        e.DrawDefault = true;
    }
}

Step 3: Make the Delete Icon Clickable #

To let users click the icon to delete the item, handle the MouseClick event:

private void listView1_MouseClick(object sender, MouseEventArgs e)
{
    ListViewHitTestInfo hitInfo = listView1.HitTest(e.X, e.Y);
    // Check if the click was on the action column (index 1)
    if (hitInfo.SubItem != null && hitInfo.SubItem.Index == 1)
    {
        // Delete the clicked item
        listView1.Items.Remove(hitInfo.Item);
    }
}

Pro Tips #

• For better reliability, embed your images as resources (right-click the image in Visual Studio → Properties → Build Action → Embedded Resource). Then access them via Properties.Resources.YourImageName instead of file paths.
• Adjust the ImageSize and column widths to ensure your images don't get cropped or stretched.

内容的提问来源于stack exchange，提问作者Saluto32