Skip to content

SelectionList.md

Latest commit

 

History

History
77 lines (61 loc) · 2.67 KB

SelectionList.md

File metadata and controls

77 lines (61 loc) · 2.67 KB

SelectionList / SelectionListItem

A multi-select list control with image, title, subtitle, and timestamp support per item. Shows a selection-count header when items are selected and an empty-state message when the list is empty.

Basic usage

<SelectionList>
    <SelectionListItem Title="Alice Johnson"
                       Subtitle="[email protected]"
                       Timestamp="Today, 9:41 AM" />
    <SelectionListItem Title="Bob Smith"
                       Subtitle="[email protected]"
                       Timestamp="Yesterday" />
</SelectionList>

SelectionList properties

Property Type Default Description
EmptyMessage string "No items found" Text shown when the list has no items
Orientation Orientation Vertical Layout direction of the items panel
ImageMemberBinding BindingBase? — Binding path for the image when using ItemsSource
TitleMemberBinding BindingBase? — Binding path for the title
SubtitleMemberBinding BindingBase? — Binding path for the subtitle
TimestampMemberBinding BindingBase? — Binding path for the timestamp
ImageTemplate IDataTemplate? — Data template for the image area

Inherits all ListBox properties (ItemsSource, SelectedItems, SelectionMode, etc.). Default selection mode is Multiple | Toggle.

SelectionListItem properties

Property Type Description
Title string? Primary label
Subtitle string? Secondary text below the title
Timestamp string? Timestamp text shown on the right
Image IImage? Image shown on the left
ImageTemplate IDataTemplate? Data template for the image area

Data-bound list

<SelectionList ItemsSource="{Binding Contacts}"
               TitleMemberBinding="{Binding Name}"
               SubtitleMemberBinding="{Binding Email}"
               TimestampMemberBinding="{Binding LastSeen}"
               EmptyMessage="No contacts found">
    <SelectionList.ImageTemplate>
        <DataTemplate DataType="vm:ContactViewModel">
            <Ellipse Width="36" Height="36"
                     Fill="{DynamicResource AccentColor}" />
        </DataTemplate>
    </SelectionList.ImageTemplate>
</SelectionList>

Reading selected items

var selected = selectionList.SelectedItems?.Cast<MyModel>().ToList();

Horizontal layout

<SelectionList Orientation="Horizontal"
               ItemsSource="{Binding Tags}"
               TitleMemberBinding="{Binding Name}" />

Custom empty state

<SelectionList EmptyMessage="No results match your search." />