Skip to content

Pickers

Jump to bottom
Håvard Moås edited this page Aug 14, 2023 · 18 revisions

A Picker is a component where you can select something. We have several different Pickers in our library, which are found below.

Item Picker

An item picker should be used by you to let people pick an item from a list of items. The item picker is an in-line button with a title that people tap to start picking from the items. When an item is picked, the item will be displayed as a part of the in-line button.

Usage

In the following example, the item picker is populated by a list of Person named People , where Person have a a property DisplayName to be used for people to see when picking the item from the item picker.

 <dui:ItemPicker Title="Person"
                 Mode="BottomSheet"
                 ItemsSource="{Binding People}"
                 SelectedItem="{Binding PickedPerson}"
                 ItemDisplayProperty="DisplayName"/>

UX Considerations

You should select a proper Mode for the item picker depending on the size of each item and the length of the items to pick from. ContextMenu mode is preferred if the number of items are short and the length of each item to display is short, otherwise BottomSheet is preferred.

Customise each item

You can customise how the item for people to pick look. This can only be done when the item picker is presented as a bottom sheet.

<dui:ItemPicker Mode="BottomSheet"
                SelectedItem="{Binding SelectedPerson}"
                ItemsSource="{Binding People}"
                ItemDisplayProperty="DisplayName">
    <dui:ItemPicker.BottomSheetConfiguration>
        <dui:BottomSheetConfiguration>
            <dui:BottomSheetConfiguration.SelectableItemTemplate>
                <ControlTemplate>
                    <dui:Label Text="{TemplateBinding Item.FirstName}"
                               BackgroundColor="{TemplateBinding IsSelected, Converter={dui:BoolToObjectConverter 
                                                   TrueObject={dui:Colors color_success_light}, 
                                                   FalseObject={dui:Colors color_error_light}}}" />
                </ControlTemplate>
            </dui:BottomSheetConfiguration.SelectableItemTemplate>
        </dui:BottomSheetConfiguration>
    </dui:ItemPicker.BottomSheetConfiguration>
</dui:ItemPicker>

This is achieved by using ControlTemplate and TemplateBinding. Template bindings let you bind to the library properties. The properties you can bind to is:

  • Item - Your object in the list of items to pick from. The items is the ones you set in ItemPicker.ItemsSource.
  • IsSelected - A boolean property that determines if people have selected your object or not. Use this to customise your view so people know that the item is selected or not.

Properties

Inspect the components properties class to further customise and use it.


Multi Items Picker

A multi items picker should be used by you to let people pick an multiple items from a list of items. The item picker is an in-line button with a placeholder that people tap to start picking from the items. When an item is picked, the items will be displayed as a horizontal list of items. When the max size of the parents width is reached, the items will be merged together to a single number of items.

Usage

In this example, people can select people to send a message to. When people pick items the SelectedItemCommand property will be executed with the list of items. You can also use the SelectedItems property to pre-set or get updates when people select items.

<dui:MultiItemsPicker Placeholder="{x:Static localizedStrings:LocalizedStrings.To}"
                      ItemsSource="{x:Static sampleData:SampleDataStorage.People}"
                      SelectedItemCommand="{Binding YourCommand}">
</dui:MultiItemsPicker>

Customise each item

This can be done the exact same way as with ItemPicker.

Properties

Inspect the components properties class to further customise and use it.

Date/Time Pickers

There are three types of date/time pickers:

Inspiration


Date Picker

A date picker should be used by you to let people pick a date. The date picker is an in-line button with a title that people tap to start picking the date. When a date is picked, the date will be displayed as a part of the in-line button.

Usage

<dui:DatePicker SelectedDate="{Binding SelectedBirthday}"/>

Properties

Inspect the components properties class to further customise and use it.


HorizontaInlineDatePicker

If you need to display a horizontal line that people can swipe to select dates, you can use the HorizontalInlineDatePicker. People can tap the selected date to get a native DatePicker to select the date from.

Usage

<dui:HorizontaInlineDatePicker SelectedDate="{Binding SelectedBirthday}"/>

Properties

Inspect the components properties class to further customise and use it.

Time Picker

A TimePicker should be used by you to let people pick a time. The TimePicker is an in-line button with a title that people tap to start picking the time. When a time is picked, the time will be displayed as part of the in-line button.

Usage

<dui:DateAndTimePicker SelectedTime="{Binding SelectedGroceryShopping}" />

Properties

Inspect the components properties class to further customize and use it.


DateAndTime Picker

A DateAndTimePicker should be used by you to let people pick both a date -and time. The DateAndTimePicker is two in-line buttons with a title that people tap to start picking the date or time. When date is picked, the date or time will be displayed as part of the in-line button.

Usage

<dui:DateAndTimePicker SelectedDateTime="{Binding SelectedDeadline}"/>

Properties

Inspect the components properties class to further customize and use it.

Clone this wiki locally