Toggle Buttons

In This Topic

Toggle buttons are represented by the NToggleButtonBase abstract class, which is derived from NButtonBase. When clicked toggle buttons toggle the value of their Checked property. The CheckedChanging and CheckedChangled events inform you when the toggle button checked state is about to change and when it has changed respectively. The NToggleButton class also contains a static method CreateImageAndText that can be used to quickly create a toggle button, which consists of an image and text next to it.

NOV provides two main types of toggle buttons:

Symbol Toggle Buttons - symbol toggle buttons, are toggle buttons that usually display a different symbol when checked/unchecked. (check boxes and radio buttons for example).
Table Picker Cells - these are special toggle buttons, that reside in table pickers, thus allowing the user to pick only one of the available options.

Symbol Toggle Buttons

Symbol toggle buttons are toggle buttons that consist of a symbol and content. The SymbolContentRelation property controls position of the symbol in relation to the content and the Spacing property determines the distance between them. Typical examples for symbol toggle buttons are the check box and the radio button.

A check box is toggle button that allows the user to make a binary choice. It is represented by the NCheckBox class. The following example demonstrates how to create and use a check box:

Check Box Example	Copy Code
... NCheckBox checkBox = new NCheckBox("Check Me"); checkBox.CheckedChanged += new Function<NValueChangeEventArgs>(OnCheckChanged); ... void OnCheckChanged(NValueChangeEventArgs arg) { NCheckBox checkBox = (NCheckBox)arg.TargetNode; Console.WriteLine("Check changed to: " + checkBox.Checked); }

Check Box Example

Copy Code

...
NCheckBox checkBox = new NCheckBox("Check Me");
checkBox.CheckedChanged += new Function<NValueChangeEventArgs>(OnCheckChanged);
...
void OnCheckChanged(NValueChangeEventArgs arg)
{
    NCheckBox checkBox = (NCheckBox)arg.TargetNode;
    Console.WriteLine("Check changed to: " + checkBox.Checked);
}

A radio button is a toggle button, that allows the user to choose only one of a predefined set of options. It is represented by the NRadioButton class. To be fully functional the radio button must be a descendant of a NRadioButtonGroup. The radio button group is a content element (i.e. can hold any other widget), that allows only one of the radio buttons that reside in its sub-hierarchy to be selected at a time. This allows for radio buttons to have arbitrary arrangement. The following code example creates a comples layout of radio buttons and places them inside a radio button group:

Radio Buttons Example	Copy Code
NStackPanel vstack1 = new NStackPanel(); vstack1.Add(new NRadioButton("Intel")); vstack1.Add(new NRadioButton("AMD")); NStackPanel vstack2 = new NStackPanel(); vstack2.Add(new NRadioButton("NVidia")); vstack2.Add(new NRadioButton("ATI")); NStackPanel hstack = new NStackPanel(); hstack.Direction = ENHVDirection.LeftToRight; hstack.Add(vstack1); hstack.Add(vstack2); NRadioButtonGroup radioGroup = new NRadioButtonGroup(new NGroupBox("Select your video card vendor", hstack));

Radio Buttons Example

Copy Code

NStackPanel vstack1 = new NStackPanel();
vstack1.Add(new NRadioButton("Intel"));
vstack1.Add(new NRadioButton("AMD"));
NStackPanel vstack2 = new NStackPanel();
vstack2.Add(new NRadioButton("NVidia"));
vstack2.Add(new NRadioButton("ATI"));
NStackPanel hstack = new NStackPanel();
hstack.Direction = ENHVDirection.LeftToRight;
hstack.Add(vstack1);
hstack.Add(vstack2);
NRadioButtonGroup radioGroup = new NRadioButtonGroup(new NGroupBox("Select your video card vendor", hstack));

This code produces the following radio button group:

The NRadioButtonGroup class inherits from the generic NToggleButtonGroup<T>, which exposes a SelectedIndex property. The SelectedIndex indicates the index of the currently selected radio button in the group subtree depth first traversal order. In our case the indices of the options are:

0 - Intel
1 - AMD
2 - NVidia
3 - ATI

The SelectedIndexChanged event is raised when the currently selected item has changed. The SelectedItem property returns the currently selected radio button.

Table Picker Cells

Table picker cells are the building blocks of all table pickers such as calendar pickers, palette color pickers, hatch and gradient pickers, etc. Table picker cells add support for a highlighted state, which is triggered when the user places the mouse pointer over the table cell or when he navigates to it using the keyboard. Depending on their type, table picker cells also provide additional properties that describe the object the table picker cell represent (e.g. date, color index, hatch style, gradient variant, etc.).