.NET MAUI DateTimePicker DropDown Styling

By using the DropDownSettings property (of type Telerik.Maui.Controls.PickerDropDownSettings) of the DateTimePicker, 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 DateTimePicker.
• 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 dropdown, 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 DateTimePicker. For more detailed information on them go to DateTimePicker Styling topic.

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 DateTimePicker.

Define the RadDateTimePicker

<telerik:RadDateTimePicker BorderColor="#8660C5"
                           SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"
                           SpinnerStyle="{StaticResource spinnerStyle}"
                           SelectionHighlightStyle="{StaticResource selectionHighlightStyle}"
                           DisplayLabelStyle="{StaticResource displayLabelStyle}"
                           PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}"
                           ClearButtonStyle="{StaticResource clearButtonStyle}"
                           ToggleButtonStyle="{StaticResource toggleButtonStyle}"
                           AreSpinnerHeadersVisible="True"
                           IsClearButtonVisible="True"
                           IsToggleButtonVisible="True"
                           AutomationId="dateTimePicker"/>

Define the DropDownViewStyle

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

Define the Footer Style

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

Define the AcceptButton Style

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

Define the CancelButton Style

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

In addition, add the following namespaces:

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

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

See Also

• DateTimePicker Styling
• Formatting
• Visual Structure