Decorating a Grid with GDI+
Many times I have seen where there are grid controls that have an image as their background. Now in VFP while it is not too difficult to display images in the grid, you just cannot get the effect as below.
avior:url(#ieooui) }
But with a little ingenuity and some technique this effect as above is certainly possible.
That's where GDI+ comes in. To achieve this you need the GDI+x classes found on VFPX and the imgcanvas class.
Create a new class and base it on the imgcanvas class found in gdiplus.vcx.
As you should know, when using the imgCanvas class, you should never put any code in the INIT. Any code you'd normally put in the init should be put in the "SETUP" method.
The idea to achieve the above effect is to have a transparent image floating above your grid. There is nothing special about the grid. This transparency shows the grid contents below it.
When the user clicks anywhere on the transparent image the click should be transmitted down to the grid at that exact same spot.
The GDI+x is used to display the image as transparent and the ingenuity is what causes the click to travel down.
The class contains some custom properties as below:
nColour1 and nColour2 are two colours that will make up the Gradient if no image is specified in the Picture property.
nTransparency is the amount of transparency you want. I find 25 is a fairly good number with 0 being fully transparent and 255 being opaque.
UsePicture if set to .T. will use the picture else will use a gradient based on the two colours.
gridname this is improtant. This is how the class identifies the grid above which it must float, as well as the size it should be. It is important that you enter here the full "path" to the grid since it could verywell be in a container in a Page on a Page frame.
If so then this property would be:
ThisForm.MyPageFrame.Page1.MyContainer1.MyGrid
and if just placed on a form
ThisForm.MyGrid1
The setup code resizes and positions the imgCanvas control over the grid. It also either uses the image or a gradient with the transparency set. It then displays this.
Custom Methods
There is a custom method gridmousedown. This code is fired whenever the grid receives a mousedown event. This is achieved by this code in the setup:
BINDEVENT(oGrid,"MouseDown",This,"gridmousedown")
But if the imgCanvas is floating over the grid how can the grid get a mousedown event?
That is usually achieved by passing the event down in the MouseDown event of the control:
* control.mousedown.
LPARAMETERS nButton, nShift, nXCoord, nYCoord
This.oGrid.MouseDown(nButton, nShift, nXCoord, nYCoord)
This fires the grid.MouseDown which fires our gridmousedown because we are bound to it.
Our gridmousedown method has this code:
LPARAMETERS nButton, nShift, nXCoord, nYCoord
PRIVATE lnWhere,lnRelRow,lnRelCol
lnWhere = 0
lnRelRow = 0
lnRelCol = 0
This.oGrid.GridHitTest(nXCoord, nYCoord, @lnWhere, @lnRelRow, @lnRelCol)
DO CASE
CASE lnWhere = 1 && column Header
CASE lnWhere = 3 && Cell
This.oGrid.ActivateCell(lnRelRow,lnRelCol)
CASE lnWhere = 17 && scrollbar
OTHERWISE
* nothing from hittest
This.oGrid.When()
ENDCASE
I am using here a very obscure VFP command method of the grid - GridHitTest. Basically you pass in some variables by refrence and they get filled by the method. Check out the help on this.
Basically we need to know where the grid received the "hit". Once we have that we activate that cell as in the code above.
You will find some Idiosyncracy with this control but that cannot be helped.
So to achieve this effect it is as simple as dropping the control on your grid, setting a few properties and voila a grid with a background image when
UsePicture = .T.
when UsePicture = .F. we get a gradient.
One more thing I want to mention here. If you select the nColour1 and nColour2 properties you get a button to select the colours, just like other VFP colour properties. This is achieved by _memberdata and some extra code as can be see from the following image: As an added bonus here's how to do this with _memberdata.
st1\:*{behavior:url(#ieooui) }
Download the GDI+x classes from VFPX as you need them for this.
Download the class from the attachment link below. There is a sample form which uses the Customer table in the testdata database - c:\vfp9\Samples\Data\Customer.dbf. You need to resolve that to where you have installed VFP. Also you will have to resolve the locatuion of where you store gdiplus.vcx
Run the sample form, then change the usepicture property and play around with the colours.
Unfortunately because of the amount of junk mail being generated from the weblog I have switched off comments. Please post your comments, if any, at www.foxite.com