Selectable Class

Selectable makes a Visual selectable. Selectable visuals are what can be selected in a Selection control.

The Value property is used by the Selection to track what is selected. It is a string value to make it easy to work with from JavaScript.

Changing the selected state

There is no default behavior that changes a visuals selected state. In order to select a selectable, you need to use ToggleSelection. A normal use of this would be inside a Clicked trigger, like this:

<Panel>
    <Selection />
    <Panel>
        <Selectable />
        <Clicked>
            <ToggleSelection />
        </Clicked>
    </Panel>
</Panel>

Reacting to a change in selected state

You can react to changes in the state of a Selectable element using Selected, which pulses when the element is selected, or WhileSelected, which is true as long as the element is selected.

Location

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

Interface of Selectable

Add uno

Calls Selection.Add with this Selectable.

Remove uno

Calls Selection.Remove with this Selectable.

Toggle uno

Calls Selection.Toggle with this Selectable.

Value : string ux

The value which identifies this Selectable in the Selection. It will be this value that is used in Selection.Value and Selection.Values.

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>