Solved

look alike the XPButton background

Posted on 2004-09-24
34
364 Views
Last Modified: 2010-04-05
Can somebody to provide me a code that will let me to have a bitmap what will look alike the XPButton background ? A 3D effect .

I wish to use it to get a panel that look alike ( and not only a panel :)   )
0
Comment
Question by:ginsonic
  • 15
  • 10
  • 9
34 Comments
 
LVL 5

Expert Comment

by:Hypoviax
ID: 12149277
You can download this component to make your control look like XP controls, you can also download a skin builder to create your own skins for every control etc

www.link-rank.com/

Regards,

Hypoviax
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12149527
I don't wish to use 3th vcl, I need just the algorithm to create a bmp that look alike XP button background.
0
 
LVL 5

Expert Comment

by:Hypoviax
ID: 12152352
What do you mean by "XP button background"? Do you mean a button that looks like the Windows XP button style? Or do you just want a bitmap for the XP button style?

Regards,

Hypoviax
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12153459
just the bitmap
0
 
LVL 5

Expert Comment

by:Hypoviax
ID: 12153510
In that case you could download the skinbuilder from the site i beforementioned and then open an XP skin (you may have to download the component to get the skins). Once you have the skin open. Select the button control, select the bitmap property section then click the little button with three dots (...) then press export and edit. Then you will have the bitmap for the button!

Hope this helps,

Hypoviax
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12155131
I need the algorithm ( the code ) to get alike bitmap. I wish to use it to background my components.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 12155767
hello ginsonic , , From what you said, I think you do NOT want code like this -

uses UxThemes;

procedure TForm1.XP_PanelClick(Sender: TObject);
var
hTheme, panDC: THandle;
aRect: TRect;
begin
hTheme := OpenThemeData(Handle, 'Button');
panDC := GetDC(XP_Panel.Handle);
aRect := XP_Panel.ClientRect;
InflateRect(aRect,1,1); // not needed if NO Panel Borders
DrawThemeBackground(hTheme, panDC, BP_PUSHBUTTON,CBS_NORMAL, aRect, @aRect);
ReleaseDC(XP_Panel.Handle, panDC);
CloseThemeData(hTheme);
end;

- - - - -  - - - - - - - - - - - - -  - - - - - - - - -

but you want some sort of graphics methods (bitmap scanline, , or DC gradientFill ) to get a XP buttom type of background?
would you know how many color inputs you would need for that? ? I guess 2 colors, one for the single line border and one color for the body, or maybe a light and dark max colors for the body?
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12157461
I WISH TO GET A SIMPLE BMP ALIKE XP BUTTON TO USE IT INSIDE MY VCL. NO BORDER. NO BEVEL, NO THEMES (wish to use outside XP, too).
Just the algorithm that paint alike images.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 12162775
All I can think of is to get a blank button (button with no text on it) image from a XP program into a Bitmap and use that. . . sorry I can not think of something else.
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12166456
:(
0
 
LVL 5

Expert Comment

by:Hypoviax
ID: 12166545
I still don't really understand what you're saying. Do you want a button that will look like an XP button?

Hypoviax
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12169288
NONONONONONONONONONO.............................. and another one NO.

I wish a BITMAP that look alike the XP button background. A gradient bitmat that start with a color ... and end with another.
On XP this gradient get a 3D look to button.
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12169294
Upps, for 'bitmat' read bitmap.
0
 
LVL 5

Expert Comment

by:Hypoviax
ID: 12174443
Ok, i understand now. From what i gather from previous posts you dont just want the file. If i am correct you want an algorithm to extract this bitmap. If i am correct please confirm.

Regards,

Hypoviax
0
 
LVL 5

Expert Comment

by:Hypoviax
ID: 12174459
If you do just want the file then my post re getting the skin builder and exporting the button would work. If this is the case and you do not want the bevel etc then a little photoshop would do the trick. Alas, i do not think this is what you meant.
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12176705
Where I wrong? I think I'm clear enough in my request.
I wish the Delphi algorithm code that will paint in my VCL canvas a background that look alike a XP button  background.

I can't use a bitmap file because this have a fixed width and heigth, but my VCL can have any dimension.
0
 
LVL 5

Expert Comment

by:Hypoviax
ID: 12176845
Ok, i understand at last! i'll try. Sorry about my lack of comprehension of what you were asking

Regards,

Hypoviax
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 33

Expert Comment

by:Slick812
ID: 12183573
I may can do something that - sort of can get close to  - what the XP system does for the 3D gradient effect, but it is not an easy thing, maybe tommorow I can find time to get something
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12184618
Thanks, I will wait :)
0
 
LVL 5

Expert Comment

by:Hypoviax
ID: 12184953
I've had a look at how VCLSkin does their graphics for their controls. They allow you to specify a bitmap. In fact, as the controls are resized the bitmap for the control is also resized - and it looks good. I know an algorithm for writing a gradient but this may not be what you want:

var x,r,g,b:integer      ;  //To change the colours you just have to change the formula
begin  //this prints a black and white gradient
For X:=0 to 255 do
  begin
   r:=x;
   b:=x-10  ;
   g:=x-20;
   canvas.pen.Color:=rgb(r,g,b);
   canvas.Pen.Width:=200;
   canvas.LineTo(500,x+50);
