Skip to end of metadata
Go to start of metadata

UXListBox is an advanced selection control with comprehensive selection-related properties such as SelectedItem, SelectedIndex, SelectedValue, and SelectedElement. With these properties, most MVVM pattern scenarios can be elegantly achieved through data binding.

On this page:

Selection Control

UXListBox is inherited from ISMultipleSelectionControl, which means it can be used to perform a single selection and multiple selection depending on the mode. For more information about selection control, see ItemsControl Overview and Content Model Overview respectively.

Configuring SelectionMode

UXListBox has three selection modes such as discussed in the following list.

  • Single
    In single mode, you can select only one item at a time.
  • Multiple
    In multiple mode, you can select multiple items. Clicking an unselected item will make it selected and clicking on selected item will make it unselected.
  • Extended
    In extended mode, you can select multiple items using a combination of Ctrl and / or Shift key similar to Windows operating system. 

Using Keyboard to Perform Selection

You can navigate between items by using arrow keys in the keyboard. In Single mode, navigating between items will change the selection immediately.

In Multiple mode you, need to use SpaceBar to select or unselect an item. You use arrow keys to navigate between the items in the list box.

Data Binding

You can bind a collection of data to UXListBox or to any ItemsControl. To learn more about data binding, see Data Binding Overview.

To bind the data, you can either use ItemTemplate or the member path properties such as:

  • DisplayMemberPath
    Used to bind the Content property.
  • ImageMemberPath
    Used to bind the Icon property.

The following example shows how to perform binding to UXListBox using the member path properties.

Model
View Model
View

This example is using MVVM pattern that uses an advanced data binding concept. To learn more about MVVM pattern, see MVVM Pattern Overview.

Understanding UXListBoxItem

The item container type of UXListBox is UXListBoxItem.

UXListBoxItem supports ImageContent model, so you can use the ImageMemberPath to bind an image field to the image element of UXListBoxItem.

Text Search

UXListBox also supports text search capability similar to UXComboBox. To enable the text search, you set the IsTextSearchEnable property to true.

XAML

To enable case sensitivity in the text search, you set the IsTextSearchCaseSensitity property to true.

For more information about user experience features such as text search, see User Experiences Overview.


Drag Drop Capability

UXListBox also supports drag and drop capability which is built upon ClientUI DragDrop Framework. To learn more how to enable drag and drop to UXListBox, see ItemsControl Overview and Drag-drop Framework Overview respectively.