Articles in this section
Category / Section

How to customized image buttons WinForms Grid Control?

3 mins read

Customize the image button

To replace the default +/- expand buttons with the customized image buttons, you need to create a new CellModel and CellRenderer. In the following code example, GridPushButtonCellModel and GridPushButtonCellRenderer are created by inheriting the GridPushButtonCellModel and GridPushButtonCellRenderer from the sample. The following code example shows how to use these classes.

Creating CellModel

Refer to the following code example to create a new cell model.


public class GridPushButtonImageCellModel: GridPushButtonCellModel
    protected GridPushButtonImageCellModel(SerializationInfo info, StreamingContext context) : base(info, context){}
    public GridPushButtonImageCellModel(GridModel grid) : base(grid){}
    public override GridCellRendererBase CreateRenderer(GridControlBase control)
        return new GridPushButtonImageCellRenderer(control, this);


Public Class GridPushButtonImageCellModel
    Inherits GridPushButtonCellModel
    Protected Sub New(ByVal info As SerializationInfo, ByVal context As StreamingContext)
       MyBase.New(info, context)
    End Sub
    Public Sub New(ByVal grid As GridModel)
    End Sub
    Public Overrides Function CreateRenderer(ByVal control As GridControlBase) As GridCellRendererBase
        Return New GridPushButtonImageCellRenderer(control, Me)
    End Function
End Class

Creating CellRenderer

Refer to the following code example to create a new CellRenderer.


public class GridPushButtonImageCellRenderer : GridPushButtonCellRenderer
    private ImageCellButton pushButton;
    public GridPushButtonImageCellRenderer(GridControlBase grid, GridPushButtonImageCellModel cellModel) : base(grid, cellModel)
        AddButton(pushButton = new ImageCellButton(this));


Public Class GridPushButtonImageCellRenderer
    Inherits GridPushButtonCellRenderer
    Private pushButton As ImageCellButton = New ImageCellButton(Me)
    Public Sub New(ByVal grid As GridControlBase, ByVal cellModel As GridPushButtonImageCellModel)
        MyBase.New(grid, cellModel)
    End Sub
End Class

Creating ImageCellButton


public class ImageCellButton : GridCellButton
    static GridIconPaint iconPainter;
    static ImageCellButton()
       iconPainter = new GridIconPaint("ImagePushButton.", typeof(ImageCellButton).Assembly);
    public ImageCellButton(GridPushButtonCellRenderer control) : base(control)
        Console.WriteLine("In ImageCellButton");
    public override void Draw(Graphics g, int rowIndex, int colIndex, bool bActive, GridStyleInfo style)
         base.Draw(g, rowIndex, colIndex, bActive, style);
         //Draws the button.
         bool hovering = IsHovering(rowIndex, colIndex);
         bool mouseDown = IsMouseDown(rowIndex, colIndex);
         bool disabled = !style.Clickable;
         ButtonState buttonState = ButtonState.Normal;
  buttonState |= ButtonState.Inactive|ButtonState.Flat;
         else if (!hovering && !mouseDown)
  buttonState |= ButtonState.Flat;
  Point ptOffset = Point.Empty;
     ptOffset = new Point(1, 1);
     buttonState |= ButtonState.Pushed;
  DrawButton(g, Bounds, buttonState, style);
            Image img = Image.FromFile(Application.StartupPath + "..\\..\\..\\Browse.bmp");
            Bitmap bmp = img as Bitmap;
            Rectangle r = iconPainter.PaintIcon(g, Bounds, ptOffset, bmp, Color.Black);


Public Class ImageCellButton
    Inherits GridCellButton
    Private Shared iconPainter As GridIconPaint
       Shared Sub New()
       iconPainter = New GridIconPaint("ImagePushButton.", GetType(ImageCellButton).Assembly)
    End Sub
    Public Sub New(ByVal control As GridPushButtonCellRenderer)
        Console.WriteLine("In ImageCellButton")
    End Sub
    Public Overrides Sub Draw(ByVal g As Graphics, ByVal rowIndex As Integer, ByVal colIndex As Integer, ByVal bActive As Boolean, ByVal style As GridStyleInfo)
        MyBase.Draw(g, rowIndex, colIndex, bActive, style)
        'Draws the button.
        Dim hovering As Boolean = IsHovering(rowIndex, colIndex)
        Dim mouseDown As Boolean = IsMouseDown(rowIndex, colIndex)
        Dim disabled As Boolean = Not style.Clickable
        Dim buttonState As ButtonState = ButtonState.Normal
        If disabled Then
 buttonState = buttonState Or ButtonState.Inactive Or ButtonState.Flat
        ElseIf (Not hovering) AndAlso (Not mouseDown) Then
 buttonState = buttonState Or ButtonState.Flat
        End If
        Dim ptOffset As Point = Point.Empty
        If mouseDown Then
 ptOffset = New Point(1, 1)
 buttonState = buttonState Or ButtonState.Pushed
        End If
        DrawButton(g, Bounds, buttonState, style)
        Dim img As Image = Image.FromFile(Application.StartupPath & "..\..\..\Browse.bmp")
        Dim bmp As Bitmap = TryCast(img, Bitmap)
        Dim r As Rectangle = iconPainter.PaintIcon(g, Bounds, ptOffset, bmp, Color.Black)
End Sub

Adding CellModel

The following code example illustrates how to add cell model to the GridGroupingControl. The text ImagePushButton mentioned while adding the CellModel is used as CellType.


//Adds the ImagePushButton Model in the GridGroupingControl CellModel.
this.gridGroupingControl1.TableModel.CellModels.Add("ImagePushButton", new GridPushButtonImageCellModel(this.gridGroupingControl1.TableModel));


'Adds the ImagePushButton Model in the GridGroupingControl CellModel.
Me.gridGroupingControl1.TableModel.CellModels.Add("ImagePushButton", New GridPushButtonImageCellModel(Me.gridGroupingControl1.TableModel))

Assigning CellType

The following code example illustrates how to add cell type to the GridGroupingControl.


//Loads image in the GroupExpander used in grouping cases.
this.gridGroupingControl1.TableDescriptor.Appearance.GroupCaptionPlusMinusCell.CellType = "ImagePushButton";
//Loads image in the RecordExpander used in nestedgrid cases.
this.gridGroupingControl1.TableDescriptor.Appearance.RecordPlusMinusCell.CellType = "ImagePushButton";


'Loads image in the GroupExpander used in grouping cases.
Me.gridGroupingControl1.TableDescriptor.Appearance.GroupCaptionPlusMinusCell.CellType = "ImagePushButton"
'Loads image in the RecordExpander used in nestedgrid cases.
Me.gridGroupingControl1.TableDescriptor.Appearance.RecordPlusMinusCell.CellType = "ImagePushButton"


Customized image push button added in record plus minus cell

Figure 1: Customized ImagePushButton added in the RecordPlusMinusCell

Customized image push button added in grid caption plus minus cell

Figure 2: Customized ImagePushButton added in the GroupCaptionPlusMinusCell


C#: CustomizedImageButton-C#

VB: CustomizedImageButton-VB


I hope you enjoyed learning how to customize image buttons in WinForms Grid Control.

You can refer to WinForms Grid control feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinForms Grid control example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment