Popup Styling

By using the PopupSettings property (of type Telerik.XamarinForms.Input.PickerPopupSettings) of the ListPicker, you can modify the appearance of the dialog (popup). The PickerPopupSettings class exposes the following Style properties:

  • PopupViewStyle(of type Style with target type telerik:PickerPopupContentView)—Defines the popup view style.
  • HeaderStyle(of type Style with target type telerik: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 telerik: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 PickerPopupSettings also provides the following properties for popup customization:

  • PopupOutsideBackgroundColor—Defines the color outside of the popup.
  • IsPopupModal(bool)—Defines a Boolean value indicating if the popup will be closed when tapped outside of the popup. By default, the value of the IsPopupModal is false.

    When IsPopupModal="True", the UI behind the popup gets inactive and cannot be used until the popup is closed.

    When IsPopupModal="False", the popup can be closed when clicking outside the popup.

  • HeaderLabelText(string)—Specifies the text visualized in the popup header.

  • IsHeaderVisible(bool)—Specifies whether the Popup header is currently visible. By default, the value is True
  • IsFooterVisible(bool)—Specifies whether the Popup 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 PopupViewStyle, HeaderStyle, 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 PopupViewStyle

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

Define the HeaderStyle

<Style TargetType="telerik:PickerPopupHeaderView" x:Key="headerStyle">
    <Setter Property="BackgroundColor" Value="#1188FF"/>
    <Setter Property="HeightRequest" Value="64"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
    <Setter Property="VerticalOptions" Value="FillAndExpand"/>
</Style>

Define the HeaderLabelStyle

<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="18"/>
    <Setter Property="FontAttributes" Value="Bold"/>
</Style>

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 DateTimePicker control looks like when the styles described above are applied:

ListPicker

See Also

In this article
Not finding the help you need?