Styling

List Picker for Xamarin provides the followind Style properties for customizing its look:

  • ItemStyle(of type Style with target type is telerikDataControls:SpinnerItemView): Defines the style applied to the list of items.
  • SelectedItemStyle(of type Style with target type is telerikDataControls:SpinnerItemView): Defines the style applied to the seledted item.
  • SelectionHighlightStyle(of type Style with target type is telerikPrimitives:RadBorder): Specifies the style applied to the border where the current selection is.
  • PlaceholderLabelStyle(of type Style with target type is Label): Defines the style applied to the placeholder label.
  • DisplayLabelStyle(of type Style with target type is Label): Defines the style applied to the label which is visualized when item of the list is selected.
  • SelectorSettings(Telerik.XamarinForms.Input.PickerPopupSelectorSettings).

Using the SelectorSettings property of the RadPickerBase class, you could style the dialog(popup) through the following properties:

  • PopupViewStyle(of type Style wich target type telerikInput:PickerPopupContentView): Defines the popup view style.
  • HeaderStyle(of type Style with target type telerikInput:PickerPopupHeaderView): Defines the popup header style.
  • HeaderLabelStyle(of type Style with target type Label): Defines the popup header label style.
  • FooterStyle(of type Style with target type telerikInput:PickerPopupFooterView): Defines the popup footer style.
  • AcceptButtonStyle(of type Style with target type Button): Defines the Accept button style.
  • CancelButtonStyle(of type Style with target type Button): Defines the Cancel button style.

The SelectorSetting also provides the following properties for popup customization:

  • PopupOutsideBackgroundColor(Xamarin.Forms.Color): Defines the color outside of the popup.
  • HeaderLabelText(string): Specifies the text visualized in the popup header.
  • AcceptButtonText(string): Defines the text visualized for the accept button. By default the text is OK.
  • CancelButtonText(string): Defines the text visualized for the cancel button. By default the text is Cancel.

Example

Here is a sample example that shows how the styling properties are applied.

A sample List Picker definition:

<telerikInput:RadListPicker Placeholder="Pick a City Name!"
                            ItemsSource="{Binding Items}" 
                            DisplayMemberPath="Name"
                            IsLooping="True"
                            DisplayStringFormat="You have picked: {0}"
                            DisplayLabelStyle="{StaticResource displayLabelStyle}"
                            ItemStyle="{StaticResource ItemStyle}"
                            SelectedItemStyle="{StaticResource SelectedItemStyle}"
                            PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}">
    <telerikInput:RadListPicker.BindingContext>
        <local:ViewModel/>
    </telerikInput:RadListPicker.BindingContext>
    <telerikInput:RadListPicker.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}" 
                   TextColor="#4A4949"
                   VerticalTextAlignment="Center" 
                   HorizontalTextAlignment="Center"/>
        </DataTemplate>
    </telerikInput:RadListPicker.ItemTemplate>
    <telerikInput:RadListPicker.SelectorSettings>
        <telerikInput:PickerPopupSelectorSettings PopupOutsideBackgroundColor="#4A4949F"
                                                  PopupViewStyle="{StaticResource popupViewStyle}"
                                                  HeaderStyle="{StaticResource headerStyle}"
                                                  HeaderLabelText="Select city"
                                                  HeaderLabelStyle="{StaticResource headerLabelStyle}"
                                                  FooterStyle="{StaticResource footerStyle}"
                                                  AcceptButtonStyle="{StaticResource acceptButtonStyle}"
                                                  CancelButtonStyle="{StaticResource cancelButtonStyle}"/>
    </telerikInput:RadListPicker.SelectorSettings>
</telerikInput:RadListPicker>

and here are how the styles are defined in the page resources

Item Style

<Style TargetType="telerikDataControls:SpinnerItemView" x:Key="ItemStyle">
    <Setter Property="BackgroundColor" Value="#F8F8F8"/>
    <Setter Property="CornerRadius" Value="0"/>