end;

Regards,

Hypoviax
0
 
LVL 33

Expert Comment

by:Slick812
ID: 12185929
  for Hypoviax  - - -
there is an API function called  GradientFill( )  which is handy to use for a gradient filll of a rectangle, however in most of the Windows.pas source code for Delphi versions, they INCORRECTLY  define the  TTriVertex  record, so inorder to use it you will need to use a correct version of the TTriVertex record

windows.pas may define  GradientFill as -

function GradientFill(DC: HDC; var p2: TTriVertex; p3: ULONG; p4: Pointer; p5, p6: ULONG): BOOL; stdcall;


here is a button click that give an example of useing it


procedure TForm1.sbut_OtherGradientClick(Sender: TObject);
Type
  TcVertex = packed Record
    x, y: Integer;
    Red, Green, Blue, Alpha: Word;
  end;
  {this TVertex record has the correct Types in it}

var
aryVertex: array[0..2] of TcVertex;
gRect: TGradientRect;
begin
aryVertex[0].x := Width-140;
aryVertex[0].y := 6;
{the RGB Color values used here are unlike any that I have used before
as WORD values and Not Byte values, but you can just add 2 zeros
to the usual Hex color values for Byte and get the WORD values, ,
OR you can use the usual Byte values (0..255) and then shift left 8 (shl 8) }
aryVertex[0].Red := $FFFF {255 shl 8};
aryVertex[0].Green := $2200;
aryVertex[0].Blue := $AA shl 8;
aryVertex[0].Alpha := 0;

aryVertex[1].x := Width-14;
aryVertex[1].y := 200;
aryVertex[1].Red := 0;
aryVertex[1].Green := $FFAA;
aryVertex[1].Blue := $99 shl 8 {9900};
aryVertex[1].Alpha :=0;

aryVertex[2].x := Width-140;
aryVertex[2].y := 300;
aryVertex[2].Red := $9900;
aryVertex[2].Green := 0;
aryVertex[2].Blue := $FF shl 8 {6600};
aryVertex[2].Alpha := 0;

gRect.UpperLeft := 0;
    {gRect is there to tell which index of TriVertex in the array to use
     for the gradient drawing, ONLY 2 array indexs are used, you define which 2
     indexs in the TGradientRect, , zero and one are used in the first draw}
gRect.LowerRight := 1;
GradientFill(Canvas.Handle, PTriVertex(@aryVertex[0])^, 3, @gRect, 1, GRADIENT_FILL_RECT_V);

// gRect.UpperLeft := 1;
gRect.UpperLeft := 2;
    {index one and two are used in the second draw, I have reversed the order
     from 1 and 2, , to 2 and 1, but strangly this does NOT effect the final display}
// gRect.LowerRight := 2;
gRect.LowerRight := 1;
GradientFill(Canvas.Handle, PTriVertex(@aryVertex[0])^, 3, @gRect, 1, GRADIENT_FILL_RECT_V);
                                //  You MUST typecast the  aryVertex[0] to a  PTriVerte
end;
0
 
LVL 5

Expert Comment

by:Hypoviax
ID: 12186989
Very interesting Slick812, i've never seen that function before. My little example does a similar sort of thing but it is a bit harder to control than your example. Generally my code can only do two colours, it is capable of more but the formulas need to be altered.

I hope that both my code and Slick812s can assist in your problem ginsonic

Regards,

