Shaped/rounded button resources Topic is solved

If you are using the main C++ distribution of wxWidgets, Feel free to ask any question related to wxWidgets development here. This means questions regarding to C++ and wxWidgets, not compile problems.
Post Reply
USB3pt0
Earned a small fee
Earned a small fee
Posts: 18
Joined: Mon May 04, 2020 3:03 pm

Shaped/rounded button resources

Post by USB3pt0 »

Hi everyone.

I'm looking into changing wxButtons in my application under MSW to have rounded edges. Right now they're perfectly rectangular and have no shading.

I'm working with Visual Studio 2019 Community Edition.

I've tried setting the Resources.rc to include wx.rc, but it changes nothing. Same goes with a manifest file in the exe directory.

Doing a cursory search on the forums for rounded or shaped buttons seems to bring up a lot of dead links for old libraries like wxSkin.

Could anyone point me to some modern resources or tutorials to get shaped or rounded buttons working?

For reference, here's what mine look like:
wxbutton.PNG
wxbutton.PNG (438 Bytes) Viewed 1663 times
and use this code to generate them

Code: Select all

button = new wxButton(this, buttonID, buttonText, wxDefaultPosition, ButtonSize);
where ButtonSize is a macro for giving it one of several predefined sizes. Note that with wxDefaultSize the result is the same.
User avatar
doublemax
Moderator
Moderator
Posts: 19116
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Shaped/rounded button resources

Post by doublemax »

wxWidgets uses native controls where ever possible and that's how a button looks under Windows 10 :)

There is no skinning support in wxWidgets to change the look of native controls. If you only need a custom button, you could create a custom control: https://wiki.wxwidgets.org/Painting_your_custom_control

There also have been users that use commercial skinning engines together with wxWidgets, e.g. https://codejock.com/products/skinframework/
Use the source, Luke!
USB3pt0
Earned a small fee
Earned a small fee
Posts: 18
Joined: Mon May 04, 2020 3:03 pm

Re: Shaped/rounded button resources

Post by USB3pt0 »

Thanks, that custom control is exactly what I need. The buttons are still a little flat looking but I might end up just making them borderless and designing buttons in GIMP to use in their place.

One last thing; the events. With that example on the wxWidgets wiki, how would I wire a button to do something different?

Like if I had two buttons and two dialogs they could bring up, do I just put like

Code: Select all

EVT_BUTTON(ID_BUTTON_1, MyClass::OnButton1)
EVT_BUTTON(ID_BUTTON_2, MyClass::OnButton2)
or do I need to catch the EVT_ON_LEFT_DOWN?

Edit: Also, is there a way to center the text like a normal wxButton?
User avatar
doublemax
Moderator
Moderator
Posts: 19116
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Shaped/rounded button resources

Post by doublemax »

One last thing; the events. With that example on the wxWidgets wiki, how would I wire a button to do something different?
I would suggest to make the custom button generate the same events as a standard button, so you can switch between them without changing anything in the event handling code.

E.g.

Code: Select all

void wxCustomButton::mouseReleased(wxMouseEvent& event)
{
    pressedDown = false;
    paintNow();
    
    wxCommandEvent evt(wxEVT_COMMAND_BUTTON_CLICKED, GetId());
    evt.SetEventObject(this);
    HandleWindowEvent(evt);
}
Edit: Also, is there a way to center the text like a normal wxButton?
In the rendering code, use wxDC::DrawLabel instead of just DrawText(). It gives you more options.
https://docs.wxwidgets.org/trunk/classw ... 042a870152
Use the source, Luke!
USB3pt0
Earned a small fee
Earned a small fee
Posts: 18
Joined: Mon May 04, 2020 3:03 pm

Re: Shaped/rounded button resources

Post by USB3pt0 »

I dunno how I managed to gloss over DrawLabel when looking at the reference docs, but I did.

Thank you for all the help.
USB3pt0
Earned a small fee
Earned a small fee
Posts: 18
Joined: Mon May 04, 2020 3:03 pm

Re: Shaped/rounded button resources

Post by USB3pt0 »

Actually, I have one last little question.

When I make the panel with DrawRoundedRectangle, there's a bit of background around the edges in a rectangular shape.

I had been hiding it by making it the same color as the application background, but that doesn't look very good when a button hovers over a different part of the application.

Is there a way to get rid of the background, maybe (and I have very little graphics knowledge) using a bitmap mask?

edit: now that I think of it, they're in dialogs, so I need to look into a transparent dialog background, too. Or putting them into something else that can be made invisible...though I want the ShowModal function. hrm.
Post Reply