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

Create with property

To create checkbox using property, follow these steps:

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

    C#
    Copy
    CheckBox _checkBox = new CheckBox();
  2. Set the checkbox properties:

    C#
    Copy
    // Path to the directory with images string _URL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/"; _checkBox.Size = new Size(200, 200); _checkBox.ParentOrigin = ParentOrigin.Center; _checkBox.PositionUsesPivotPoint = true; _checkBox.PivotPoint = PivotPoint.Center; // 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); // CheckBox initial state set to be unselected _checkBox.IsSelected = false;

    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.

  3. Add checkbox to the view:

    C#
    Copy
    _rootView.Add(_checkBox);

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

CheckBox_prop

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

C#
Copy
// CheckBox can not be selected _checkBox.IsSelectable = false;

The result is as follows:

CheckBox_disabled

To disable the checkbox completely use the following code:

C#
Copy
// CheckBox is disabled _checkBox.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

Create with Style

To create checkbox using style, follow these steps:

  1. Create a style for checkbox:

    C#
    Copy
    // Path to the directory with images string _URL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/"; // Since the CheckBox inherits after the Button class, the ButtonStyle is used ButtonStyle _style = new ButtonStyle { IsSelectable = true, ParentOrigin = ParentOrigin.Center, PositionUsesPivotPoint = true, PivotPoint = PivotPoint.Center, // Checkbox area connected with click event Size = new Size(200, 200), // Gray structural background BackgroundImage = _URL + "struct.png", // Image overlaid on the background Icon = new ImageViewStyle { Size = new Size(200, 200), // Different icon used depending on the status ResourceUrl = new Selector<string> { // Black x sign with no background Other = _URL + "no.png", // Blue check mark with no background Selected = _URL + "yes.png" }, // Icon opacity set to 0.8 for all checkbox states Opacity = 0.8f, // Shadow visible for all states ImageShadow = new ImageShadow(_URL + "shadow.png") }, // Style of the overlay image Overlay = new ImageViewStyle() { ResourceUrl = new Selector<string> { Pressed = _URL + "red.png", Other = _URL + "lightblue.png" }, Opacity = new Selector<float?> {Pressed = 0.3f, Other = 1.0f} } };
  2. Use the style to create a new instance of a CheckBox class:

    C#
    Copy
    CheckBox _checkBox = new CheckBox(_style);
  3. Add checkbox to the control:

    C#
    Copy
    _rootView.Add(_checkBox);

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

CheckBox_style

Create with custom styles

To create checkbox using a defined style, follow these steps:

  1. Define a custom style inside the namespace:

    cs
    Copy
    // custom style of the checkbox internal class CustomCheckBoxStyle : StyleBase { string _URL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/"; protected override ViewStyle GetViewStyle() { ButtonStyle style = new ButtonStyle { // Square area connected with click event Size = new Size(300, 300), Icon = new ImageViewStyle { Size = new Size(300, 300), ResourceUrl = new Selector<string> { Other = "", // Check mark with no background Selected = _URL + "yes.png" }, // Round shadow ImageShadow = new ImageShadow(_URL + "shadow.png"), }, }; return style; } }
  2. Register your custom style within your namespace:

    cs
    Copy
    Tizen.NUI.Components.StyleManager.Instance.RegisterStyle("_CustomCheckBoxStyle", null, typeof(<YOUR_NAME_SPACE>.CustomCheckBoxStyle));
  3. Use your custom style to create a new CheckBox instance:

    cs
    Copy
    var _checkBox = new CheckBox("_CustomCheckBoxStyle");
  4. Add checkbox to the view:

    cs
    Copy
    _rootView.Add(_checkBox);

The following output is generated when the checkbox is created using the defined style:

CheckBox_style

Responding to click event

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

cs
Copy
CheckBox _checkBox = new CheckBox(); _checkBox.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.0 and Higher
CameraView
Next Loading
Submit your feedback to GitHub