I want to make the button widget seem 'flat'.

When I use the button widget, it appears like this. How do I make it look flatter, like this?

And how do I make the edges not be rounded?

I want to make the button widget seem 'flat'. When I use the button widget, it appears like [this](https://imgur.com/a/k0mPhjz). How do I make it look flatter, like [this](https://imgur.com/a/0iA87Uy)? And how do I make the edges not be rounded?
edited Sep 9 '18 at 12:32 pm

You mean the gradient effect?

The way I found was to change a line in the source code. In this file, change the line 315 from:

graph.gradual_rectangle(r, from, to, true);

To:

graph.rectangle(r, true, to);

Before and After:
5dcb4fe328fed.png                 5dcb4fe381094.png

You mean the gradient effect? The way I found was to change a line in the source code. In [this](https://github.com/cnjinhao/nana/blob/master/source/gui/widgets/button.cpp) file, change the line 315 from: ``` cpp graph.gradual_rectangle(r, from, to, true); ``` To: ```` graph.rectangle(r, true, to); ```` Before and After: ![5dcb4fe328fed.png](serve/attachment&path=5dcb4fe328fed.png)                 ![5dcb4fe381094.png](serve/attachment&path=5dcb4fe381094.png)
edited Nov 13 at 12:37 am

@formigoni You're replying to a year-old post. smile

That being said, the proper way to do it is to draw the frame and bg yourself:

class btn_bg : public nana::element::element_interface
{
public:
    bool draw(nana::paint::graphics &g, const nana::color&, const nana::color&, const nana::rectangle &r, nana::element_state state) override
    {
        // draw the background
        if(state != nana::element_state::pressed)
            g.rectangle(true, static_cast<nana::color_rgb>(0xe1e1e1));
        else g.rectangle(true, static_cast<nana::color_rgb>(0xf4f4f4));

        // draw the frame
        g.rectangle(r, false, static_cast<nana::color_rgb>(0xadadad));

        return true;
    }
};

And to set the custom draw function:

// nana::button btn;
btn.set_bground(btn_bg());
@formigoni You're replying to a year-old post. :) That being said, the proper way to do it is to draw the frame and bg yourself: ```` class btn_bg : public nana::element::element_interface { public: bool draw(nana::paint::graphics &g, const nana::color&, const nana::color&, const nana::rectangle &r, nana::element_state state) override { // draw the background if(state != nana::element_state::pressed) g.rectangle(true, static_cast<nana::color_rgb>(0xe1e1e1)); else g.rectangle(true, static_cast<nana::color_rgb>(0xf4f4f4)); // draw the frame g.rectangle(r, false, static_cast<nana::color_rgb>(0xadadad)); return true; } }; ```` And to set the custom draw function: ```` // nana::button btn; btn.set_bground(btn_bg()); ````

@Error Flynn Thank you! Just started using the library, I'm still trying to figure it out the basics.

@Error Flynn Thank you! Just started using the library, I'm still trying to figure it out the basics.
edited Nov 16 at 8:33 pm
41
views
3
replies
2
followers
live preview
enter atleast 10 characters
WARNING: You mentioned %MENTIONS%, but they cannot see this message and will not be notified
Saving...
Saved
All posts under this topic will be deleted ?
Pending draft ... Click to resume editing
Discard draft