Hypoviax
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12189827
Nope :(
Yours codes make just a gradient fx. The XP create a cylinder illusion ( gradient too I admit, but with a different algorithm).
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 12194052
tmy last post has nothing to do with a XP button, it was just for Hypoviax. . .


Like Hypoviax, I did NOT understand what you wanted or what inputs or set up variables you wanted, I got enough info to try and code for this, but you gave very little info and I am still not sure what you may need. . . I have analized several XP button bitmaps for different size buttons, pixel by pixel in a graphics Editor. However, you gave instructions to NOT have any border, BUT the XP buttons do have a border, which gives them a Rounded Corner Look. . . I Did NOT place any border on this in my code like you said to.

The DrawXPButton function below will draw the gradient part of the XP button, and to me it looks very much like what my XP version draws for a button (without any border). . .I have three input variables for the DrawXPButton function, the first is the Canvas to draw on, which can be any delphi canvas. The next is the SizeRect a TRect which will tell this function Where to draw the Button, if you want it to use the entire Canvas, then set the SizeRect Top and Left to Zero, Right to the Width of Bitmap (o control) and the Bottom to the Height of Bimap. The BaseColor is the TColor that all of the drawing colors are taken from, I really had NO IDEA where to get this color from, so I just used the Center Pixel from the XP button bitmaps that I analized.


here is code for this DrawXPButton( ) function. . . and a Button click to show how to use it-


function DrawXPButton(Canvas1: TCanvas; SizeRect: TRect; BaseColor: TColor): Boolean;
Type
  TcVertex = packed Record
    x, y: Integer;
    Red, Green, Blue, Alpha: Word;
  end;

function MakeByte(sig: Single): Byte;
begin
if sig > MaxByte then Result := MaxByte
  else
  if sig < 0 then Result := 0
  else
  Result := Round(sig);
end;

function MakeWord(sig: Single): Word;
begin
Result := MakeByte(sig) shl 8;
end;

function MakeColor(sR, sG, sB: Single): TColor;
begin
Result := RGB(MakeByte(sR), MakeByte(sG), MakeByte(sB));
end;

var
dColor, opColor: TColor;
bR, bG, bB: Byte;
aryVertex: array[0..3] of TcVertex;
gRect: TGradientRect;
PosV: Integer;
begin
Result := False;
{I restricted it to 10 pixels or larger, because I did NOT know how to
reduce all of the edge and grad draw for small Rectangles}
if (not Assigned(Canvas1)) or (SizeRect.Right - SizeRect.Left < 10) or
   (SizeRect.Bottom - SizeRect.Top < 10) then Exit;
bR := GetRValue(BaseColor);
bG := GetGValue(BaseColor);
bB := GetBValue(BaseColor);

opColor := Canvas1.Pen.Color;
try
  Canvas1.Pen.Color := MakeColor(bR * 1.0475, bG * 1.0475, bB * 1.065);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top); // Top Line

  Canvas1.Pen.Color := MakeColor(bR * 1.0452, bG * 1.0452, bB * 1.061);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+1);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top+1); // Top line + One

  Canvas1.Pen.Color := MakeColor(bR * 1.037, bG * 1.037, bB * 1.049);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+2);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top+2); // Top + two

  Canvas1.Pen.Color := MakeColor(bR * 1.0288, bG * 1.0288, bB * 1.041);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+3);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top+3); // Top + three

  aryVertex[0].x := SizeRect.Left+2;
  aryVertex[0].y := SizeRect.Top+4;
  aryVertex[0].Red := MakeWord(bR * 1.0206);
  aryVertex[0].Green := MakeWord(bG * 1.0206);
  aryVertex[0].Blue := MakeWord(bB * 1.031);
  aryVertex[0].Alpha := 0;

  PosV := ((SizeRect.Bottom - SizeRect.Top) div 2)+SizeRect.Top;
  aryVertex[1].x := SizeRect.Right-2;
  aryVertex[1].y := PosV;
  aryVertex[1].Red := MakeWord(bR + 1.0);
  aryVertex[1].Green := MakeWord(bG + 1.0);
  aryVertex[1].Blue := MakeWord(bB + 1.0);
  aryVertex[1].Alpha := 0;

  aryVertex[2].x := SizeRect.Left+2;
  aryVertex[2].y := PosV;
  aryVertex[2].Red := bR shl 8;
  aryVertex[2].Green := bG shl 8;
  aryVertex[2].Blue := bB shl 8;
  aryVertex[2].Alpha := 0;

  aryVertex[3].x := SizeRect.Right -2;
  aryVertex[3].y := SizeRect.Bottom - 3;
  aryVertex[3].Red := MakeWord(bR * 0.9876);
  aryVertex[3].Green := MakeWord(bG * 0.9876);
  aryVertex[3].Blue := MakeWord(bB * 0.979);
  aryVertex[3].Alpha := 0;

  gRect.UpperLeft := 0;
  gRect.LowerRight := 1;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 2, @gRect,
               1, GRADIENT_FILL_RECT_V);

  gRect.UpperLeft := 2;
  gRect.LowerRight := 3;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 4, @gRect,
               1, GRADIENT_FILL_RECT_V);

  Canvas1.Pen.Color := MakeColor(bR * 0.97, bG * 0.97, bB * 0.964);
  Canvas1.MoveTo(SizeRect.Left+2,SizeRect.Bottom-3);
  Canvas1.LineTo(SizeRect.Right-3, SizeRect.Bottom-3); // Bottom up two

  Canvas1.Pen.Color := MakeColor(bR * 0.93, bG * 0.9176, bB * 0.895);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Bottom-2);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Bottom-2); // Bottom up One

  Canvas1.Pen.Color := MakeColor(bR * 0.8806, bG * 0.8555, bB * 0.8242);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Bottom-1);  // BOTTOM Line
  Canvas1.LineTo(SizeRect.Right, SizeRect.Bottom-1);

  Canvas1.Pen.Color := MakeColor(bR * 1.0411, bG * 1.0411, bB * 1.055);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top +4);  // Left Line
  Canvas1.LineTo(SizeRect.Left, SizeRect.Bottom-2);

  Canvas1.Pen.Color := MakeColor(bR * 1.0247, bG * 1.0247, bB * 1.031);
  Canvas1.MoveTo(SizeRect.Left+1,SizeRect.Top +4);  // Left Line + One
  Canvas1.LineTo(SizeRect.Left+1, SizeRect.Bottom-2);

  Canvas1.Pen.Color := MakeColor(bR * 0.9547, bG * 0.9382, bB * 0.935);
  Canvas1.MoveTo(SizeRect.Right-1,SizeRect.Top +2);  // Right Line
  Canvas1.LineTo(SizeRect.Right-1, SizeRect.Bottom-2);

  Canvas1.Pen.Color := MakeColor(bR * 0.9794, bG * 0.9763, bB * 0.9665);
  Canvas1.MoveTo(SizeRect.Right-2,SizeRect.Top +3);  // Right Line + One
  Canvas1.LineTo(SizeRect.Right-2, SizeRect.Bottom-2);

  Canvas1.Pen.Color := MakeColor(bR * 0.93, bG * 0.9176, bB * 0.895);
  Canvas1.MoveTo(SizeRect.Right-3,SizeRect.Bottom-3);  // BOTTOM Line
  Canvas1.LineTo(SizeRect.Right-1, SizeRect.Bottom-3);
  finally
  Canvas1.Pen.Color := opColor;
  end;
