.NET MAUI TimeSpanPicker Templates

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>