.NET MAUI TimePicker DropDown Styling

Updated over 6 months ago

By using the DropDownSettings property (of type Telerik.Maui.Controls.PickerDropDownSettings) of the TimeSpanPicker, you can modify the appearance of the drop-down. 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 TimePicker.
• 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.

DropDownSettings provides styling options for the drop-down, its footer and position, and other. If you need to customize the look&feel of the spinner controls that show the available date values, please refer to SpinnerStyle, SpinnerHeaderStyle and SelectionHighlightStyle properties of the TimeSpanPicker. For more detailed information on them go to TimeSpanPicker Styling topic.

Example

The following example shows how the styling properties are applied.

Define the RadTimeSpanPicker

xaml

<telerik:RadTimeSpanPicker PickerMode="DropDown" AutomationId="timeSpanPicker">
    <telerik:RadTimeSpanPicker.DropDownSettings>
        <telerik:PickerDropDownSettings DropDownViewStyle="{StaticResource dropDownViewStyle}"
                                        FooterStyle="{StaticResource footerStyle}"
                                        AcceptButtonStyle="{StaticResource acceptButtonStyle}"
                                        CancelButtonStyle="{StaticResource cancelButtonStyle}"
                                        AcceptButtonText="{StaticResource acceptButtonText}"
                                        CancelButtonText="{StaticResource cancelButtonText}"/>
    </telerik:RadTimeSpanPicker.DropDownSettings>
</telerik:RadTimeSpanPicker>

Define the DropDownViewStyle

xaml

<Style TargetType="telerik:PickerDropDownContentView" x:Key="dropDownViewStyle">
    <Setter Property="BackgroundColor" Value="#E4FCFF"/>
</Style>

Define the FooterStyle

xaml

<Style TargetType="telerik:PickerPopupFooterView" x:Key="footerStyle">
    <Setter Property="BackgroundColor" Value="#00B5DC"/>
</Style>

Define the AcceptButtonStyle

xaml

<Style TargetType="Button" x:Key="acceptButtonStyle">
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <Setter Property="TextColor" Value="White"/>
</Style>

Define the AcceptButtonText

xaml

<x:String x:Key="acceptButtonText">Accept</x:String>

Define the CancelButtonStyle

xaml

<Style TargetType="Button" x:Key="cancelButtonStyle">
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <Setter Property="TextColor" Value="White"/>
</Style>

Define the CancelButtonText

xaml

<x:String x:Key="cancelButtonText">Reject</x:String>

Namespaces

In addition, add the following namespace:

XAML

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

See Also

• TimeSpanPicker Styling
• Custom Templates
• Commands
• Visual Structure