Result := True;
end;


procedure TForm1.sbut_MakeXPButClick(Sender: TObject);
var
Rect1: TRect;
bColor: TColor;
Bmp1: TBitmap;
begin
bColor := RGB(243,243,239); //Standard Color for default XP Blue Theme
//bColor := RGB(240,230,200);
Bmp1 := TBitmap.Create;
try
  Bmp1.Canvas.Brush.Color := 0;
  Bmp1.Width := 66;
  Bmp1.Height := 24;
  Rect1 := Rect(0,0,Bmp1.Width,Bmp1.Height);
  if not DrawXPButton(Bmp1.Canvas, Rect1, bColor) then
    ShowMessage('Rect to Small');
  Canvas.Draw(630, 8, Bmp1);
  finally
  FreeAndNil(Bmp1);
  end;

end;


 - - - - - - - -  - - - - - - - - - - - - - - - - -  - - -
I do know that the Standard Color for the XP Button changes with the "Theme" that is used, but I have no Idea how to get this color.
If you are creating a TGraphicControl Component, then you can pass that Control's Canvas as the Canvas1 in DrawXPButton, if your TGraphicControl has several buttons on it, then you can set the SizeRect to the Rectangle on the Canvas where you want the button to be drawn. .
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12201921
Isn't what I wish, but intend to close this topic. Thanks to all for support.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 12255880
I recently downloaded a McAfee virus update for my win 98 test machine, and now the McAfee program windows have XP look alike buttons in win 98. . . So I changed my code to make a XP button that looks like theirs (but theirs does NOT match the Real XP buttons),
Also, I changed my input parameters, I placed the BaseColor as a Constant, an added a "BlendColor" parameter, which is the color for what the button is placed on, ( I used the 3D face (button) color in my example),  You can change the BaseColor if you want to. I have Added a black border so this button actually looks like a XP button, but it took alot of work. . . . I just thought I would post the code, if you want to look at it, or ignore it , if you have moved on to something else. . . . If I were doing a XP button in win 2000 or 98, This is the code I would use -




function DrawXPButton(Canvas1: TCanvas; SizeRect: TRect; BlendColor: TColor): Boolean;
const
BaseColor: TColor = $EAFAFA;

Type
  TcVertex = packed Record
    x, y: Integer;
    Red, Green, Blue, Alpha: Word;
  end;

function MakeByte(sig: Single): Byte;
begin
if sig > MaxByte then Result := MaxByte
  else
  if sig < 0 then Result := 0
  else
  Result := Round(sig);
end;

function MakeWord(sig: Single): Word;
begin
Result := MakeByte(sig) shl 8;
end;

function MakeColor(sR, sG, sB: Single): TColor;
begin
Result := RGB(MakeByte(sR), MakeByte(sG), MakeByte(sB));
end;

var
dColor, opColor: TColor;
oBrhSyt: TBrushStyle;
bR, bG, bB: Byte;
aryVertex: array[0..2] of TcVertex;
gRect: TGradientRect;
PosV: Integer;
begin
Result := False;
//I restricted it to 10 pixels or larger, because I did NOT know how to
//reduce all of the edge and grad draw for small Rectangles
if (not Assigned(Canvas1)) or (SizeRect.Right - SizeRect.Left < 10) or
   (SizeRect.Bottom - SizeRect.Top < 10) then Exit;
bR := GetRValue(BaseColor);
bG := GetGValue(BaseColor);
bB := GetBValue(BaseColor);

