Getting Started with List Picker for Xamarin

Need a Picker control which allows you to select a single item from a list of items? – Check out the freshly released Telerik UI for Xamarin List Picker control.

For Xamarin developers, the new List Picker in Telerik UI for Xamarin can be used in various scenarios. For example, you can pick a color from a list of colors, create a list of sizes and pick one of them, etc.

We have added fancy features to the list picker control, as well as the ability to fully customize its look and appearance through the flexible styling API.

Features:

• Looping - a very useful feature if you want to loop a list of items and infinitely scroll them
• Templates-define a template for the list items, as well as the selected one
• UI Vrtualization -visual elements are reused when scrolling to boost performance
• Display String Format - chose what text to display when an item from the list is picked
• Flexible Styling API- style the items, popup, header and footer of the picker
• Command Support- commands for clearing a selected item, opening and closing the dialog

Looping

The List Picker for Xamarin provides a looping functionality which allows you to loop the list of items after reaching the last item. It is very easy to enable this feature, just set the List Picker IsLooping property to true and your list of items will have the ability to scroll infinitely.

<telerikInput:RadListPickerPlaceholder="Select color:"
ItemsSource="{Binding Colors}"
IsLooping="True">
<telerikInput:RadListPicker.ItemTemplate>
<DataTemplate>
<!-- your datatemplate -->
</DataTemplate>
</telerikInput:RadListPicker.ItemTemplate>
</telerikInput:RadListPicker>

Templates

You can fully customize the appearance of the List Picker items through the ItemTemplate property and customize the look of the selected one through the SelectedItemTemplate property. The list itself is visualized inside a popup, so we also give you the option to customize the its header and footer through the HeaderTemplate and the FooterTemplate properties. List Picker for Xamarin offers the useful functionality of placeholder text. Developers can define what text is to be displayed when no item is selected, thus indicating to the end user the data they need to input, e.g. “Select color.” You can set a text using the Placeholder property or customize the default look through the PlaceholderTemplate property.

Sample ItemTemplate definition

<DataTemplatex:Key="itemTemplate">
<LabelText="{Binding Population}"
BackgroundColor="LightYellow"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"/>
</DataTemplate>

SelectedItemTemplate

<DataTemplatex:Key="selectedItemTemplate">
<LabelText="{Binding Name}"
BackgroundColor="LightBlue"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"/>
</DataTemplate>

PlaceholderTemplate

<ControlTemplatex:Key="footerTemplate">
<StackLayoutOrientation="Horizontal"
Spacing="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="#B73562">
<ButtonText="Cancel"
TextColor="White"
BackgroundColor="Transparent"
Command="{TemplateBinding CancelCommand}"/>
<ButtonText="OK"
TextColor="White"
BackgroundColor="Transparent"
Command="{TemplateBinding AcceptCommand}"/>
</StackLayout>
</ControlTemplate>

For more details about List Picker Templates and a sample demo, visit the Templates article from our documentation.

DisplaySting

The DisplayStringFormat property defines what text will be displayed when an item is selected, and you can also apply it when an item is selected.

Additionally, we have added a DisplayMemberPath property which allows you to define the path of the property which is to be displayed as DisplayString.

Flexible Styling API

We have exposed flexible Styling API which allows you easily style the List Picker control. For example:

• ItemStyle property gives you the opportunity to style the items of the list and the SelectedItemStyle, the selected item
• SelectionHighlightStyle
• PlaceholderLabelStyle allows you to style the placeholder of the List Picker, and if the default placeholder does not suit your needs you can customize it using the PlaceholderTemplate property.
• DisplayLabelStyle gives you the opportunity to style the text displayed when an item from the list is picked.

In addition we have exposed a styling API for the popup. You can easily style its header, footer, cancel and accept buttons. All you need to do is set the ListPicker.SelectorSettings property. The property is of type PickerPopupSelectorSettings and it provides the following styling options for the popup and its header view:

• PopupHeaderView
• HeaderStyle
• HeaderLabelStyle
• FooterStyle
• To add the buttons inside the footer, use AcceptButtonStyle and CancelButtonStyle
• Set a background color outside of the popup using the PopupOutsideBackgroundColor
• Change the text for the Popup header using the HeaderLabelText
• Change the text inside the accept and cancel buttons, or for example you can set an icon, through the AcceptButtonText and CancelButtonText properties

