.NET MAUI TimeSpanPicker Templates

Updated on Aug 11, 2026

If the default templates of the control do not suit your needs, you can define custom ones.

The available templates for customizing are:

• PlaceholderTemplate(ControlTemplate)—Defines the template visualized for the placeholder.
• DisplayTemplate(ControlTemplate)—Defines the template visualized when the picked date/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.

Placeholder Template

XAML

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

Display Template

XAML

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

Header Template

XAML

<ControlTemplate x:Key="headerTemplate">
    <Grid>
        <Label Text="Select Duration"
               Padding="20"
               TextColor="White"
               VerticalTextAlignment="Center"
               HorizontalTextAlignment="Center"
               BackgroundColor="#70B8FF"/>
    </Grid>
</ControlTemplate>

Footer Template

XAML

<ControlTemplate x:Key="footerTemplate">
    <StackLayout Orientation="Horizontal" Spacing="0" HorizontalOptions="FillAndExpand" BackgroundColor="#70B8FF">
        <telerik:RadButton Text="&#xE80A;"
                           FontFamily="TelerikFontExamples"
                           WidthRequest="75"
                           TextColor="White"
                           BackgroundColor="Transparent"
                           BorderWidth="0"
                           Command="{TemplateBinding CancelCommand}" />
        <telerik:RadButton Text="&#xE809;"
                           FontFamily="TelerikFontExamples"
                           WidthRequest="75"
                           TextColor="White"
                           BackgroundColor="Transparent"
                           BorderWidth="0"
                           Command="{TemplateBinding AcceptCommand}" />
    </StackLayout>
</ControlTemplate>

and the Time Span Picker definition:

XAML

<telerik:RadTimeSpanPicker PlaceholderTemplate="{StaticResource placeholderTemplate}"
                           DisplayTemplate="{StaticResource displayTemplate}"
                           AutomationId="timeSpanPicker">
    <telerik:RadTimeSpanPicker.PopupSettings>
        <telerik:PickerPopupSettings HeaderTemplate="{StaticResource headerTemplate}"
                                     FooterTemplate="{StaticResource footerTemplate}"/>
    </telerik:RadTimeSpanPicker.PopupSettings>
    <telerik:RadTimeSpanPicker.DropDownSettings>
        <telerik:PickerDropDownSettings FooterTemplate="{StaticResource footerTemplate}"/>
    </telerik:RadTimeSpanPicker.DropDownSettings>
</telerik:RadTimeSpanPicker>

See Also

• Commands