opColor := Canvas1.Pen.Color;
oBrhSyt := Canvas1.Brush.Style;
InflateRect(SizeRect, -1, -1);
try
  Canvas1.Pen.Color := MakeColor(bR * 1.02, bG * 1.02, bB * 1.08);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top); // Top Line

  Canvas1.Pen.Color := MakeColor(bR * 1.008, bG * 1.008, bB * 1.04);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+1);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top+1); // Top line + One

  Canvas1.Pen.Color := BaseColor;
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+2);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top+2); // Top + two

  aryVertex[0].x := SizeRect.Left;
  aryVertex[0].y := SizeRect.Top+3;
  aryVertex[0].Red := MakeWord(bR * 1.018);
  aryVertex[0].Green := MakeWord(bG * 1.018);
  aryVertex[0].Blue := MakeWord(bB * 1.057);
  aryVertex[0].Alpha := 0;

  PosV := ((SizeRect.Bottom - SizeRect.Top) div 2)+SizeRect.Top;
  aryVertex[1].x := SizeRect.Right-1;
  aryVertex[1].y := PosV;
  aryVertex[1].Red := MakeWord(bR + 2.0);
  aryVertex[1].Green := MakeWord(bG + 2.0);
  aryVertex[1].Blue := MakeWord(bB + 2.0);
  aryVertex[1].Alpha := 0;

  aryVertex[2].x := SizeRect.Left+1;
  aryVertex[2].y := SizeRect.Bottom - 3;
  aryVertex[2].Red := MakeWord(bR * 0.88);
  aryVertex[2].Green := MakeWord(bG * 0.88);
  aryVertex[2].Blue := MakeWord(bB * 0.862);
  aryVertex[2].Alpha := 0;

  gRect.UpperLeft := 0;
  gRect.LowerRight := 1;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 2, @gRect,
               1, GRADIENT_FILL_RECT_V);

  aryVertex[1].Red := bR shl 8;
  aryVertex[1].Green := bG shl 8;
  aryVertex[1].Blue := bB shl 8;

  gRect.UpperLeft := 1;
  gRect.LowerRight := 2;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 3, @gRect,
               1, GRADIENT_FILL_RECT_V);

  Canvas1.Pen.Color := MakeColor(bR * 0.8607, bG * 0.8607, bB * 0.843);
  Canvas1.MoveTo(SizeRect.Left+1,SizeRect.Bottom-3);
  Canvas1.LineTo(SizeRect.Right-1, SizeRect.Bottom-3); // Bottom up two

  Canvas1.Pen.Color := MakeColor(bR * 0.8059, bG * 0.8059, bB * 0.7892);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Bottom-2);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Bottom-2); // Bottom up One

  Canvas1.Pen.Color := MakeColor(bR * 0.7637, bG * 0.7637, bB * 0.7668);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Bottom-1);  // BOTTOM Line
  Canvas1.LineTo(SizeRect.Right, SizeRect.Bottom-1);

  Canvas1.Pen.Color := MakeColor(bR * 0.98, bG * 0.9, bB * 0.9999);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top +4);  // Left Line
  Canvas1.LineTo(SizeRect.Left, SizeRect.Bottom-2);

  Canvas1.Pen.Color := MakeColor(bR * 1.0247, bG * 1.0247, bB * 1.031);
  Canvas1.MoveTo(SizeRect.Left+1,SizeRect.Top +4);  // Left Line + One
  Canvas1.LineTo(SizeRect.Left+1, SizeRect.Bottom div 2);

  aryVertex[0].x := SizeRect.Right;
  aryVertex[0].y := SizeRect.Top{+1};
  aryVertex[0].Red := MakeWord(bR * 0.86);
  aryVertex[0].Green := MakeWord(bG * 0.86);
  aryVertex[0].Blue := MakeWord(bB * 0.82);

  aryVertex[1].x := SizeRect.Right-1;
  aryVertex[1].y := SizeRect.Bottom - 2;
  aryVertex[1].Red := MakeWord(bR * 0.58);
  aryVertex[1].Green := MakeWord(bG * 0.58);
  aryVertex[1].Blue := MakeWord(bB * 0.56);

  gRect.UpperLeft := 0;
  gRect.LowerRight := 1;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 2, @gRect,
               1, GRADIENT_FILL_RECT_V); // Right line

  aryVertex[0].x := SizeRect.Right-2;
  aryVertex[0].y := SizeRect.Top+2;
  aryVertex[0].Red := MakeWord(bR * 0.95);
  aryVertex[0].Green := MakeWord(bG * 0.95);
  aryVertex[0].Blue := MakeWord(bB * 0.94);

  aryVertex[1].x := SizeRect.Right-1;
  aryVertex[1].y := SizeRect.Bottom - 2;
  aryVertex[1].Red := MakeWord(bR * 0.76);
  aryVertex[1].Green := MakeWord(bG * 0.76);
  aryVertex[1].Blue := MakeWord(bB * 0.66);

  gRect.UpperLeft := 0;
  gRect.LowerRight := 1;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 2, @gRect,
               1, GRADIENT_FILL_RECT_V); // Right Line + one

  Canvas1.Pen.Color := BlendColor;
  Canvas1.Brush.Style := bsClear;
  Canvas1.Rectangle(0,0, SizeRect.Right+1, SizeRect.Bottom +1);

  Canvas1.Pen.Color := MakeColor(bR * 0.542, bG * 0.542, bB * 0.52);
  Canvas1.MoveTo(0,3);
  Canvas1.LineTo(3, 0);

  Canvas1.MoveTo(SizeRect.Right-3,-1);
  Canvas1.LineTo(SizeRect.Right,4);

  Canvas1.Pen.Color := MakeColor(bR * 0.576, bG * 0.576, bB * 0.576);
  Canvas1.MoveTo(-1,SizeRect.Bottom -3);
  Canvas1.LineTo(4,SizeRect.Bottom);

  Canvas1.Pen.Color := MakeColor(bR * 0.384, bG * 0.384, bB * 0.384);
  Canvas1.MoveTo(SizeRect.Right-3,SizeRect.Bottom);
  Canvas1.LineTo(SizeRect.Right,SizeRect.Bottom-3);

  Canvas1.Pen.Color := $090909;
  Canvas1.RoundRect(0,0, SizeRect.Right+1, SizeRect.Bottom +1, 6,6);
  finally
  Canvas1.Pen.Color := opColor;
  Canvas1.Brush.Style := oBrhSyt;
  end;
