PFGrid toolkit and controls for .NET Winforms

...Empower your UI with our fast and flexible controls!

Writing custom renderers for PFGrid .NET

In this tutorial a custom renderer for PFGrid .NET is implemented. The renderer is derived from VistaTreeListRenderer so the default style is used from this existing renderer. The goal for this renderer is to override the appearance of the sort-indicator for the control's columns and set new colours for the column-headers.

What we want to achieve

This is how the control should look like:

Img. 1: Appearance of PFGrid with custom renderer

How we can achieve it

The first thing we have to do is to define a custom TreeListRenderer-class which we derive from VistaTreeListRenderer:

namespace CG.ControlTest.Custom

{

public class CustomRenderer : VistaTreeListRenderer

{

}

}

 

To use the renderer for our control can't be done in Designer, it has to be added in your code. A good place for this is the constructor of your Form or UserControl on which your TreeListView-control lies:

 

public FormCustomizing()

{

InitializeComponent();

 

treeListView.Renderer = new CustomRenderer();

}

 

Define the colours

To define the colours for a derived VistaTreeListRenderer we have to override the method Initiliaze and set the colours for the properties of the renderer:

 

public override void Initialize(TreeListView treeListView)

{

 

base.Initialize(treeListView);

 

BorderColorHover = Color.DarkRed;

BackColorElementSelectedFrom = Color.FromArgb(255, 244, 244)

BackColorElementSelectedTo = Color.FromArgb(222, 188, 188);

ColorResizeIndicator = Color.DarkRed;

BackColorColumnSortedFrom = Color.FromArgb(255, 244, 244);

BackColorColumnSortedTo = Color.FromArgb(222, 188, 188);

BackColorColumnHoverFrom = Color.FromArgb(255, 222, 222);

BackColorColumnHoverTo = Color.FromArgb(244, 102, 102);

BackColorColumnDragFrom = Color.FromArgb(255, 222, 222);

BackColorColumnDragTo = Color.FromArgb(244, 102, 102);

}

 

Set the sort-indicator

We want to display a special Sort-indicator for sorted columns so we have to override the method PaintColumnSortIndicator of the renderer:

public override void PaintColumnSortIndicator(System.Drawing.Graphics g,

CG.Controls.Grid.Data.TreeListColumn column, System.Drawing.Rectangle bounds)

{

if (column.SortDirection == System.Windows.Forms.SortOrder.None ||

bounds.Width < 25)

return;

 

Image sortImg = (column.SortDirection == System.Windows.Forms.SortOrder.Ascending)

? Resources.Custom_Sort_Up : Resources.Custom_Sort_Down;

 

 

g.DrawImageUnscaled(sortImg, bounds.Left + (bounds.Width / 2) - 2, bounds.Top + 2);

 

}

In this method we have to paint the custom sort-indicator as image. It is assumed that you have 2 images added to your resources: One for sorting ascending and one for sorting descending. The image you draw with the method DrawImageUnscaled depends on the sort-direction of the column.