.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 typeStyle
with target typetelerik:PickerDropDownContentView
)—Defines the dropdown view style. -
FooterStyle
(of typeStyle
with target typetelerik:PickerPopupFooterView
)—Defines the dropdown footer style. -
AcceptButtonStyle
(of typeStyle
with target typeButton
)—Defines the Accept button style. -
CancelButtonStyle
(of typeStyle
with target typeButton
)—Defines the Cancel button style.
The DropDownSettings
also provides the following properties for dropdown customization:
-
Placement
(of typePlacementMode
)—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 isTrue
. -
AcceptButtonText
(string
)—Defines the text visualized for theAccept
button. By default, the text isOK
. -
CancelButtonText
(string
)—Defines the text visualized for theCancel
button. By default, the text isCancel
.
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
andSelectionHighlightStyle
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 PickerMode="DropDown"
DefaultHighlightedDate="2020,05,15"
AutomationId="dateTimePicker">
<telerik:RadDateTimePicker.DropDownSettings>
<telerik:PickerDropDownSettings DropDownViewStyle="{StaticResource dropDownViewStyle}"
FooterStyle="{StaticResource footerStyle}"
AcceptButtonStyle="{StaticResource acceptButtonStyle}"
CancelButtonStyle="{StaticResource cancelButtonStyle}"
AcceptButtonText="{StaticResource acceptButtonText}"
CancelButtonText="{StaticResource cancelButtonText}" />
</telerik:RadDateTimePicker.DropDownSettings>
</telerik:RadDateTimePicker>
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"