Result := True;
end;


procedure TForm1.sbut_MakeXPButClick(Sender: TObject);
var
Rect1: TRect;
Bmp1: TBitmap;
begin
Bmp1 := TBitmap.Create;
try
  Bmp1.Canvas.Brush.Color := clRed;
  Bmp1.Width := 80;
  Bmp1.Height := 25;
  Rect1 := Rect(0,0,Bmp1.Width,Bmp1.Height);
  if not DrawXPButton(Bmp1.Canvas, Rect1, GetSysColor(COLOR_3DFACE)) then
    ShowMessage('Rect to Small');
  Canvas.Draw(630, 8, Bmp1);
  finally
  FreeAndNil(Bmp1);
  end;

end;

I think this does a better button look than the XP system
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12256069
This is it ! Perfect bitmap !
Thanks Slick812  that you don't forgot me :) !
0
 
LVL 33

Expert Comment

by:Slick812
ID: 12261503
you are welcome
0
 
LVL 33

Expert Comment

by:Slick812
ID: 12264654
oh, sorry I did not test it enough, I need to replace the recangle code near end with this



  InflateRect(SizeRect, 1, 1);
  Canvas1.Pen.Color := BlendColor;
  Canvas1.Brush.Style := bsClear;
  Canvas1.Rectangle(SizeRect.Left,SizeRect.Top, SizeRect.Right, SizeRect.Bottom);

  Canvas1.Pen.Color := MakeColor(bR * 0.542, bG * 0.542, bB * 0.52);
  Canvas1.MoveTo(0,3);
  Canvas1.LineTo(3, 0);

  Canvas1.MoveTo(SizeRect.Right-4,-1);
  Canvas1.LineTo(SizeRect.Right-1,4);

  Canvas1.Pen.Color := MakeColor(bR * 0.576, bG * 0.576, bB * 0.576);
  Canvas1.MoveTo(-1,SizeRect.Bottom -4);
  Canvas1.LineTo(4,SizeRect.Bottom-1);

  Canvas1.Pen.Color := MakeColor(bR * 0.384, bG * 0.384, bB * 0.384);
  Canvas1.MoveTo(SizeRect.Right-4,SizeRect.Bottom-1);
  Canvas1.LineTo(SizeRect.Right-1,SizeRect.Bottom-4);

  Canvas1.Pen.Color := $090909;
  Canvas1.RoundRect(SizeRect.Left,SizeRect.Top, SizeRect.Right, SizeRect.Bottom, 6,6);
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12265243
Slick812,

Can you izolate the code that create the cylinder fx ? I mean without border and left and right lines.
Wish just a rectangle with top, middle and bottom lines, not left and right. I try to do that but GradientFill use smaller lines for middle land :)
0
 
LVL 33

Expert Comment

by:Slick812
ID: 12268592
I tried to mark the "Lines" as Top Line, Bottom Line, Left Line, , , in my code above, don't have time to test, but this seems to be it -




  Canvas1.Pen.Color := MakeColor(bR * 1.02, bG * 1.02, bB * 1.08);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top); // Top Line

  Canvas1.Pen.Color := MakeColor(bR * 1.008, bG * 1.008, bB * 1.04);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+1);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top+1); // Top line + One

  Canvas1.Pen.Color := BaseColor;
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+2);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top+2); // Top + two

  aryVertex[0].x := SizeRect.Left;
  aryVertex[0].y := SizeRect.Top+3;
  aryVertex[0].Red := MakeWord(bR * 1.018);
  aryVertex[0].Green := MakeWord(bG * 1.018);
  aryVertex[0].Blue := MakeWord(bB * 1.057);
  aryVertex[0].Alpha := 0;

  PosV := ((SizeRect.Bottom - SizeRect.Top) div 2)+SizeRect.Top;
  aryVertex[1].x := SizeRect.Right-1;
  aryVertex[1].y := PosV;
  aryVertex[1].Red := MakeWord(bR + 2.0);
  aryVertex[1].Green := MakeWord(bG + 2.0);
  aryVertex[1].Blue := MakeWord(bB + 2.0);
  aryVertex[1].Alpha := 0;

  aryVertex[2].x := SizeRect.Left+1;
  aryVertex[2].y := SizeRect.Bottom - 3;
  aryVertex[2].Red := MakeWord(bR * 0.88);
  aryVertex[2].Green := MakeWord(bG * 0.88);
  aryVertex[2].Blue := MakeWord(bB * 0.862);
  aryVertex[2].Alpha := 0;

  gRect.UpperLeft := 0;
  gRect.LowerRight := 1;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 2, @gRect,
               1, GRADIENT_FILL_RECT_V);

  aryVertex[1].Red := bR shl 8;
  aryVertex[1].Green := bG shl 8;
  aryVertex[1].Blue := bB shl 8;

  gRect.UpperLeft := 1;
  gRect.LowerRight := 2;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 3, @gRect,
               1, GRADIENT_FILL_RECT_V);

  Canvas1.Pen.Color := MakeColor(bR * 0.8607, bG * 0.8607, bB * 0.843);
  Canvas1.MoveTo(SizeRect.Left+1,SizeRect.Bottom-3);
  Canvas1.LineTo(SizeRect.Right-1, SizeRect.Bottom-3); // Bottom up two

  Canvas1.Pen.Color := MakeColor(bR * 0.8059, bG * 0.8059, bB * 0.7892);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Bottom-2);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Bottom-2); // Bottom up One

  Canvas1.Pen.Color := MakeColor(bR * 0.7637, bG * 0.7637, bB * 0.7668);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Bottom-1);  // BOTTOM Line
  Canvas1.LineTo(SizeRect.Right, SizeRect.Bottom-1);
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12269247
The middle line still to short. Set

