class bground

Coordinator
May 3, 2014 at 5:08 PM
Edited May 3, 2014 at 5:17 PM
There is a new element for customizing the background of the widgets, and Nana provides a class bground to implement a picture background with an image file or a graphics object.

SAMPLE A - Setting the background for a button

First of all, we need to prepare an image file for the background.
Image
The image is vertically splitted into 6 parts, and each parts indicates a state of a widget.
Now, let's start the demo program.
#include <nana/gui/wvl.hpp>
#include <nana/gui/widgets/button.hpp>

int main()
{
    using namespace nana::gui;

    form fm;

    //Define a background for a button.
    element::bground bground;

    //Load the BMP file
    //The second parameter is passed by true to indicate that each state aligns vertically.
    //The third parameter specifies the valid area of picture. It uses whole picture when the width or height of the valid area is zero.
    bground.image(L"bground.6states.bmp", true, {});

    //Defaultly the button will stretch the whole background of state to fit the widget,
    //but it's easy to make the border deformation occurred. Now we need to specified the pixels
    //of 4 borders, and these border areas will not be deformed when stretching.
    bground.stretch_parts(4, 4, 4, 4);  //left, top, right, bottom

    //Create the button
    button btn(fm, nana::rectangle(10, 10, 200, 30));

    //Set the bground object.
    btn.set_bground(bground);

    fm.show();
    exec();
}
The bground defines the stretch parts, the number of pixels of each border is determinated by the image.
Image
Find the different after removing the line of code that defines the stretch parts.

The result of SAMPLE A
Image

If the image file contains the states that less than 6 states, we need to tell the bground object which states are provided by the image.
For example, the image only contains normal, hovered, pressed and disabled states.
//Specify the states that the image file contains.
bground.states({element_state::normal, element_state::hovered, element_state::pressed});

//The focus_normal state is replaced by normal state. E.g. The button displays normal state when the button gets the focus.
bground.join(element_state::normal, element_state::focus_normal);
bground.join(element_state::hovered, element_state::focus_hovered);
SAMPLE B - Setting a bground for all buttons

We can set a default bground object, and all buttons automatically load the bground object to render.
int main()
{
    using namespace nana::gui;

    form fm;

    //Define a background for a button.
    element::bground bground;

    bground.image(L"bground.6states.bmp", true, {});
    bground.stretch_parts(4, 4, 4, 4);

    //All buttons defaultly load the bground called "button".
    //So, set the custom bground for the "button", and all buttons will
    //load the custom bground object.
    element::set_bground("button", bground);

    //Create the buttons, and these two buttons load the custom bground automatically
    button btn(fm, nana::rectangle(10, 10, 200, 30));
    button btn2(fm, nana::rectangle(10, 60, 50, 20));

    fm.show();
    exec();
}
SAMPLE C - Setting a bground for some of buttons

In most situation, only set the bground for a group of buttons, not for all buttons. We can create a custom bground and give a custom name, then create buttons to load the specified bground.
int main()
{
    using namespace nana::gui;

    form fm;

    element::bground bground;
    //Config the bground...

    //Specify a new name and set the custom bground.
    element::set_bground("button_xxx", bground);

    //Create the buttons, and these two buttons load the custom bground automatically
    button btn(fm, nana::rectangle(10, 10, 200, 30));

    //Load the custom bground through the name.
    btn.set_bground("button_xxx");

    fm.show();
    exec();
}