We have a styling article in our documentation which describes the styling capabilities of the control.

Demo

Let’s create a demo that allows you to choose a music genre from a list or genres.

Here is a sample Genre model:

publicclassGenre
{
publicGenre(stringmusicGenre)
{
this.MusicGenre = musicGenre;
}
publicstringMusicGenre { get; set; }
}

and the Music model:

publicclassMusic
{
publicMusic(stringartist, stringsong, Color iconColor)
{
this.Artist = artist;
this.Song = song;
this.IconColor = iconColor;
}
publicstringArtist { get; set; }
publicstringSong { get; set; }
publicColor IconColor { get; set; }
}

here is the ViewModel:

publicclassViewModel : NotifyPropertyChangedBase
{
publicViewModel()
{
this.Genres = newObservableItemCollection<Genre>()
{
newGenre("Alternative Rock"),
newGenre("New Wave"),
newGenre("Jazz"),
newGenre("Pop Rock"),
newGenre("Punk Rock"),
newGenre("Progressive House"),
};
this.RecentlyPlayed = newObservableItemCollection<Music>()
{
newMusic("Nirvana","Smells Like Teen Spirit", Color.FromHex("#F3C163")),
newMusic("Queen","I Want To Break Free", Color.FromHex("#007AFF")),
newMusic("Depeche Mode","Personal Jesus", Color.FromHex("#CE3A6D")),
newMusic("The Police","Personal Jesus", Color.FromHex("#CE3A6D")),
newMusic("Green Day ","Basket Case", Color.FromHex("#F3C163")),
newMusic("David Guetta ft. Ne-Yo, Akon","Play Hard", Color.FromHex("#CE3A6D")),
newMusic("Louis Armstrong","What a wonderful world", Color.FromHex("#007AFF")),
newMusic("Radiohead ","Creep", Color.FromHex("#F3C163")),
newMusic("The Clash","Should I Stay or Should I Go ", Color.FromHex("#007AFF")),
newMusic("Blondie","Call Me", Color.FromHex("#CE3A6D")),
newMusic("Calvin Harris","Call Me", Color.FromHex("#CE3A6D")),
newMusic("Ray Charles ","I got a woman", Color.FromHex("#007AFF")),
newMusic("Red Hot Chili Peppers","Aeroplane", Color.FromHex("#F3C163")),
newMusic("The Beatles","Help", Color.FromHex("#007AFF")),
}; 
}
publicObservableItemCollection<Genre> Genres { get; set; }
publicObservableItemCollection<Music> RecentlyPlayed { get; set; }
}

Here is how the List Picker is defined in XAML:

<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinitionHeight="60"/>
<RowDefinitionHeight="Auto"/>
<RowDefinitionHeight="*"/>
<RowDefinitionHeight="Auto"/>
</Grid.RowDefinitions>
<StackLayoutGrid.Row="0"BackgroundColor="#EAEAEA"HeightRequest="60">
<ImageSource="music.png"VerticalOptions="End"HorizontalOptions="End"/>
</StackLayout>
<StackLayoutMargin="16, 40, 16, 0"Grid.Row="1">
<LabelText="Listen to Top Music Genres"TextColor="#007AFF"FontSize="22"Margin="0,0,0,24"/>
<LabelText="Music Genre:"TextColor="Black"FontSize="15"FontAttributes="Bold"Margin="0, 0, 0, 21"/>
<telerikInput:RadListPickerx:Name="genrePicker"
Placeholder="Select Music Genre to listen"
ItemsSource="{Binding Genres}"
IsLooping="True"
SelectionHighlightStyle="{StaticResource SelectionHighlightStyle}"
DisplayStringFormat="Your choice is: {0}"
DisplayMemberPath="MusicGenre"
DisplayLabelStyle="{StaticResource displayLabelStyle}"
PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}">
<telerikInput:RadListPicker.ItemTemplate>
<DataTemplate>
<LabelText="{Binding MusicGenre}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"/>
</DataTemplate>
</telerikInput:RadListPicker.ItemTemplate>
<telerikInput:RadListPicker.SelectorSettings>
<telerikInput:PickerPopupSelectorSettingsHeaderLabelText="Genre"
HeaderStyle="{StaticResource HeaderStyle}"
HeaderLabelStyle="{StaticResource HeaderLabelStyle}"/>
</telerikInput:RadListPicker.SelectorSettings>
</telerikInput:RadListPicker>
<telerikPrimitives:RadBorderBorderThickness="0, 0, 0, 1"BorderColor="#919191"/>
<LabelText="Recently Plaied:"TextColor="#919191"FontAttributes="Bold"FontSize="15"Margin="0, 25, 0, 0"/>
</StackLayout>
<telerikDataControls:RadListViewGrid.Row="2"ItemsSource="{Binding RecentlyPlayed}">
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<listView:ListViewTemplateCell>
<listView:ListViewTemplateCell.View>
<Grid>
<StackLayoutOrientation="Horizontal"Margin="10, 15, 10, 15"VerticalOptions="Center"HorizontalOptions="Start">
<telerikPrimitives:RadBorderBorderColor="{Binding IconColor}"BorderThickness="3"BackgroundColor="{Binding IconColor}"WidthRequest="5"HeightRequest="5"/>
<LabelText="{Binding Artist}"FontSize="12"FontAttributes="Bold"TextColor="Black"/>
<LabelText=" - "/>
<LabelText="{Binding Song}"FontSize="12"TextColor="#919191"/>
</StackLayout>
</Grid>
</listView:ListViewTemplateCell.View>
</listView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
<StackLayoutGrid.Row="3"BackgroundColor="#EAEAEA"HeightRequest="65">
<telerikPrimitives:RadBorderVerticalOptions="CenterAndExpand"
WidthRequest="200"
HeightRequest="40"
HorizontalOptions="CenterAndExpand">
<telerikInput:RadButtonText="Play Music"
CornerRadius="20"
Padding="10,5,10,5"
BorderColor="#007AFF"
BorderWidth="1"
TextColor="#007AFF"
FontSize="15"
Clicked="OnPlayButtonClicked"
BackgroundColor="Transparent"/>
</telerikPrimitives:RadBorder>
</StackLayout>
</Grid>
</ContentPage.Content>

You also need to add the needed styles to the page Resources:

<ContentPage.Resources>
<ResourceDictionary>
<StyleTargetType="Label"x:Key="placeholderLabelStyle">
<SetterProperty="TextColor"Value="#919191"/>
</Style>
<StyleTargetType="Label"x:Key="displayLabelStyle">
<SetterProperty="TextColor"Value="Black"/>
<SetterProperty="FontAttributes"Value="Bold"/>
</Style>
<StyleTargetType="Label"x:Key="HeaderLabelStyle">
<SetterProperty="TextColor"Value="Black"/>
<SetterProperty="FontAttributes"Value="Bold"/>
<SetterProperty="FontSize"Value="21"/>
<SetterProperty="HorizontalOptions"Value="Center"/>
<SetterProperty="VerticalOptions"Value="Center"/>
</Style>
<StyleTargetType="telerikInput:PickerPopupHeaderView"x:Key="HeaderStyle">
<SetterProperty="BackgroundColor"Value="#F8F8F8"/>
<SetterProperty="HeightRequest"Value="64"/>
</Style>
<StyleTargetType="telerikPrimitives:RadBorder"x:Key="SelectionHighlightStyle">
<SetterProperty="BorderColor"Value="LightGray"/>
<SetterProperty="CornerRadius"Value="2"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>

This is the final result:

Tell Us What You Think

We would love to hear what you think about the List Picker control and how we can continue to improve it. If you have any ideas for features to add, do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.

Don’t forget to check out the various demos of the control in our SDK Sample Browser and the Telerik UI for Xamarin Demos application.

If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trial, offering all the functionalities and controls at your disposal at zero cost.

Start Your Trial

Happy coding with our controls and stay with us! More blog posts with everything you need to know about our Date and Time Picker and Custom (Templated) Picker controls are on the way.