Bmp1.Canvas.Brush.Color := clRed;

to see what I mean.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 12280507
sad face :-(
I thoiught I was finished with this?

anyway, here is some code to fill up a rect without any border, I guess
you refer to the middle line? I guess you mean the gradient fill?
the aryVertex[?].x and aryVertex[?].y define the two corners of a gradient fill
aryVertex[0].x := SizeRect.Left;
  aryVertex[0].y := SizeRect.Top+3;

aryVertex[1].x := SizeRect.Right; // remove the -1
  aryVertex[1].y := PosV;


I just commented out some code, I do not have time to clean it up, seems to work -


function DrawXPButton(Canvas1: TCanvas; SizeRect: TRect; BlendColor: TColor): Boolean;
const
BaseColor: TColor = $EAFAFA;

Type
  TcVertex = packed Record
    x, y: Integer;
    Red, Green, Blue, Alpha: Word;
  end;

function MakeByte(sig: Single): Byte;
begin
if sig > MaxByte then Result := MaxByte
  else
  if sig < 0 then Result := 0
  else
  Result := Round(sig);
end;

function MakeWord(sig: Single): Word;
begin
Result := MakeByte(sig) shl 8;
end;

function MakeColor(sR, sG, sB: Single): TColor;
begin
Result := RGB(MakeByte(sR), MakeByte(sG), MakeByte(sB));
end;

var
dColor, opColor: TColor;
oBrhSyt: TBrushStyle;
bR, bG, bB: Byte;
aryVertex: array[0..2] of TcVertex;
gRect: TGradientRect;
PosV: Integer;
begin
Result := False;
//I restricted it to 10 pixels or larger, because I did NOT know how to
//reduce all of the edge and grad draw for small Rectangles
if (not Assigned(Canvas1)) or (SizeRect.Right - SizeRect.Left < 10) or
   (SizeRect.Bottom - SizeRect.Top < 10) then Exit;
bR := GetRValue(BaseColor);
bG := GetGValue(BaseColor);
bB := GetBValue(BaseColor);

opColor := Canvas1.Pen.Color;
oBrhSyt := Canvas1.Brush.Style;
//InflateRect(SizeRect, -1, -1);
try
  Canvas1.Pen.Color := MakeColor(bR * 1.02, bG * 1.02, bB * 1.08);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top); // Top Line

  Canvas1.Pen.Color := MakeColor(bR * 1.008, bG * 1.008, bB * 1.04);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+1);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top+1); // Top line + One

  Canvas1.Pen.Color := BaseColor;
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+2);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Top+2); // Top + two

  aryVertex[0].x := SizeRect.Left;
  aryVertex[0].y := SizeRect.Top+3;
  aryVertex[0].Red := MakeWord(bR * 1.018);
  aryVertex[0].Green := MakeWord(bG * 1.018);
  aryVertex[0].Blue := MakeWord(bB * 1.057);
  aryVertex[0].Alpha := 0;

  PosV := ((SizeRect.Bottom - SizeRect.Top) div 2)+SizeRect.Top;
  aryVertex[1].x := SizeRect.Right{-1};
  aryVertex[1].y := PosV;
  aryVertex[1].Red := MakeWord(bR + 2.0);
  aryVertex[1].Green := MakeWord(bG + 2.0);
  aryVertex[1].Blue := MakeWord(bB + 2.0);
  aryVertex[1].Alpha := 0;

  aryVertex[2].x := SizeRect.Left{+1};
  aryVertex[2].y := SizeRect.Bottom - 3;
  aryVertex[2].Red := MakeWord(bR * 0.88);
  aryVertex[2].Green := MakeWord(bG * 0.88);
  aryVertex[2].Blue := MakeWord(bB * 0.862);
  aryVertex[2].Alpha := 0;

  gRect.UpperLeft := 0;
  gRect.LowerRight := 1;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 2, @gRect,
               1, GRADIENT_FILL_RECT_V);

  aryVertex[1].Red := bR shl 8;
  aryVertex[1].Green := bG shl 8;
  aryVertex[1].Blue := bB shl 8;

  gRect.UpperLeft := 1;
  gRect.LowerRight := 2;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 3, @gRect,
               1, GRADIENT_FILL_RECT_V);

  Canvas1.Pen.Color := MakeColor(bR * 0.8607, bG * 0.8607, bB * 0.843);
  Canvas1.MoveTo(SizeRect.Left{+1},SizeRect.Bottom-3);
  Canvas1.LineTo(SizeRect.Right{-1}, SizeRect.Bottom-3); // Bottom up two

  Canvas1.Pen.Color := MakeColor(bR * 0.8059, bG * 0.8059, bB * 0.7892);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Bottom-2);
  Canvas1.LineTo(SizeRect.Right, SizeRect.Bottom-2); // Bottom up One

  Canvas1.Pen.Color := MakeColor(bR * 0.7637, bG * 0.7637, bB * 0.7668);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Bottom-1);  // BOTTOM Line
  Canvas1.LineTo(SizeRect.Right, SizeRect.Bottom-1);

  {Canvas1.Pen.Color := MakeColor(bR * 0.98, bG * 0.9, bB * 0.9999);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top +4);  // Left Line
  Canvas1.LineTo(SizeRect.Left, SizeRect.Bottom-2);

  Canvas1.Pen.Color := MakeColor(bR * 1.0247, bG * 1.0247, bB * 1.031);
  Canvas1.MoveTo(SizeRect.Left+1,SizeRect.Top +4);  // Left Line + One
  Canvas1.LineTo(SizeRect.Left+1, SizeRect.Bottom-5); //SizeRect.Top +((SizeRect.Bottom-SizeRect.Top) div 2)

  aryVertex[0].x := SizeRect.Right;
  aryVertex[0].y := SizeRect.Top; //+1;
  aryVertex[0].Red := MakeWord(bR * 0.86);
  aryVertex[0].Green := MakeWord(bG * 0.86);
  aryVertex[0].Blue := MakeWord(bB * 0.82);

  aryVertex[1].x := SizeRect.Right-1;
  aryVertex[1].y := SizeRect.Bottom - 2;
  aryVertex[1].Red := MakeWord(bR * 0.58);
  aryVertex[1].Green := MakeWord(bG * 0.58);
  aryVertex[1].Blue := MakeWord(bB * 0.56);

  gRect.UpperLeft := 0;
  gRect.LowerRight := 1;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 2, @gRect,
               1, GRADIENT_FILL_RECT_V); // Right line

  aryVertex[0].x := SizeRect.Right-2;
  aryVertex[0].y := SizeRect.Top+2;
  aryVertex[0].Red := MakeWord(bR * 0.95);
  aryVertex[0].Green := MakeWord(bG * 0.95);
  aryVertex[0].Blue := MakeWord(bB * 0.94);

  aryVertex[1].x := SizeRect.Right-1;
  aryVertex[1].y := SizeRect.Bottom - 2;
  aryVertex[1].Red := MakeWord(bR * 0.76);
  aryVertex[1].Green := MakeWord(bG * 0.76);
  aryVertex[1].Blue := MakeWord(bB * 0.66);

  gRect.UpperLeft := 0;
  gRect.LowerRight := 1;
  GradientFill(Canvas1.Handle, PTriVertex(@aryVertex[0])^, 2, @gRect,
               1, GRADIENT_FILL_RECT_V); // Right Line + one

  InflateRect(SizeRect, 1, 1);
  Canvas1.Pen.Color := BlendColor;
  Canvas1.Brush.Style := bsClear;
  Canvas1.Rectangle(SizeRect.Left,SizeRect.Top, SizeRect.Right, SizeRect.Bottom);

  Canvas1.Pen.Color := MakeColor(bR * 0.542, bG * 0.542, bB * 0.52);
  //Canvas1.Pen.Color := clRed;
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Top+3);
  Canvas1.LineTo(SizeRect.Left+3, SizeRect.Top);

  Canvas1.MoveTo(SizeRect.Right-4,SizeRect.Top);
  Canvas1.LineTo(SizeRect.Right-1,SizeRect.Top+4);

  Canvas1.Pen.Color := MakeColor(bR * 0.576, bG * 0.576, bB * 0.576);
  Canvas1.MoveTo(SizeRect.Left,SizeRect.Bottom -4);
  Canvas1.LineTo(SizeRect.Left+4,SizeRect.Bottom-1);

  Canvas1.Pen.Color := MakeColor(bR * 0.384, bG * 0.384, bB * 0.384);
  Canvas1.MoveTo(SizeRect.Right-4,SizeRect.Bottom-1);
  Canvas1.LineTo(SizeRect.Right-1,SizeRect.Bottom-4);

  Canvas1.Pen.Color := $090909;
  Canvas1.RoundRect(SizeRect.Left,SizeRect.Top, SizeRect.Right, SizeRect.Bottom, 6,6); }
  finally
  Canvas1.Pen.Color := opColor;
  Canvas1.Brush.Style := oBrhSyt;
  end;
Result := True;
end;
0
 
LVL 9

Author Comment

by:ginsonic
ID: 12283819
Now I finished. :) Thanks!
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

In this tutorial I will show you how to use the Windows Speech API in Delphi. I will only cover basic functions such as text to speech and controlling the speed of the speech. SAPI Installation First you need to install the SAPI type library, th…
Introduction I have seen many questions in this Delphi topic area where queries in threads are needed or suggested. I know bumped into a similar need. This article will address some of the concepts when dealing with a multithreaded delphi database…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now