VB.NET WinForm(VS2012 Metro UI)为DataGridView按钮设置背景图

嗨，我明白你现在的需求——在VS2012 VB.NET的Metro风格WinForms应用里，给DataGridView里的按钮加上背景图对吧？默认的DataGridViewButtonColumn确实没有直接设置背景图的属性，不过我们有两种靠谱的方法来实现，我给你一步步讲清楚：

方法一：自定义DataGridViewButtonCell（推荐，保留按钮交互感） #

这种方法通过重写按钮单元格的绘制逻辑，先画背景图再叠加文字，能完美保留按钮的点击状态（比如按下时的视觉反馈），很贴合Metro风格的交互体验。

首先，添加一个自定义的单元格类：

Public Class DataGridViewImageButtonCell
    Inherits DataGridViewButtonCell

    ' 存储按钮背景图
    Private _buttonImage As Image
    Public Property ButtonImage As Image
        Get
            Return _buttonImage
        End Get
        Set(value As Image)
            _buttonImage = value
        End Set
    End Property

    Protected Overrides Sub Paint(graphics As Graphics, clipBounds As Rectangle, cellBounds As Rectangle, rowIndex As Integer, elementState As DataGridViewElementStates, value As Object, formattedValue As Object, errorText As String, cellStyle As DataGridViewCellStyle, advancedBorderStyle As DataGridViewAdvancedBorderStyle, paintParts As DataGridViewPaintParts)
        ' 先绘制按钮的基础样式（边框、点击状态等），跳过文字绘制
        MyBase.Paint(graphics, clipBounds, cellBounds, rowIndex, elementState, Nothing, Nothing, errorText, cellStyle, advancedBorderStyle, paintParts And Not DataGridViewPaintParts.ContentForeground)

        ' 绘制背景图，居中显示
        If ButtonImage IsNot Nothing Then
            Dim imageRect As New Rectangle(
                cellBounds.X + (cellBounds.Width - ButtonImage.Width) \ 2,
                cellBounds.Y + (cellBounds.Height - ButtonImage.Height) \ 2,
                ButtonImage.Width,
                ButtonImage.Height
            )
            graphics.DrawImage(ButtonImage, imageRect)
        End If

        ' 叠加绘制按钮文字，放在图片下方
        If formattedValue IsNot Nothing Then
            Dim textRect As Rectangle = cellBounds
            textRect.Y += ButtonImage.Height + 2
            textRect.Height -= ButtonImage.Height + 2
            TextRenderer.DrawText(graphics, formattedValue.ToString(), cellStyle.Font, textRect, cellStyle.ForeColor, TextFormatFlags.HorizontalCenter Or TextFormatFlags.VerticalCenter)
        End If
    End Sub
End Class

然后修改你的gv_btn方法，替换成自定义单元格类型：

Private Sub gv_btn()
    Dim btnColumn As New DataGridViewButtonColumn()
    ' 指定列的单元格模板为我们自定义的类
    btnColumn.CellTemplate = New DataGridViewImageButtonCell()
    btnColumn.HeaderText = "Edit"
    btnColumn.Text = "Edit"
    btnColumn.Name = "btn"
    btnColumn.UseColumnTextForButtonValue = True

    DataGridView1.Columns.Add(btnColumn)

    ' 给所有按钮设置Metro风格背景图（替换成你的图片路径）
    Dim editImage As Image = Image.FromFile("C:\YourProject\Resources\edit_metro.png")
    For Each row As DataGridViewRow In DataGridView1.Rows
        If row.Cells("btn") IsNot Nothing AndAlso TypeOf row.Cells("btn") Is DataGridViewImageButtonCell Then
            DirectCast(row.Cells("btn"), DataGridViewImageButtonCell).ButtonImage = editImage
        End If
    Next
End Sub

方法二：用DataGridViewImageColumn模拟按钮（更简单） #

如果不需要按钮的默认交互样式，也可以用图片列来模拟按钮，点击时触发编辑逻辑，实现起来更快捷：

修改gv_btn方法为：

Private Sub gv_btn()
    Dim imgColumn As New DataGridViewImageColumn()
    imgColumn.HeaderText = "Edit"
    imgColumn.Name = "btn"
    ' 设置默认的Metro风格图标
    imgColumn.Image = Image.FromFile("C:\YourProject\Resources\edit_metro.png")
    ' 允许点击交互
    imgColumn.ReadOnly = False

    DataGridView1.Columns.Add(imgColumn)
End Sub

然后添加DataGridView的CellClick事件处理，判断点击的是图片列就执行编辑操作：

Private Sub DataGridView1_CellClick(sender As Object, e As DataGridViewCellEventArgs) Handles DataGridView1.CellClick
    ' 确认点击的是我们的图片列，且不是表头行
    If e.ColumnIndex = DataGridView1.Columns("btn").Index AndAlso e.RowIndex >= 0 Then
        ' 这里写你的编辑逻辑，比如获取当前行的客户信息
        Dim clientName As String = DataGridView1.Rows(e.RowIndex).Cells("Name").Value.ToString()
        MessageBox.Show($"开始编辑客户：{clientName}")
    End If
End Sub

小提示 #

• 建议使用透明背景的PNG图片，更贴合Metro风格的简洁感
• 图片尺寸尽量和DataGridView行高匹配（比如24x24像素），避免拉伸变形
• 如果想更贴合Metro设计，也可以用Segoe MDL2 Assets字体的图标，不需要额外图片，直接绘制文字图标即可

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