New to Telerik UI for .NET MAUI? Start a free 30-day trial

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.

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 DropDown Style

See Also

In this article
Not finding the help you need?