CheckBox

Checkbox is a UI component connected with the click events. The base class for a CheckBox class is a Tizen.NUI.Components.Button. The Button properties can be used to specify the checkbox. In opposite to a button, that can contain both an icon and a text, a checkbox can only contain an icon. The default checkbox created with NUI is as follows:

CheckBoxDef CheckBoxDef

Create with property

To create checkbox using property, follow these steps:

  1. Create an instance of a CheckBox class using the default constructor:

    groovy
    Copy
    <comp:CheckBox x:Name="_checkBox"/>
  2. Set the checkbox properties:

    routeros
    Copy
    <comp:CheckBox x:Name="_checkBox" Text="False" WidthSpecification="200" HeightSpecification="200" IsSelected="False" />
    C#
    Copy
    // Path to the directory with images string _URL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/"; // Set the icon images for different checkbox states StringSelector _iconURL = new StringSelector() { Normal = _URL + "blue.png", Selected = _URL + "blue_checked.png", Pressed = _URL + "red.png", Disabled = _URL + "green.png", DisabledSelected = _URL + "yellow.png" }; _checkBox.IconURLSelector = _iconURL; _checkBox.Icon.Opacity = 1.0f; _checkBox.Icon.Size = new Size2D(160,160); _checkBox.BackgroundColor = new Color(0.57f, 0.7f, 1.0f, 0.8f);

    To set the absolute path of the images that are used, the Tizen.Applications.Application.Current.DirectoryInfo.Resource path is used. For more information, see Class Application and Class DirectoryInfo.

The following output is generated when the checkbox is created using properties:

CheckBox_prop

A checkbox selection can be disabled by adding the following property:

ini
Copy
IsSelectable="False"

The result is as follows:

CheckBox_disabled

To disable the checkbox completely, use the following property:

protobuf
Copy
// CheckBox is disabled IsEnabled="False"

This sets the checkbox state to Disabled or DisabledSelected, depending on the IsSelected value. Adding the preceding option changes the checkbox appearance as follows:

You can scroll this table.
CheckBox_dis CheckBox_dis
IsEnabled set to False
IsSelected set to True
IsEnabled set to False
IsSelected set to False

Respond to clicked event

When you click a checkbox, the CheckBox instance receives a clicked event. You can declare the clicked event handler as follows:

routeros
Copy
<comp:CheckBox x:Name="_checkBox" Text="False" WidthSpecification="200" HeightSpecification="200" IsSelected="False" Clicked="OnClicked" />

where OnClicked is a function defined by the user:

cs
Copy
private void OnClicked(object sender, EventArgs e) { // Do something in response to checkbox click }
  • Dependencies
    • Tizen 6.5 and Higher
CameraView
Next CollectionView
Submit your feedback to GitHub