DropDown Styling

By using the DropDownSettings property (of type Telerik.XamarinForms.Input.PickerDropDownSettings) of the ListPicker, you can modify the appearance of the dropdown. The PickerDropDownSettings class exposes the following Style properties:

  • DropDownViewStyle(of type Style with target type telerik:PickerDropDownContentView)—Defines the dropdown view style.
  • FooterStyle(of type Style with target type telerik:PickerPopupFooterView)—Defines the dropdown 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 DropDownSettings also provides the following properties for dropdown customization:

  • Placement(of type PlacementMode)—Specifies the position of the dropdown, can be set to Bottom, Right, Left, Top, Center or Relative.
  • HorizontalOffset \ VerticalOffset—Specifies the horizontal\vertical distance between the dropdown and the ListPicker.
  • IsFooterVisible(bool)—Specifies whether the DropDown footer is currently visible. By default, the value is True.
  • 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.

Namespaces

When you use DropDownViewStyle, FooterStyle, you will need to add the following namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Styling Examples

The following examples demonstrate how to define use the styling properties of the ListPicker.

Define the RadListPicker

Define the FooterStyle

<Style TargetType="telerik:PickerDropDownFooterView" x:Key="footerStyle">
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <Setter Property="HeightRequest" Value="60"/>
</Style>

Define the AcceptButtonStyle

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

Define the CancelButtonStyle

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

In addition, add the following namespace:

The following image shows what the ListPicker control looks like when the styles described above are applied:

ListPicker

See Also

In this article
Not finding the help you need?