# Button Series Control Class

* [Brief Introduction of Button Series Control](#brief-introduction-of-button-series-control)
* [Button Class Renderer](#button-class-renderer)
* [`mButton`](#mbutton)
  * [Style of `mButton`](#style-of-mbutton)
  * [Property of `mButton`](#property-of-mbutton)
  * [Event of `mButton`](#event-of-mbutton)
  * [Renderer of `mButton`](#renderer-of-mbutton)
  * [`mButton` Skin Renderer](#mbutton-skin-renderer)
  * [Programming Example of `mButton`](#programming-example-of-mbutton)
* [`mCheckButton`](#mcheckbutton)
  * [Property of `mCheckButton`](#property-of-mcheckbutton)
  * [Event of `mCheckButton`](#event-of-mcheckbutton)
  * [Renderers of `mCheckButton`](#renderers-of-mcheckbutton)
  * [Programming Example of `mCheckbutton`](#programming-example-of-mcheckbutton)
* [`mRadioButton`](#mradiobutton)
  * [Property of `mRadiobutton`](#property-of-mradiobutton)
  * [Event of `mRadiobutton`](#event-of-mradiobutton)
  * [Renderers of `mRadiobutton`](#renderers-of-mradiobutton)
  * [Programming Example of `mRadiobutton`](#programming-example-of-mradiobutton)
* [`mMenuButton`](#mmenubutton)
  * [Property of `mMenuButton`](#property-of-mmenubutton)
  * [Event of `mMenuButton`](#event-of-mmenubutton)
  * [Programming Example of `mMenuButton`](#programming-example-of-mmenubutton)
* [`mColorButton`](#mcolorbutton)
  * [Property of `mColorButton`](#property-of-mcolorbutton)
  * [Event of `mColorButton`](#event-of-mcolorbutton)
  * [Programming Example of `mColorButton`](#programming-example-of-mcolorbutton)
* [Appendix:A](#appendixa)
  * [`GrandientMode`](#grandientmode)
  * [`ButtonState`](#buttonstate)
  * [`ButtonCheckState`](#buttoncheckstate)

## Brief Introduction of Button Series Control

Button is an essential control of human computer interaction in the user interface, and all the human computer interaction interfaces include button. In the design of mGNCS, button use conditions under different use environments are fully considered, and different properties and interfaces etc. are provided for the convenience of user componentization development. Buttons in mGNCS reconstruct built-in button control in MiniGUI 3.0 and conduct big adjustment. Two button types are added, greatly strengthening button control. Buttons in `MiniGNCS` include five types, common button, check box, single selection button, menu button and color selection button. Users can select or switch status of buttons through keyboard or mouse. Input of users will make buttons generate notification message, and applications can send messages to the buttons to change the status of the buttons. Each button type corresponds to one class, which contains style, property, event, method and renderer. Functions of the controls provided in mGNCS are usually stronger than the functions of the controls used on `PC`, providing more configurable information, and renderer editing is added.

In this document, button class and the properties in it will be introduced in detail, making it convenient for the users to further understand the details of buttons, thus buttons can be used more flexibly.

Class hierarchical relation related to buttons:

* [`mWidget`](../miniguiprogguidepart2chapter04#mwidget)
  * [`mButton`](#mbutton)
    * [`mCheckButton`](#mcheckbutton)
    * [`mRadioButton`](#mradiobutton)
    * [`mMenuButton`](#mmenubutton) (mPopMenuMgr is used)
    * [`mColorButton`](#mcolorbutton)

Control creating methods:

* Automatic creation: through interface designer in miniStudio, corresponding button control is dragged. miniStudio will automatically create control and provide visual control configuration, and at the same time, creation codes are generated automatically.
* Manual generation: according to mGNCS control creation process, through programming, corresponding control window class ID is imported and control is generated. Manual programming sets control property and event handling.

## Button Class Renderer

mGNCS provides four types of renderers and defines renderer property setting set. The four types of renderers correspond to four kinds of renderer property setting set. For button class control, the four kinds of renderers defines which renderer property can be set in the button control and which effect can it be set to. mGNCS provides default renderer property. Of course, users can change these properties, thus different effects can be set. That is to say, users can change different renderer properties and create numerous renderer examples based on the four types of renderers.

## `mButton`

* _Control window class_: `NCSCTRL_BUTTON`
* _Control English name_: Push Button
* _Brief introduction_: It is button of press down mode. On the button, the simple ones can be represented by literals and can be marked by images, and they can be displayed by mixture of images and literals.

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-c693dc9aca8acb143553770b435bdfa513bfbc87%2Fpush_button.png?alt=media)

To understand programming of buttons, firstly, it is necessary to understand the status of buttons. In mGNCS, the status of buttons is divided into four kinds, refer to appendix definition and note: `ButtonState` [ButtonState](#buttonstate)

### Style of `mButton`

Style of buttons includes two categories:

* Firstly, it is defining button `CHECK` status, which is press down status, and setting is carried out through Checkable/Autocheck/ThreeDCheck in the property;
* Secondly, it is setting button panel as displaying text or image or coexistence if image and text, which is done mainly through options in Label Type in property. Text by default, while layout of images and texts is set through other properties.

`mButton` is the foundation class of all buttons, which implements `PushButton` by default. Buttons of all other types are derived from it.

It is inherited from the style of [mWidget](miniguiprogguidepart2chapter04).

| _Style ID_                   | _miniStudio property name_  | _Comments_                                                                                                                                                         |
| ---------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `NCSS_BUTTON_CHECKABLE`      | Checkable                   | Set if the button can carry out `CHECKED` status conversion; if `FALSE`, `CHECK` status conversion is not carried out, and autocheck and `ThreeDCheck` are invalid |
| `NCSS_BUTTON_AUTOCHECK`      | Autocheck                   | When `CHECKED` status conversion can be carried out, set if clicking can be carried out to automatically switch `CHECK` status                                     |
| `NCSS_BUTTON_3DCHECK`        | `ThreeDCheck`               | Set button `CHECK` status as three status (unchecked-halfchecked-checked) or two status (unchecked-checked) switch                                                 |
| `NCSS_BUTTON_IMAGE`          | `LabelType->Image`          | Image button style, the button is label literal mode in `LabelType` by default                                                                                     |
| `NCSS_BUTTON_IMAGELABEL`     | `LabelType->ImageLabel`     | Button of horizontally arranged image text                                                                                                                         |
| `NCSS_BUTTON_VERTIMAGELABEL` | `LabelType->VertImageLabel` | Button of vertically arranged image text                                                                                                                           |

### Property of `mButton`

It is inherited from the property of [mWidget](miniguiprogguidepart2chapter04).

| _Property ID name_               | _miniStudio property name_ | _Type_                                                                                                                                                   | _Permission_ | _Comments_                                                                                                                                                                                                                                                       |
| -------------------------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `NCSP_BUTTON_ALIGN`              | Align                      | [Alignment enumeration value](https://github.com/VincentWei/minigui-docs/blob/master/programming-guide/MStudioMGNCSV1dot0PGENAppC/README.md#AlignValues) | `RW`         | Content on the button (image or literal) is aligned with the button according to the set mode in horizontal direction                                                                                                                                            |
| `NCSP_BUTTON_VALIGN`             | `VAlign`                   | [Alignment enumeration value](https://github.com/VincentWei/minigui-docs/blob/master/programming-guide/MStudioMGNCSV1dot0PGENAppC/README.md#AlignValues) | `RW`         | Content on the button (image or literal) is aligned with the button according to the set mode in vertical direction, and the alignment value is top – 0, bottom – 1, center – 2                                                                                  |
| `NCSP_BUTTON_WORDWRAP`           | Wordwrap                   | int                                                                                                                                                      | `RW`         | Automatic wrap property of the literals on the button, when the single line length of the literal content is bigger than the control width, automatic wrap can be selected. `TRUE`: automatic wrap `FALSE`: single line, and the exceeding part is not displayed |
| `NCSP_BUTTON_IMAGE`              | Image                      | `PBITMAP`                                                                                                                                                | `RW`         | Image, corresponding to button property pbmp, which is image pointer, it must be valid when `NCSS_BUTTON_IMAGE` or `NCSS_BUTTON_IMAGELABEL` or `NCSS_BUTTON_VERTIMAGELABEL` is set                                                                               |
| `NCSP_BUTTON_CHECKSTATE`         | None                       | [mButtonCheckState](#buttoncheckstate)                                                                                                                   | `RW`         | Set or get check status, valid when `NCSS_BUTTON_CHECKABLE` is set, `NCS_BUTTON_HALFCHECKED` is regarded as valid value when `NCSS_BUTTON_3DCHECK` is set                                                                                                        |
| `NCSP_BUTTON_IMAGE_SIZE_PERCENT` | `ImageSizePercent`         | int                                                                                                                                                      | `RW`         | Under the style of coexistence of image and text, set proportion of image on the control (take value 15\~85, representing 15% to 85%), and the remaining is occupied by the text                                                                                 |
| `NCSP_BUTTON_GROUPID`            | `GroupID`                  | int                                                                                                                                                      | `RW`         | When there is `NCSS_BUTTON_CHECKABLE` style, ID of a `mButtonGroup` can be set to the window, it will automatically get a corresponding `mButtonGroup` object and set                                                                                            |
| `NCSP_BUTTON_GROUP`              | None                       | `mButtonGroup*`                                                                                                                                          | RW           | When there is `NCSS_BUTTON_CHECKABLE` style, set a `mButtonGroup` object pointer, and all the buttons adding to the group has the automatic switching ability of Radio style                                                                                     |

### Event of `mButton`

It is inherited from the event of [mWidget](miniguiprogguidepart2chapter04).

| _Event notification code_   | _Explanation_        | _Parameter_ |
| --------------------------- | -------------------- | ----------- |
| `NCSN_BUTTON_PUSHED`        | Key pressed down     |             |
| `NCSN_BUTTON_STATE_CHANGED` | After status changes | New status  |

Note, the control inherits `NCSN_WIDGET_CLICKED` event of the parent class.

### Renderer of `mButton`

_For the usage of renderer, see_ [_look and feel renderer_](miniguiprogguidepart2chapter03).

#### `mButton` Classic renderer

The basic style under classic renderer is as shown in the figure below:

Drawing of `mButton` Classic renderer is as below: for the drawing of non client area, please refer to the renderer of [mWidget](../miniguiprogguidepart2chapter04#mwidget).

| _Property ID_           | _Meaning_                                        | _miniStudio property name_ | _Value type_     | _Schematic diagram of the valid region_                                                                                                                                                                                                                       | _Value range_ |
| ----------------------- | ------------------------------------------------ | -------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `NCS_FGC_3DBODY`        | Text foreground color                            | `FgColor3DBody`            | `DWORD` (`ARGB`) | ![push-button-classic-fg3dcolor.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-b2d217bbfef5886011a9eef1647d325a6ad834cf%2Fpush-button-classic-fg3dcolor.png?alt=media) |               |
| `NCS_BGC_3DBODY`        | Background color                                 | `BgColor3DBody`            | `DWORD` (`ARGB`) | ![push-button-classic-bg3dcolor.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-8fd948ac02fee0581eb17fe362bff26cb811879a%2Fpush-button-classic-bg3dcolor.png?alt=media) |               |
| `NCS_FGC_DISABLED_ITEM` | Text foreground color when the window is invalid | `TextDisableColor`         | `DWORD` (`ARGB`) | \<img src=figures/push-button-classic-fgdisable.png" alt="push-button-classic-fgdisable.png"/>                                                                                                                                                                |               |
| `NCS_BGC_DISABLED_ITEM` | background color when the window is invalid      | `BgColorDisable`           | `DWORD` (`ARGB`) | \<img src=figures/push-button-classic-bgdisable.png" alt="push-button-classic-bgdisable.png"/>                                                                                                                                                                |               |

* High light effect: through enhancing the brightness of the background color (`NCS_BGC_3DBODY`), as the high light color
* check effect: implement through drawing invaginated border
* Three status Check effect: implement half selection through drawing high light color in the invaginated border

Schematic diagram:\


![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-7a881a5a7c543da22201b736ae2a41f5eb9d350c%2Fpush-button-classic-hilight-check-halfchk.png?alt=media)

### `mButton` Skin Renderer

Refer to [Appendix B: Specification for the Image Resources Used by Skin Renderer](../../appendix-specifications-for-minigui-developers/miniguiprogguideappendixb#mbutton).

#### `mButton` Fashion Renderer

For the drawing of non client area, please refer to the drawing of Fashion renderer of [mWidget](../miniguiprogguidepart2chapter04#mwidget).

| _Property ID_               | _Meaning_                                        | _miniStudio property name_ | _Value type_     | _Schematic diagram of the valid region_                                                                                                                                                                                                                             | _Value range_                  |
| --------------------------- | ------------------------------------------------ | -------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| `NCS_FGC_3DBODY`            | Text foreground color                            | `FgColor3DBody`            | `DWORD` (`ARGB`) | Same as Classic renderer                                                                                                                                                                                                                                            |                                |
| `NCS_FGC_DISABLED_ITEM`     | Text foreground color when the window is invalid | `TextDisableColor`         | `DWORD` (`ARGB`) | Same as Classic renderer                                                                                                                                                                                                                                            |                                |
| `NCS_BGC_3DBODY`            | Background color                                 | `BgColor3DBody`            | `DWORD` (`ARGB`) | ![push-button-fashion-bgcolor.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-6840b211e3b451995c34c7040af2871616a9a519%2Fpush-button-fashion-bgcolor.png?alt=media)           |                                |
| `NCS_BGC_DISABLED_ITEM`     | Text background color when the window is invalid | `BgColorDisable`           | `DWORD` (`ARGB`) | ![push-button-fashion-bgdisalbe.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-ff8730e0c22512b33463f43c75b08d9451235401%2Fpush-button-fashion-bgdisalbe.png?alt=media)       |                                |
| `NCS_MODE_BGC`              | Gradual change fill mode                         | `GradientMode`             | int              | ![push-button-fashion-gradientmode.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-46f0c31ad48214d0ba29aa974331c5dcded87fc3%2Fpush-button-fashion-gradientmode.png?alt=media) | [GradientMode](#grandientmode) |
| `NCS_METRICS_3DBODY_ROUNDX` | Window rectangle round corner X radius           | `RoundX`                   | int              |                                                                                                                                                                                                                                                                     | 0 to 1/2 of the window width   |
| `NCS_METRICS_3DBODY_ROUNDY` | Window rectangle round corner Y radius           | `RoundY`                   | int              |                                                                                                                                                                                                                                                                     | 0 to 1/2 of the window height  |

* Gradual change color: the gradual change color gives different brightness factor from the ground color (`NCS_BGC_3DBODY` or `NCS_BGC_DISABLED_ITEM`), and calculates the two objective colors. Gradually change from the center (ground color) to the two sides or top and bottom (highlighted color achieved through calculation)
* High light color: after the ground color is highlighted, the gradual change color calculates to obtain on the foundation of this
* Representing method of check status: after the ground color undergoes darkening processing, calculate the gradual change color
* Representing method of three status check: besides the method is the same as above in check status, in half selection status, use the window ground color (`NCS_BGC_WINDOW`) as the whole ground color to draw

Schematic diagram:\


![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-2b5a8970a8ae254a1a04f284446be661040ff2c9%2Fpush-button-fashion-hilight-check-halfchk.png?alt=media)

#### `mButton` Flat Renderer

For the drawing of non client area, please refer to the drawing of Flat renderer of [mWidget](../miniguiprogguidepart2chapter04#mwidget).

| _Property ID_               | _Meaning_                                        | _miniStudio property name_ | _Value type_     | _Schematic diagram of the valid region_ | _Value range_                 |
| --------------------------- | ------------------------------------------------ | -------------------------- | ---------------- | --------------------------------------- | ----------------------------- |
| `NCS_FGC_3DBODY`            | Text foreground color                            | `FgColor3DBody`            | `DWORD` (`ARGB`) | Same as Classic renderer                |                               |
| `NCS_FGC_DISABLED_ITEM`     | Text foreground color when the window is invalid | `TextDisableColor`         | `DWORD` (`ARGB`) | Same as Classic renderer                |                               |
| `NCS_BGC_3DBODY`            | background color                                 | `BgColor3DBody`            | `DWORD` (`ARGB`) | Same as Classic renderer                |                               |
| `NCS_METRICS_3DBODY_ROUNDX` | Window rectangle round corner X radius           | `RoundX`                   | int              |                                         | 0 to 1/2 of the window width  |
| `NCS_METRICS_3DBODY_ROUNDY` | Window rectangle round corner Y radius           | `RoundY`                   | int              |                                         | 0 to 1/2 of the window height |

* High light: draw small prompting symbols to implement around the control
* check status: draw lines at right-bottom edition, and compose inverted “L” realization
* check representing method of three status: in half selection status, draw lines at left-top, forming fell flat “L”

Schematic diagram:\


![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-3132a8f26de30373e3b0da4906692c09863f8625%2Fpush-button-flat-hilight-check-halfchk.png?alt=media)

### Programming Example of `mButton`

* Operation screen shot:\


![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-c693dc9aca8acb143553770b435bdfa513bfbc87%2Fpush_button.png?alt=media)

* This program uses Fashion renderer to create buttons of four different styles, which are common button, image button, Autocheck style button and three status button.
* Complete example code of common button:

**List 1** button.c

```cpp
/*
** button.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

#define ID_BTN  101
#define ID_BTN1 102
#define ID_BTN5 106
#define ID_BTN6 107
#define ID_BTN7 108
#define ID_BTN8 109

// START_OF_HANDLERS
static BITMAP bmp;
static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    //set image
//START_SET_IMAGE
    if(LoadBitmapFromFile(HDC_SCREEN, &bmp, "icon_button.png")!=0)
    {
        printf("cannot load image file \"icon_button.png\"\n");
    }

    mButton *mb1 = (mButton*)ncsGetChildObj(self->hwnd, ID_BTN1);

    if(mb1)
        _c(mb1)->setProperty(mb1, NCSP_BUTTON_IMAGE, (DWORD)&bmp);
//END_STE_IMAGE
    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
NCS_RDR_ELEMENT btn_rdr_elements[] =
{
    { NCS_MODE_USEFLAT, 1},
    { -1, 0 }
};
static NCS_RDR_INFO btn_rdr_info[] =
{
    {"fashion","fashion", btn_rdr_elements}
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
static NCS_WND_TEMPLATE _ctrl_templ[] = {
//START_DCL_DEF_PUSHBUTTON
    {
        NCSCTRL_BUTTON,
        ID_BTN,
        30, 30, 80, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_DEF_PUSHBUTTON
//START_DCL_IMAGEBUTTON
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 30, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_IMAGE,
        WS_EX_NONE,
        "Image",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_IMAGEBUTTON
//START_DCL_AUTOCHECKBTN
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        30, 80, 80, 25,
        WS_VISIBLE  | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE,
        WS_EX_NONE,
        "Auto button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_AUTOCHECKBTN
//START_DCL_3DAUTOCHECKBTN
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 80, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE \
            | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "3D button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_3DAUTOCHECKBTN
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_MAINWND,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Push Button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    MainWindowThreadCleanup(mydlg->hwnd);

    ncsUninitialize ();

    return 0;
}
```

* Define common button

```cpp
    {
        NCSCTRL_BUTTON,
        ID_BTN,
        30, 30, 80, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
```

* Define Image button, generally it is handled in `onCreate` event of the main window

```cpp
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 30, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_IMAGE,
        WS_EX_NONE,
        "Image",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
```

* Load and set Image

```cpp
    if(LoadBitmapFromFile(HDC_SCREEN, &bmp, "icon_button.png")!=0)
    {
        printf("cannot load image file \"icon_button.png\"\n");
    }

    mButton *mb1 = (mButton*)ncsGetChildObj(self->hwnd, ID_BTN1);

    if(mb1)
        _c(mb1)->setProperty(mb1, NCSP_BUTTON_IMAGE, (DWORD)&bmp);
```

* Define button of Autocheck style

```cpp
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        30, 80, 80, 25,
        WS_VISIBLE  | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE,
        WS_EX_NONE,
        "Auto button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
```

* Define button of three status check style

```cpp
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 80, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE \
            | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "3D button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
```

## `mCheckButton`

* _Control window class_: `NCSCTRL_CHECKBUTTON`
* _Control English name_: `CheckButton`
* _Brief introduction_: Check box button, mainly used on multi-selection occasion. The common pattern is a box, and the user checks or unchecks the box.

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-1b9af637585cf1336cac7d169b9a7e1bcea77eba%2Fcheck_button.png?alt=media)

### Property of `mCheckButton`

It is inherited from the property of `mButton`.

### Event of `mCheckButton`

It is inherited from the event of `mButton`.

### Renderers of `mCheckButton`

* For the usage of renderers, see [look and feel renderer](miniguiprogguidepart2chapter03)

#### `mCheckButton` Classic Renderer

* Drawing of renderer in the `mCheckButton` Classic text region is as below: for the drawing of non client area, please refer to the renderer of [mWidget](../miniguiprogguidepart2chapter04#mwidget).

| _Property ID_           | _Meaning_                                        | _miniStudio property name_ | _Value type_     | _Schematic diagram of the valid region_                                                                                                                                                                                                                             | _Value range_ |
| ----------------------- | ------------------------------------------------ | -------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `NCS_FGC_3DBODY`        | Text foreground color                            | `FgColor3DBody`            | `DWORD` (`ARGB`) | ![checkbutton\_classic\_fgc.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-7b9ae783804a1f0c2bb55fc66280608f3ce0b124%2Fcheckbutton_classic_fgc.png?alt=media)                 |               |
| `NCS_FGC_DISABLED_ITEM` | Text foreground color when the window is invalid | `TextDisableColor`         | `DWORD` (`ARGB`) | ![checkbutton\_classic\_textdisable.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-7a408a99a34f10fcb1d0c018980cf1c8ba19d6b8%2Fcheckbutton_classic_textdisable.png?alt=media) |               |

* Classic renderer of Check box fills and draws through loading image resource. (image resource is minigui-res by default, and installed in `/usr/local/share/minigui/res/bmp/classic_check_button.bmp`）by default
* Specification of image: the image is composed of eight parts from left to right, and each part is a square (13x13), corresponding to eight statuses of checkbutton:
* 0\~3: common, highlight, pressed down and banned statuses when not selected
* 4\~7: common, highlight, pressed down and banned statuses when selected
* If the image is bigger than the drawing region, the image will be reduced to draw; if the image is smaller or equal to the drawing region, the image actual size will be adopted to draw
* Example

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-694ffbdc2543be00676500dc322f4b4e1ed3d6e2%2Fclassic_check_button.png?alt=media)

#### `mCheckButton` Skin Renderer

Refer to [Appendix B : Specification for the Image Resource Used by Skin Renderer](https://github.com/VincentWei/minigui-docs/blob/master/programming-guide/MStudioMGNCSV1dot0PGENAppB/README.md#mButton)

#### `mCheckButton` Fashion Renderer

* Drawing of `mCheckButton` Fashion text region renderer is as follows: for the drawing of non client area, please refer to the renderer of [mWidget](../miniguiprogguidepart2chapter04#mwidget).

| _Property ID_           | _Meaning_                                        | _miniStudio property name_ | _Value type_     | _Schematic diagram of the valid region_                                                                                                                                                                                                               | _Value range_ |
| ----------------------- | ------------------------------------------------ | -------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `NCS_FGC_3DBODY`        | Text foreground color                            | `FgColor3DBody`            | `DWORD` (`ARGB`) | ![checkbtn\_fashion\_fgc.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-5b9637951baca905c9ca545d4b97f630843f9d89%2Fcheckbtn_fashion_fgc.png?alt=media)         |               |
| `NCS_FGC_DISABLED_ITEM` | Text foreground color when the window is invalid | `TextDisableColor`         | `DWORD` (`ARGB`) | ![checkbtn\_fashion\_disable.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-52a4ab70339a369d7318ed06807849b37dc7b574%2Fcheckbtn_fashion_disable.png?alt=media) |               |

* Fashion renderer of Check box fills and draws through loading image resource. (Note: the image resource is `minigui-res` by default, and installed in `/usr/local/share/minigui/res/bmp/fashion_check_btn.bmp` by default)
* Specification of the image: the image is composed of eight parts from top to bottom, and each part is a square (13x13), corresponding to eight statuses of checkbutton:
* 0\~3: common, highlight, pressed down and banned status when not selected
* 4\~7: Common, highlight, pressed down and banned status when selected
* If the image is bigger than the drawing region, the image will be reduced to draw; if the image is smaller or equal to the drawing region, the image actual size will be adopted to draw
* Example

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-73ac3d43dcf144b833a507227436e86aa9e9203a%2Ffashion_check_btn.png?alt=media)

#### `mCheckButton` Flat Renderer

* Drawing of text region and check box of `mCheckButton` Flat renderer is as below: for the drawing of non area region, please refer to the renderer of [mWidget](../miniguiprogguidepart2chapter04#mwidget).

| _Property ID_    | _Meaning_             | _miniStudio property name_ | _Value type_     | _Schematic diagram of the valid region_                                                                                                                                                                                                 | _Value range_ |
| ---------------- | --------------------- | -------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `NCS_FGC_3DBODY` | Text foreground color | `FgColor3DBody`            | `DWORD` (`ARGB`) | ![checkbtn\_flat\_fgc.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-5b113f7a8631680179d17d87e66044f8b73225de%2Fcheckbtn_flat_fgc.png?alt=media) |               |
| `NCS_BGC_3DBODY` | Background color      | `BgColor3DBody`            | `DWORD` (`ARGB`) | ![checkbtn\_flat\_bgc.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-2473416720deae569caa60d16cdfe1e2ea315257%2Fcheckbtn_flat_bgc.png?alt=media) |               |

### Programming Example of `mCheckbutton`

* Operation screen shot:\


![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-218729e98153f779343c7ce7babca2c31851f172%2Fcheckbutton.png?alt=media)

* Check box example code

**List 2** checkbutton.c

```cpp
/*
** checkbutton.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

// START_OF_HANDLERS
static BOOL mymain_onCreate(mWidget* _this, DWORD add_data)
{
    return TRUE;
}

static void mymain_onClose(mWidget* _this, int message)
{
    DestroyMainWindow(_this->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
NCS_RDR_ELEMENT btn_rdr_elements[] =
{
    { NCS_MODE_USEFLAT, 1},
    { -1, 0 }
};

static NCS_RDR_INFO btn_rdr_info[] =
{
    {"flat","flat", btn_rdr_elements}
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
#define ID_BTN  101
#define ID_BTN1 102
#define ID_BTN2 103
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN,
        20, 30, 120, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "option1",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN1,
        20, 60, 120, 25,
        WS_BORDER | WS_VISIBLE | NCSS_BUTTON_AUTOCHECK,
        WS_EX_NONE,
        "option2",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN2,
        20, 90, 120, 25,
        WS_BORDER | WS_VISIBLE |NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "option3",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Check button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    ncsUninitialize ();

    return 0;
}

```

```cpp
#define ID_BTN  101
#define ID_BTN1 102
#define ID_BTN2 103
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN,
        20, 30, 120, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "option1",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN1,
        20, 60, 120, 25,
        WS_BORDER | WS_VISIBLE | NCSS_BUTTON_AUTOCHECK,
        WS_EX_NONE,
        "option2",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN2,
        20, 90, 120, 25,
        WS_BORDER | WS_VISIBLE |NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "option3",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Check button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
```

## `mRadioButton`

* _Control window class_: `NCSCTRL_RADIOBUTTON`
* _Control English name_: `RadioButton`
* _Brief introduction_: Single selection button, matched with `mButtonGroup`. `mButtonGroup` concludes multiple single selection buttons into one group. Among the buttons in the group, only one is in the selected status. After a button is selected, the originally selected button will cancel the selection. When the single selection button is used independently, its behavior is similar to that of a mCheckbutton.

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-06547844c2799a416804c48c75677a2214d335f1%2Fradio_button.png?alt=media)

### Property of `mRadiobutton`

It is inherited from the property of [mButton](miniguiprogguidepart2chapter06)\`.

### Event of `mRadiobutton`

It is inherited from the event of `mButton`.

### Renderers of `mRadiobutton`

* For the usage of renderers, see [look and feel renderer](miniguiprogguidepart2chapter03).

#### `mRadiobutton` Classic Renderer

* For the drawing of `mRadiobutton` Classic non client area, please refer to the renderer of [mWidget](../miniguiprogguidepart2chapter04#mwidget).

| _Property ID_           | _Meaning_                                        | _miniStudio property name_ | _Value type_     | _Schematic diagram of the valid region_                                                                                                                                                                                                                             | _Value range_ |
| ----------------------- | ------------------------------------------------ | -------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `NCS_FGC_3DBODY`        | Text foreground color                            | `FgColor3DBody`            | `DWORD` (`ARGB`) | ![radiobutton\_classic\_fgc.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-3cbe81f1b27c61631a2270dd19122ca16d493eba%2Fradiobutton_classic_fgc.png?alt=media)                 |               |
| `NCS_FGC_DISABLED_ITEM` | Text foreground color when the window is invalid | `TextDisableColor`         | `DWORD` (`ARGB`) | ![radiobutton\_classic\_textdisable.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-ecff092aa1ada21a8cf1ac67a32cf9c43bea8b23%2Fradiobutton_classic_textdisable.png?alt=media) |               |

* Classic renderer of Check Box of Radiobutton fills and draws through loading image resource. (the image resource is minigui-res by default, and installed in `/usr/local/share/minigui/res/bmp/classic_radio_button.bmp` by default)
* Specification of the image: the image is composed of eight parts from left to right, and each part is a square (13x13), corresponding to eight statuses of checkbutton:
* 0\~3: common, highlight, pressed down and banned status when not selected
* 4\~7: common, highlight, pressed down and banned status when selected
* If the image is bigger than the drawing region, the image will be reduced to draw; when the image is smaller than or equal to the drawing region, the image actual size is adopted to draw
* Example

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-82a2b86de6c6f143135b67b11799438cac2ca350%2Fclassic_radio_button.png?alt=media)

#### `mRadiobutton` Skin Renderer

Refer to [Appendix B : Specification for the Image Resource Used by Skin Renderer](https://github.com/VincentWei/minigui-docs/blob/master/programming-guide/MStudioMGNCSV1dot0PGENAppB/README.md#mButton).

#### `mRadiobutton` Fashion Renderer

* For the drawing of `mRadiobutton` Fashion non client area, please refer to the renderer of [mWidget](../miniguiprogguidepart2chapter04#mwidget).

| _Property ID_           | _Meaning_                                        | _miniStudio property name_ | _Value type_     | _Schematic diagram of the valid region_                                                                                                                                                                                                               | _Value range_ |
| ----------------------- | ------------------------------------------------ | -------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `NCS_FGC_3DBODY`        | Text foreground color                            | `FgColor3DBody`            | `DWORD` (`ARGB`) | ![radiobtn\_fashion\_fgc.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-1c5629147b80c12e900955b3aa4b45f3ca82bf07%2Fradiobtn_fashion_fgc.png?alt=media)         |               |
| `NCS_FGC_DISABLED_ITEM` | Text foreground color when the window is invalid | `TextDisableColor`         | `DWORD` (`ARGB`) | ![radiobtn\_fashion\_disable.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-e0be88eec38dbb71a39576331fcb49a53831c399%2Fradiobtn_fashion_disable.png?alt=media) |               |

* Fashion renderer of Check Box of Radiobutton fills and draws through loading image resource. (The image resource is minigui-res by default, and installed in /usr/local/share/minigui/res/bmp/fashion\_radio\_btn.bmp by default)
* Specification of the image: the image is composed of eight parts from top to bottom, and each part is a square (13x13), corresponding to eight statuses of checkbutton:
* 0\~3: common, highlight, pressed down and banned status when not selected
* 4\~7: common, highlight, pressed down and banned status when selected
* If the image is bigger than the drawing region, the image will be reduced to draw; when the image is smaller than or equal to the drawing region, the image actual size is adopted to draw
* Example

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-b253dccdd1fca18c5c257438d8bd3899e76f1e1c%2Ffashion_radio_btn.png?alt=media)

#### `mRadiobutton` Flat Renderer

* For the drawing of `mRadiobutton` Flat non client area, please refer to the renderer of [mWidget](../miniguiprogguidepart2chapter04#mwidget).

| _Property ID_    | _Meaning_             | _miniStudio property name_ | _Value type_     | _Schematic diagram of the valid region_                                                                                                                                                                                                 | _Value range_ |
| ---------------- | --------------------- | -------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `NCS_FGC_3DBODY` | Text foreground color | `FgColor3DBody`            | `DWORD` (`ARGB`) | ![radiobtn\_flat\_fgc.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-f4468b81fe0825b779de425cf77b78c94bc00845%2Fradiobtn_flat_fgc.png?alt=media) |               |
| `NCS_BGC_3DBODY` | Background color      | `BgColor3DBody`            | `DWORD` (`ARGB`) | ![radiobtn\_flat\_bgc.png](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-af1e3af05a7490748dbc3bc10a7ee24f199a7e08%2Fradiobtn_flat_bgc.png?alt=media) |               |

### Programming Example of `mRadiobutton`

* Operation screen shot:\


![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-6582aa5e7a37007faf709d3b0c3b5cf512548275%2Fradiobutton.png?alt=media)

* Single selection button example code

```cpp
static NCS_PROP_ENTRY radioGroup_props [] = {
    {NCSP_BUTTON_GROUPID, 200},
    {0, 0}
};

static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_BUTTONGROUP ,
        ID_GROUP,
        5, 10, 200, 120,
        WS_VISIBLE|NCSS_NOTIFY,
        WS_EX_NONE,
        "Button Group",
        NULL,          //props,
        btn_rdr_info,  //rdr_info
        NULL,          //handlers,
        NULL,          //controls
        0,
        0              //add data
    },
    {
        NCSCTRL_RADIOBUTTON,
        ID_BTN1,
        20, 30, 80, 25,
        WS_VISIBLE,
        WS_EX_NONE,
        "option1",
        radioGroup_props, //props,
        btn_rdr_info,     //rdr_info
        NULL,             //handlers,
        NULL,             //controls
        0,
        0                 //add data
    },
    {
        NCSCTRL_RADIOBUTTON,
        ID_BTN2,
        20, 60, 80, 25,
        WS_VISIBLE,
        WS_EX_NONE,
        "option2",
        radioGroup_props, //props,
        btn_rdr_info,     //rdr_info
        NULL,             //handlers,
        NULL,             //controls
        0,
        0                 //add data
    },
    {
        NCSCTRL_RADIOBUTTON,
        ID_BTN2,
        20, 90, 80, 25,
        WS_VISIBLE,
        WS_EX_NONE,
        "option3",
        radioGroup_props, //props,
        btn_rdr_info,     //rdr_info
        NULL,             //handlers,
        NULL,             //controls
        0,
        0                 //add data
    },
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Radio button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
```

## `mMenuButton`

* _Control window class_: `NCSCTRL_MENUBUTTON`
* _Control English name_: `MenuButton`
* _Brief introduction_: Menu button. Click the button, and the menu will pop up. Select the menu item through keyboard or mouse, and the selected menu item will display on the button.

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-4d1c5708c9e9add241a3383a9f80e1033e7d33c1%2Fmenu_button.png?alt=media)

`mMenuButton` is inherited from [mPopMenuMgr](../miniguiprogguidepart2chapter17#mpopmenumgr) Class.

### Property of `mMenuButton`

It is inherited from the property of [mButton](miniguiprogguidepart2chapter06)\`.

| _Property name_       | _Type_         | _Permission_ | _Explanation_                                     |
| --------------------- | -------------- | ------------ | ------------------------------------------------- |
| `NCSP_MNUBTN_POPMENU` | `mPopMenuMgr*` | `RW`         | Set `PopMenu` object pointer                      |
| `NCSP_MNUBTN_CURITEM` | int            | `RW`         | Get or set the currently selected id of Menu Item |

### Event of `mMenuButton`

It is inherited from the event of [mButton](<#Event of `mButton>)\`.

| _Event notification code_ | _Explanation_           | _Parameter_              |
| ------------------------- | ----------------------- | ------------------------ |
| `NCSN_MNUBTN_ITEMCHANGED` | When `MenuItem` changes | id value of the new Item |

### Programming Example of `mMenuButton`

`mMenuButton` is mainly implemented through creating [mPopMenuMgr](../miniguiprogguidepart2chapter17#mpopmenumgr) object.

* Operation screen shot:\


![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-7766de7a73a1976ba72c7f9912e66b325c54221e%2Fmenubutton1.png?alt=media)

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-ffd4a97cfd3e0f6536b92049f63e980299b97e54%2Fmenubutton2.png?alt=media)

* Menu button example code:

```cpp
/*
** menubutton.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

#define ID_BTN  101

// START_OF_HANDLERS
static void menubutton_onitemchanged(mMenuButton *self, int id, int nc,
                                     DWORD add_data)
{
    char szText[100];
    sprintf(szText,"id=%d",id);
    MessageBox(self->hwnd, szText,"Menu ID",0);
}

static NCS_EVENT_HANDLER menubutton_handlers[] = {
    NCS_MAP_NOTIFY(NCSN_MNUBTN_ITEMCHANGED, menubutton_onitemchanged),
    {0, NULL}
};

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    mPopMenuMgr * popmenu = NEW(mPopMenuMgr);

    _c(popmenu)->addItem(popmenu,0, "menuitem 1", NULL, 200, 0, NULL, 0);
    _c(popmenu)->addItem(popmenu,0, "menuitem 2", NULL, 201, 0, NULL, 0);
    _c(popmenu)->addItem(popmenu,0, "menuitem 3", NULL, 202, 0, NULL, 0);

    mButton *mb1 = (mButton*)ncsGetChildObj(self->hwnd, ID_BTN);
    if(mb1)
    {
        _c(mb1)->setProperty(mb1, NCSP_MNUBTN_POPMENU, (DWORD)popmenu);
    }

    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
NCS_RDR_ELEMENT btn_rdr_elements[] =
{
    { NCS_MODE_USEFLAT, 1},
    { -1, 0 }
};
static NCS_RDR_INFO btn_rdr_info[] =
{
    {"skin", "skin", NULL},
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_MENUBUTTON,
        ID_BTN,
        40, 40, 100, 30,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "menu button",
        NULL,                //props,
        btn_rdr_info,        //rdr_info
        menubutton_handlers, //handlers,
        NULL,                //controls
        0,
        0                    //add data
    },
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Menu button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    MainWindowThreadCleanup(mydlg->hwnd);

    ncsUninitialize ();

    return 0;
}

```

## `mColorButton`

* _Control window class_: `NCSCTRL_COLORBUTTON`
* _Control English name_: `ColorButton`
* _Brief introduction_: Color selection button, which is used to select color. When clicking the button, color selection box pops up, and the user selects the color. After confirmation, the selected color displays effect on the button panel.

![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-b1cdcd921924991c4b760c8d517adfd55544bc33%2Fcolor_button.png?alt=media)

`mColorButton` uses `ColorSelectDialog` of mgutils to select color, and the selected color displays in the middle box.

### Property of `mColorButton`

It is inherited from the property of `mButton`.

| _Property name_        | _Type_           | _Permission_ | _Explanation_          |
| ---------------------- | ---------------- | ------------ | ---------------------- |
| `NCSP_CLRBTN_CURCOLOR` | `DWORD` (`ARGB`) | `RW`         | Set or get Color value |

### Event of `mColorButton`

It is inherited from the event of `mButton`.

| _Event notification code_  | _Explanation_                           | _Parameter_      |
| -------------------------- | --------------------------------------- | ---------------- |
| `NCSN_CLRBTN_COLORCHANGED` | Update after being selected by the user | `DWORD` (`ARGB`) |

### Programming Example of `mColorButton`

* Operation screen shot\


![alt](https://3533682497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F95Qe4b8fOBT2JZL5WDlF%2Fuploads%2Fgit-blob-32584d3dd1bba2fdeabe5eb61c6211fda717ac55%2Fcolorbutton.png?alt=media)

* Color button example code:

```cpp
/*
** colorbutton.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

#define ID_BTN  101

// START_OF_HANDLERS
static BOOL mymain_oncolorchanged(mMainWnd* self, mColorButton *sender,
        int id, DWORD param)
{
    SetWindowBkColor(self->hwnd, DWORD2PIXEL(HDC_SCREEN, param));
    InvalidateRect(self->hwnd, NULL, TRUE);

    return FALSE;
}

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    mColorButton *btn = (mColorButton*)_c(self)->getChild(self, ID_BTN);
    if(btn)
    {
        _c(btn)->setProperty(btn, NCSP_CLRBTN_CURCOLOR, PIXEL2DWORD(HDC_SCREEN,
            GetWindowBkColor(self->hwnd)));
        ncsAddEventListener((mObject*)btn, (mObject*)self,
            (NCS_CB_ONPIECEEVENT)mymain_oncolorchanged,
            NCSN_CLRBTN_COLORCHANGED);
    }

    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
static NCS_RDR_INFO btn_rdr_info[] =
{
      {"fashion", "fashion", NULL},
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_COLORBUTTON,
        ID_BTN,
        40, 40, 80, 30,
        WS_VISIBLE|NCSS_NOTIFY,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_MAINWND,
    1,
    0, 0, 180, 140,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Color button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    MainWindowThreadCleanup(mydlg->hwnd);

    ncsUninitialize ();

    return 0;
}

```

* Definition processing function

```cpp
static BOOL mymain_oncolorchanged(mMainWnd* self, mColorButton *sender,
        int id, DWORD param)
{
    SetWindowBkColor(self->hwnd, DWORD2PIXEL(HDC_SCREEN, param));
    InvalidateRect(self->hwnd, NULL, TRUE);

    return FALSE;
}

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    mColorButton *btn = (mColorButton*)_c(self)->getChild(self, ID_BTN);
    if(btn)
    {
        _c(btn)->setProperty(btn, NCSP_CLRBTN_CURCOLOR, PIXEL2DWORD(HDC_SCREEN,
            GetWindowBkColor(self->hwnd)));
        ncsAddEventListener((mObject*)btn, (mObject*)self,
            (NCS_CB_ONPIECEEVENT)mymain_oncolorchanged,
            NCSN_CLRBTN_COLORCHANGED);
    }

    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
```

* Define the window template

```cpp
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_COLORBUTTON,
        ID_BTN,
        40, 40, 80, 30,
        WS_VISIBLE|NCSS_NOTIFY,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_MAINWND,
    1,
    0, 0, 180, 140,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Color button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
```

## Appendix:A

### `GrandientMode`

It must be one of the values below:

* `MP_LINEAR_GRADIENT_MODE_HORIZONTAL`: horizontal gradual change, gradual change from the center to the left and right
* `MP_LINEAR_GRADIENT_MODE_VERTICAL`: vertical gradual change, gradual change from the center to the top and bottom The two values are defined in mGPlus (`<mgplus/mgplus.h>`). Although mGPlus defines other gradual change modes as well, it is not supported in mGNCS.

### `ButtonState`

One of the following four statuses:

* Normal: normal status.
* Hilight: the status when the mouse is moved to the button and not clicked, also referred to as highlight status.
* Checked: the button is in the status of being clicked, also referred to as checked status. In this status, different statuses are subdivided, refer to the definition of `ButtonCheckState` status below.
* Disabled: the button is in disabled status.

### `ButtonCheckState`

```cpp
/* Button CHECK status subdivided definition */
enum mButtonCheckState{
        /* Button CHECK status subdivided definition */
        NCS_BUTTON_UNCHECKED = 0,

        /* Under three status condition, the status is valid, which can be understood as the middle transition status */
        NCS_BUTTON_HALFCHECKED,

        /* Represent pressed down status */
        NCS_BUTTON_CHECKED
};
```

[<< Static Box and Derived Control Classes](miniguiprogguidepart2chapter05) | [Table of Contents](..) | [Panel and Derived Classes >>](miniguiprogguidepart2chapter07)
