Selection Class

Selection is used to create a selection control, such as an item list, radio buttons, or picker. The Selection itself defines the selection, managing the high-level behaviour and tracking the current value. A variety of Selectable objects define which items can be selected.

Introduction to the Selection API

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ngil94H-Mk4" frameborder="0" allowfullscreen></iframe>

The selection is associated with the node in which it appears. For example:

<Panel>
    <Selection/>
</Panel>

The Panel is now considered to be a selection control. Behaviours and triggers, such as Selectable and Selected, that are descendents of this panel will find this Selection behavior.

The Selectable node is used to make a child of a selection control selectable. When assigned to a nodes, it will iterate through the controls parents until it finds a selection control.

The Selection API's functions are split between user-interaction and programming APIs. The user interaction functions are constrained to the requirements of the Selection, such as MaxCount and MinCount. The programmatic functions can set whatever state they want; they are not constrained. This makes it easy to create value bindings and JavaScript driven behaviour without worrying about initialization order.

Example

Location

Namespace
Fuse.Selection
Package
Fuse.Selection 2.9.1
Show Uno properties and methods

Interface of Selection

Add(Selectable) uno

Adds a Selectable to the Selection. If it is already added it won't be added a second time.

Clear uno

Clears all items from the selection.

ForceAdd(Selectable) uno

Adds a Selectable to the Selection even if would violate the user-interaction constraints. It will however not add the same value twice.

ForceRemove(Selectable) uno

Removes a Selectable form the Selection even if it would violated the user-interaction constraints (such as MinCount).

MaxCount : int ux

The maximum number of items the user is allowed to select. If they attempt to select more items then Replace decides what happens.

MinCount : int ux

The minimum number of items the user is allowed to select. If they attempt to deselect and item and go below this count the deselect will be ignored.

Remove(Selectable) uno

Removes a Selectable from the Selection. If it is not in the selection then nothing happens.

Value : string ux

The string value of the item curerntly selected. If multiple items are selected then it will be value of the oldest item selected.

Values : object ux

The current list of selected values. This should be bound to an IObservableArray (e.g FuseJS/Observable) order to create a 2-way interface for the selected items.

Inherited from Node

ContextParent : Node uno

The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.

FindNodeByName(Selector, Predicate<Node> (Node)) : Node uno

Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.

IsRootingStarted : bool uno

Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.

Name : Selector ux

Run-time name of the node. This property is automatically set using the ux:Name attribute.

OnRooted uno

If you override OnRooted you must call base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.

Inherited from PropertyObject

Inherited from object

Attached UX Attributes

GlobalKey (attached by Resource) : string ux

The ux:Global attribute creates a global resource that is accessible everywhere in UX markup.

Implemented Interfaces

IScriptObject uno

Interface for objects that can have a script engine representation

Examples

The following example uses Selection to create a simple list of options. Tap the items to toggle their selection. Values is bound to a JavaScript Observable in order to track the currently selected items.

<Panel ux:Class="MyItem" Color="#aaa">
    <string ux:Property="Label" />
    <string ux:Property="Value" />

    <Selectable Value="{ReadProperty this.Value}" />
    <Text Value="{ReadProperty this.Label}" />

    <WhileSelected>
        <Change this.Color="#ffc" />
    </WhileSelected>
    <Tapped>
        <ToggleSelection />
    </Tapped>
</Panel>

<JavaScript>
    var Observable = require("FuseJS/Observable");

    var values = Observable();
    var list = Observable(function() {
        return values.toArray().join(",");
    });

    module.exports = {
        values: values,
        list: list
    };
</JavaScript>

<StackPanel>
    <Selection Values="{values}" />

    <MyItem Label="Big Red One" Value="sku-01" />
    <MyItem Label="Small Green Two" Value="sku-02" />
    <MyItem Label="Third Last One" Value="sku-03" />
    <MyItem Label="Four Fore For" Value="sku-04" />
    <MyItem Label="Point Oh-Five" Value="sku-05" />

    <Text Value="Selected:" Margin="0,10,0,0" />
    <Text Value="{list}" />
</StackPanel>