| Subject | Re: WIN 11 Borderless Buttons with Rounded Corners |
| From | Mervyn Bick <invalid@invalid.invalid> |
| Date | Tue, 21 Mar 2023 17:51:55 +0200 |
| Newsgroups | dbase.getting-started |
| Attachment(s) | round_corner_button.cc, test_round_corner_button.wfm |
On 2023/03/21 10:15, michael wrote: > Hi Guys, > > Ok, I will give you greater detail in what I am trying to do. Here is a history and request in point form, .... > 3. I need to take it up a notch, so launching a new brand, website, social media campaign to mirrow the new demographics and current rounded windows style. See pic 2. this is where I am trying to get to and its a design of where we need to be in the current market. In the past I have "borrowed" code from Marc van den Berghen to create circular pushbuttons. This used CreateEllipticRgn() from the Windows32 API. CreateRoundRectRgn() from the API creates a rectangular region with rounded corners, which can be altered to suit, but I haven't (yet :-) ) managed to get this to work properly. The attached custom pushbutton comes close but it uses CreateEllipticRgn() and relies on a dBASE shape object to provide the line round the pushbutton. The rounding of the corners is unfortunately not adjustable. The custom control uses an onOpen event handler internally. If your existing pushbuttons use an onOpen event handler it will be necessary to insert a call to the custom control's onOpen event handler before any other code. It is easy enough to write a little program that will add the set procedure line immediately after a form's class definition and then replace 'new PUSHBUTTON(this)' with 'new ROUND_CORNER_BUTTON(this)'. The custom control requires the form metric to be set to pixels. The easiest way is to open each form in the IDE, change the metric and then save. Acceptable for a few form but a PITA if there are many forms. Again, it's not a problem to change top, left, width and height values in a program but the factors to apply depend on the original metric. Mervyn. | |
/* Filename: Round_Corner_Button.cc Date: 2023-03-21 Author: Mervyn Bick Description: Round_Corner_Button is a pushbutton based on an idea (and code) "borrowed" from Marc van den Berghen's article "The Form Factory" in issue 21 of the dBulletin. https://www.jpmartel.com/bulletin.htm The custom control should be used on a form where the metric property is set to pixels. In the designer the pushbutton will present as a square. Resize as appropriate keeping the height and width about the same. When the form opens the pushbutton will set its width to match the height. This ensures any text remains centered. If it is necessary to assign an event handler to the onOpen event the onOpen event in the custom class must be executed before any other code. function ROUNDBUTTON1_onOpen() roundbutton::onOpen() // Other code return In theory, CreateRoundRectRgn() from the Windows32 API should create the required shape. This function allows the rounding of the corners to be set as required. Unfortunately I have not managed to implement this (yet) so I've used CreateEllipticRgn() combined with a dBASE shape object. The dBASE shape object does not allow the rounding of the corners to be adjusted. */ class Round_Corner_Button( parentObj ) of PushButton( parentObj ) custom with (this) onOpen = class::ONOPEN metric = 6 // Pixels height = 65.0 width = 65.0 fontsize = 15 text = 'PB' systemtheme := false endwith function onopen local hrgn1 if this.width <> this.height this.width = this.height endif if type("SetWindowRgn") # "FP" extern CINT SetWindowRgn(CHANDLE, CHANDLE, CLOGICAL) user32 endif if type("CreateRoundRectRgn") # "FP" extern chandle CreateRoundRectRgn(cint,cint,cint,cint,cint,cint) gdi32 endif if type("CreateEllipticRgn") # "FP" extern chandle CreateEllipticRgn(cint,cint,cint,cint) gdi32 endif x1 = this.left y1 = this.top x2 = this.left+this.width y2 = this.top+this.height // hrgn1=CreateRoundRectRgn(x1,y1,x2,y2,1,1) hrgn1=CreateEllipticRgn(this.width-5,5,5,this.width-5) setwindowrgn(this.hwnd,hrgn1,true) class::addring() return function addRing this.outline = new shape(this.parent) this.outline.shapestyle := 4 this.outline.colorNormal := this.colorNormal this.outline.top = this.top this.outline.left = this.left this.outline.width = this.width this.outline.height = this.height this.outline.penwidth := 1 return endclass | |
clear ** END HEADER -- do not remove this line // // Generated on 2023-03-21 // parameter bModal local f f = new test_round_corner_buttonForm() if (bModal) f.mdi = false // ensure not MDI f.readModal() else f.open() endif class test_round_corner_buttonForm of FORM set procedure to round_corner_button.cc additive with (this) metric = 6 // Pixels height = 499.0 left = 115.0 top = 5.0 width = 570.0 text = "Test round corner buttons" systemTheme = true endwith this.ROUND_CORNER_BUTTON1 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON1) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 276.0 top = 58.0 width = 65.0 text = "1" endwith this.ROUND_CORNER_BUTTON2 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON2) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 353.0 top = 58.0 width = 65.0 text = "2" endwith this.ROUND_CORNER_BUTTON3 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON3) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 430.0 top = 58.0 width = 65.0 text = "3" endwith this.ROUND_CORNER_BUTTON4 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON4) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 276.0 top = 131.0 width = 65.0 text = "4" endwith this.ROUND_CORNER_BUTTON5 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON5) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 353.0 top = 131.0 width = 65.0 text = "5" endwith this.ROUND_CORNER_BUTTON6 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON6) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 430.0 top = 131.0 width = 65.0 text = "6" endwith this.ROUND_CORNER_BUTTON7 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON7) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 276.0 top = 204.0 width = 65.0 text = "7" endwith this.ROUND_CORNER_BUTTON8 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON8) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 353.0 top = 204.0 width = 65.0 text = "8" endwith this.ROUND_CORNER_BUTTON9 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON9) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 430.0 top = 204.0 width = 65.0 text = "9" endwith this.ROUND_CORNER_BUTTON10 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON10) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 276.0 top = 278.0 width = 65.0 text = "X" endwith this.ROUND_CORNER_BUTTON11 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON11) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 353.0 top = 278.0 width = 65.0 text = "0" endwith this.ROUND_CORNER_BUTTON12 = new ROUND_CORNER_BUTTON(this) with (this.ROUND_CORNER_BUTTON12) onClick = class::ROUND_CORNER_BUTTON_ONCLICK height = 65.0 left = 430.0 top = 278.0 width = 65.0 text = "Enter" colorNormal = "BtnText/0x966ff2" endwith function ROUND_CORNER_BUTTON_onClick() ? this.text+' clicked' return endclass | |