Question

I’ve used the following code, taken from here, to create my own custom column for datagridview, so that I can now have images and text in the same cell:

Public Class TextAndImageColumn
    Inherits DataGridViewTextBoxColumn
    Private imageValue As Image
    Private m_imageSize As Size
    Public Sub New()
        Me.CellTemplate = New TextAndImageCell
    End Sub
    Public Overloads Overrides Function Clone() As Object
        Dim c As TextAndImageColumn = TryCast(MyBase.Clone, TextAndImageColumn)
        c.imageValue = Me.imageValue
        c.m_imageSize = Me.m_imageSize
        Return c
    End Function
    Public Property Image() As Image
        Get
            Return Me.imageValue
        End Get
        Set(ByVal value As Image)
            Me.imageValue = value
            Me.m_imageSize = value.Size
            Dim inheritedPadding As Padding = Me.DefaultCellStyle.Padding
            Me.DefaultCellStyle.Padding = New Padding(ImageSize.Width, inheritedPadding.Top, inheritedPadding.Right, inheritedPadding.Bottom)
        End Set
    End Property
    Private ReadOnly Property TextAndImageCellTemplate() As TextAndImageCell
        Get
            Return TryCast(Me.CellTemplate, TextAndImageCell)
        End Get
    End Property
    Friend ReadOnly Property ImageSize() As Size
        Get
            Return m_imageSize
        End Get
    End Property
End Class
Public Class TextAndImageCell
    Inherits DataGridViewTextBoxCell
    Private imageValue As Image
    Private imageSize As Size
    Public Overloads Overrides Function Clone() As Object
        Dim c As TextAndImageCell = TryCast(MyBase.Clone, TextAndImageCell)
        c.imageValue = Me.imageValue
        c.imageSize = Me.imageSize
        Return c
    End Function
    Public Property Image() As Image
        Get
            If Me.OwningColumn Is Nothing OrElse Me.OwningTextAndImageColumn Is Nothing Then
                Return imageValue
            Else
                If Not (Me.imageValue Is Nothing) Then
                    Return Me.imageValue
                Else
                    Return Me.OwningTextAndImageColumn.Image
                End If
            End If
        End Get
        Set(ByVal value As Image)
            Me.imageValue = value
            Me.imageSize = value.Size
            Dim inheritedPadding As Padding = Me.InheritedStyle.Padding
            Me.Style.Padding = New Padding(imageSize.Width, inheritedPadding.Top, inheritedPadding.Right, inheritedPadding.Bottom)
        End Set
    End Property
    Protected Overloads Overrides Sub Paint(graphics As Graphics, clipBounds As Rectangle, cellBounds As Rectangle,
                                            rowIndex As Integer, cellState 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, cellState, value, formattedValue, errorText, cellStyle, advancedBorderStyle, paintParts)
        If Not (Me.Image Is Nothing) Then
            Dim container As System.Drawing.Drawing2D.GraphicsContainer = graphics.BeginContainer
            graphics.SetClip(cellBounds)
            graphics.DrawImageUnscaled(Me.Image, cellBounds.Location)
            graphics.EndContainer(container)
        End If
    End Sub
    Private ReadOnly Property OwningTextAndImageColumn() As TextAndImageColumn
        Get
            Return TryCast(Me.OwningColumn, TextAndImageColumn)
        End Get
    End Property
End Class

It works very well, except that the image that I use is right at the edges of the cell. I’d like to give it a small margin. How can I do this?

Answer 1

You could add a property to TextAndImageCell like :

Private m_imagePadding As New Padding(3)

Public Property ImagePadding() As Padding
    Get
        Return m_imagePadding
    End Get
    Set(ByVal value As Padding)
        m_imagePadding = value
    End Set
End Property

and implement (in Paint) like :

graphics.DrawImageUnscaled(Me.Image, _
         New Point(cellBounds.Location.X + m_imagePadding.Left, _
                   cellBounds.Location.Y + m_imagePadding.Top))

also would need to change in TextAndImageColumn :

Me.DefaultCellStyle.Padding = New Padding(ImageSize.Width + _
   TextAndImageCellTemplate.ImagePadding.Right, inheritedPadding.Top, _
   inheritedPadding.Right, inheritedPadding.Bottom)

There’s room for refinement, obviously (trigger redraws on padding change, sort out row heights, text padding, etc) but something like this should work.