Templates

In case the default templates of the TimePicker control do not suit your needs, you can easily define a custom template.

The available templates for customization are:

  • PlaceholderTemplate(ControlTemplate)—Defines the template visualized for the placeholder.
  • DisplayTemplate(ControlTemplate)—Defines the template visualized when the picked time is displayed.
  • HeaderTemplate(ControlTemplate)—Defines what will be displayed inside the dialog (popup) header.
  • FooterTemplate(ControlTemplate)—Defines what will be displayed inside the dialog (popup) footer.

The example below shows a sample TimePicker definition with the listed above template properties applied:

  1. Define the TimePicker.

    <telerik:RadTimePicker SpinnerFormat="H:mm"
                              PlaceholderTemplate="{StaticResource placeholderTemplate}"
                              DisplayTemplate="{StaticResource displayTemplate}">
      <telerik:RadTimePicker.SelectorSettings>
          <telerik:PickerPopupSelectorSettings HeaderTemplate="{StaticResource headerTemplate}"
                                                    FooterTemplate="{StaticResource footerTemplate}"/>
      </telerik:RadTimePicker.SelectorSettings>
    </telerik:RadTimePicker>
    
  2. Add the following namespace:

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

    For the example, the template definitions are added to the page resources as follows.

PlaceholderTemplate

<ControlTemplate x:Key="placeholderTemplate">
    <Button Text="Pick a time"
            FontAttributes="Bold"
            TextColor="White"
            BackgroundColor="#B73562"
            HeightRequest="50" Command="{TemplateBinding ToggleCommand}" />
</ControlTemplate>

RadTimePicker PlaceholderTemplate

DisplayTemplate

<ControlTemplate x:Key="displayTemplate">
    <Button Text="{TemplateBinding DisplayString}"
            TextColor="White"
            BackgroundColor="#7BAEFF"
            HeightRequest="50"
            Command="{TemplateBinding ToggleCommand}" />
</ControlTemplate>

RadTimePicker DisplayTemplate

HeaderTemplate

<ControlTemplate x:Key="headerTemplate">
    <Label Text="Time Picker"
           TextColor="White"
           VerticalTextAlignment="Center"
           HorizontalTextAlignment="Center"
           BackgroundColor="#B73562"/>
</ControlTemplate>

FooterTemplate

<ControlTemplate x:Key="footerTemplate">
    <StackLayout Orientation="Horizontal" Spacing="0" HorizontalOptions="FillAndExpand" BackgroundColor="#B73562">
        <Button Text="No"
                TextColor="White"
                BackgroundColor="Transparent"
                Command="{TemplateBinding CancelCommand}" />
        <Button Text="Yes"
                TextColor="White"
                BackgroundColor="Transparent"
                Command="{TemplateBinding AcceptCommand}" />
    </StackLayout>
</ControlTemplate>

RadTimePicker FooterTemplate

See Also

In this article
Not finding the help you need?