[Wiki] BGRAButton Gallery, cool buttons!

[BioHazard]

Hm the author of this package has done so much and I am already using that buttons and panels but is not he willing to code some freeware skining package like shareware lazskin ?

I have lack of skining editobxes and windows borders and buttons and so on in my life lazarus...

: P

[Dibo]

I think for skinning is better to use fpGUI which have nice support for drawing own themes.

[lainz]

This is an example for BGRAImageButton, you can use your own drawing procedure with BGRABitmap or the graphic library you want and then put the drawing in a BGRAImageButton.

First add a BGRAImageButton, then go OnCreate event and add this code:

Code: [Select]

procedure TForm1.FormCreate(Sender: TObject);
  procedure DrawImageInside(ABtn:TBGRAImageButton);
  var
    image,textimage: TBGRABitmap;
  begin
    // Shape
    image:= TBGRABitmap.Create(ABtn.Width,ABtn.Height*4);
    image.FillRoundRectAntialias(0,0,BGRAImageButton1.Width-1,ABtn.Height-1,20,20,BGRA(0,128,255,255),[rrTopRightSquare,rrBottomLeftSquare]);
    image.FillRoundRectAntialias(0,ABtn.Height,ABtn.Width-1,ABtn.Height*2-1,20,20,BGRA(128,128,255,255),[rrTopRightSquare,rrBottomLeftSquare]);
    image.FillRoundRectAntialias(0,ABtn.Height*2,ABtn.Width-1,ABtn.Height*3-1,20,20,BGRA(0,64,128,255),[rrTopRightSquare,rrBottomLeftSquare]);
    image.FillRoundRectAntialias(0,ABtn.Height*3,ABtn.Width-1,ABtn.Height*4-1,20,20,BGRA(100,100,100,255),[rrTopRightSquare,rrBottomLeftSquare]);
    // Text
    textimage:= TextShadow(ABtn.Width,ABtn.Height,'Button',Round(ABtn.Height div 2),BGRAWhite,BGRABlack,1,1,1);
    image.PutImage(0,0,textimage,dmDrawWithTransparency);
    image.PutImage(0,ABtn.Height,textimage,dmDrawWithTransparency);
    image.PutImage(1,ABtn.Height*2+1,textimage,dmDrawWithTransparency);
    image.PutImage(0,ABtn.Height*3,textimage,dmDrawWithTransparency);
    textimage.Free;
    // Draw Image
    ABtn.Bitmap.LoadFromBitmapHandles(image.Bitmap.Handle,0);
    image.Free;
  end;
begin
  DrawImageInside(BGRAImageButton1);
end;
Basically this creates the Bitmap according to provided BGRAImageButton width / height. Then draws a rounded shape with different colors in the exact position for each state (normal, enter, pressed, disabled). Finally put some text for each state and set the image in the BGRAImageButton.

The result is attached 'customshape.png'.

Remember you can use external images, like photoshop buttons.

[lainz]

I've updated Windows 7 ToolBar with Button. Now using BGRAVirtualScreen:

http://wiki.lazarus.freepascal.org/BGRAButton_Gallery#Windows_7_Explorer_ToolBar

Enjoy!

[lainz]

Attached you can see how you can use Windows7 ToolBar example (this only works fine in OS's that support Transparent property of TToolBar).

* This can be aligned at Left, Top, Right & Bottom.
* All bgrabuttons you put inside the ToolBar will be changed to Win7 ToolBar style.

[circular]

That's nice. It would be cool to make a component out of it. By the way, it could be more like the original with the light effect, which is not available yet on BGRAButtons.

[lainz]

That's nice. It would be cool to make a component out of it. By the way, it could be more like the original with the light effect, which is not available yet on BGRAButtons.

It seems to be difficult to add the light effect.

[circular]

I've added light for buttons, but when I commit, it does not seem to be uploaded, so here is the modified file :

[lainz]

I've added light for buttons, but when I commit, it does not seem to be uploaded, so here is the modified file :

Thanks I will update now.

Done.

To update Git repository using TortoiseGit:

* Change the files, right clic the folder and chose "Git commit -> 'master'...".
* Then go to "Tortoise Git > Push..."
* In the push dialog select 'Arbitrary url' and put your git username for bgracontrols:

Code: [Select]

ssh://YOURUSERNAME@bgracontrols.git.sourceforge.net/gitroot/bgracontrols/bgracontrols* When a dialog promt put your sf password.