</Style>

SelectedItem Style

<Style TargetType="telerikDataControls:SpinnerItemView" x:Key="SelectedItemStyle">
    <Setter Property="BackgroundColor" Value="LightGray"/>
    <Setter Property="CornerRadius" Value="0"/>
    <Setter Property="BorderThickness" Value="0"/>
</Style>

PlaceholderLabel Style

<Style TargetType="Label" x:Key="placeholderLabelStyle">
    <Setter Property="TextColor" Value="#4A4949"/>
    <Setter Property="VerticalTextAlignment" Value="Center"/>
    <Setter Property="HorizontalTextAlignment" Value="Center"/>
    <Setter Property="HeightRequest" Value="50"/>
</Style>

DisplayLabel Style

<Style TargetType="Label" x:Key="displayLabelStyle">
    <Setter Property="TextColor" Value="Black"/>
    <Setter Property="VerticalTextAlignment" Value="Center"/>
    <Setter Property="HorizontalTextAlignment" Value="Center"/>
    <Setter Property="HeightRequest" Value="50"/>
</Style>

PopupView Style

<Style TargetType="telerikInput:PickerPopupContentView" x:Key="popupViewStyle">
    <Setter Property="BackgroundColor" Value="White"/>
    <Setter Property="WidthRequest" Value="270"/>
</Style>

Header Style

<Style TargetType="telerikInput:PickerPopupHeaderView" x:Key="headerStyle">
    <Setter Property="BackgroundColor" Value="#00B5DC"/>
    <Setter Property="HeightRequest" Value="60"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
    <Setter Property="VerticalOptions" Value="FillAndExpand"/>
</Style>

HeaderLabel Style

<Style TargetType="Label" x:Key="headerLabelStyle">
    <Setter Property="TextColor" Value="White"/>
    <Setter Property="HorizontalOptions" Value="Center"/>
    <Setter Property="VerticalOptions" Value="Center"/>
    <Setter Property="FontSize" Value="Title"/>
</Style>

FooterStyle

<Style TargetType="telerikInput:PickerPopupFooterView" x:Key="footerStyle">
    <Setter Property="BackgroundColor" Value="Transparent"/>
</Style>

AcceptButton Style

<Style TargetType="Button" x:Key="acceptButtonStyle">
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <Setter Property="Text" Value="OK"/>
    <Setter Property="TextColor" Value="#00B5DC"/>
</Style>

CancelButton Style

<Style TargetType="Button" x:Key="cancelButtonStyle">
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <Setter Property="Text" Value="CANCEL"/>
    <Setter Property="TextColor" Value="#00B5DC"/>
</Style>

A sample business model:

public class City
{
    public string Name { get; set; }
    public int Population { get; set; }
}

and a ViewModel:

public class ViewModel
{
    public ViewModel()
    {
        this.Items = new ObservableCollection<City>
        {
            new City { Name = "Tokyo", Population = 13929286 },
            new City { Name = "New York", Population = 8623000 },
            new City { Name = "London", Population = 8908081 },
            new City { Name = "Madrid", Population = 3223334 },
            new City { Name = "Los Angeles", Population = 4000000},
            new City { Name = "Paris", Population = 2141000 },
            new City { Name = "Beijing", Population = 21540000 },
            new City { Name = "Singapore", Population = 5612000 },
            new City { Name = "New Delhi", Population = 18980000 },
            new City { Name = "Bangkok", Population = 8305218 },
            new City { Name = "Berlin", Population = 3748000 },
        };
    }

    public ObservableCollection<City> Items { get; set; }
}

also you will need to add the following namespaces:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"

This is how the List Picker looks when the styling properties are applied:

List Picker Styling

A sample Styling example can be found in the ListPicker/Features folder of the SDK Samples Browser application.

See Also

In this article
Not finding the help you need? Improve this article