.NET MAUI TimePicker DropDown Styling
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 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 TimePicker. -
IsFooterVisible
(bool
)—Specifies whether the DropDown footer is currently visible. By default, the value isTrue
. -
AcceptButtonText
(string
)—Defines the text visualized for the Accept button. By default, the text isOK
. -
CancelButtonText
(string
)—Defines the text visualized for the Cancel button. By default, the text isCancel
.
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 toSpinnerStyle
,SpinnerHeaderStyle
andSelectionHighlightStyle
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
<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
<Style TargetType="telerik:PickerDropDownContentView" x:Key="dropDownViewStyle">
<Setter Property="BackgroundColor" Value="#E4FCFF"/>
</Style>
Define the FooterStyle
<Style TargetType="telerik:PickerDropDownFooterView" x:Key="footerStyle">
<Setter Property="BackgroundColor" Value="#00B5DC"/>
</Style>
Define the AcceptButtonStyle
<Style TargetType="Button" x:Key="acceptButtonStyle">
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="TextColor" Value="White"/>
</Style>
Define the AcceptButtonText
<x:String x:Key="acceptButtonText">Accept</x:String>
Define the CancelButtonStyle
<Style TargetType="Button" x:Key="cancelButtonStyle">
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="TextColor" Value="White"/>
</Style>
Define the CancelButtonText
<x:String x:Key="cancelButtonText">Reject</x:String>
Namespaces
In addition, add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"