Customizations in .NET MAUI Time Picker (SfTimePicker)

12 Sep 202524 minutes to read

The .NET MAUI Time Picker header, column header, footer, and selection views can be customized.

Header Customization

Customize the time picker header by using the HeaderView property of the SfTimePicker.

Set the header text

The SfTimePicker control allows you to add the header text by setting the Text property in the PickerHeaderView. To enable the header view, set the Height property of the PickerHeaderView to a value greater than 0. The default value of the Height property is 0.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.HeaderView >
        <picker:PickerHeaderView Height="40" Text="Time Picker"/>
    </picker:SfTimePicker.HeaderView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timepicker.HeaderView = new PickerHeaderView()
{
    Height = 40,
    Text = "Time Picker"
};

this.Content = TimePicker;

Set header text in .NET MAUI Time picker.

Set the divider color

The SfTimePicker control allows you to customize the header divider color by setting the DividerColor property of the PickerHeaderView.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.HeaderView >
        <picker:PickerHeaderView DividerColor="Red" />
    </picker:SfTimePicker.HeaderView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timepicker.HeaderView = new PickerHeaderView()
{
    DividerColor = Colors.Red,
};

this.Content = timePicker;

Set header divider color in .NET MAUI Time picker.

Customization of the header

Customize the header text style and background color of the Time picker using the TextStyle and Background properties of the HeaderView in the PickerHeaderView.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.HeaderView >
        <picker:PickerHeaderView Background="#D3D3D3">
            <picker:PickerHeaderView.TextStyle >
                <picker:PickerTextStyle FontSize="15" TextColor="Black" />
            </picker:PickerHeaderView.TextStyle>
        </picker:PickerHeaderView>
    </picker:SfTimePicker.HeaderView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.HeaderView = new PickerHeaderView()
{
    Background = Color.FromArgb("#6750A4"),
    TextStyle = new PickerTextStyle()
    {
        TextColor = Colors.White,
        FontSize = 15,
    }
};

this.Content = timePicker;

Custom header in .NET MAUI Time picker.

Custom Header Appearance using Datatemplate

You can customize the time picker header appearance by using the HeaderTemplate property in the SfTimePicker.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.HeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#BB9AB1">
                <Label HorizontalOptions="Center" VerticalOptions="Center" Text="Select a Time" TextColor="White"/>
            </Grid>
        </DataTemplate>
    </picker:SfTimePicker.HeaderTemplate>
</picker:SfTimePicker>

Set header template in .NET MAUI Time picker.

NOTE

If a template is applied to the header in the PickerHeaderView, the remaining header properties will not have any effect, except for the DividerColor Property.

Custom Header appearance using DataTemplateSelector

You can customize the time picker header appearance by using the HeaderTemplate property in the SfTimePicker. The DataTemplateSelector allows you to choose a DataTemplate at runtime based on the value bound to the time picker header. This lets you apply a custom data template to the header and customize its appearance based on specific conditions.

<Grid.Resources>
    <DataTemplate x:Key="currentTimeTemplate">
        <Grid Background = "#987D9A" >
            <Label HorizontalOptions="Center" VerticalOptions="Center" Text="Select a Time" TextColor="Red"/>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="futureTimeTemplate">
        <Grid Background = "LightGreen" >
            <Label HorizontalOptions="Center" VerticalOptions="Center" Text="Select a Time" TextColor="Orange"/>
        </Grid>
    </DataTemplate>
    <local:TimeTemplateSelector x:Key="headerTemplateSelector" CurrentTimeTemplate="{StaticResource currentTimeTemplate}"  FutureTimeTemplate="{StaticResource futureTimeTemplate}"/>
    <picker:SfTimePicker x:Name="timePicker" HeaderTemplate="{StaticResource headerTemplateSelector}">
    </picker:SfTimePicker>
</Grid.Resources>
public class TimeTemplateSelector : DataTemplateSelector
{
    public TimeTemplateSelector()
    {
    }
    public DataTemplate CurrentTimeTemplate { get; set; }
    public DataTemplate FutureTimeTemplate { get; set; }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var Details = item as SfTimePicker;
        if (Details != null)
        {
            if (Details.SelectedTime <= DateTime.Now.TimeOfDay)
                return CurrentTimeTemplate;
        }
        return FutureTimeTemplate;
    }
}

Column Header Customization

Customize the time picker column header by using the ColumnHeaderView property of the SfTimePicker.

Set the custom column header

The SfTimePicker provides a custom text to its column header by setting the ColumnHeaderView property of the SfTimePicker. It contains HourHeaderText, MinuteHeaderText, SecondHeaderText, and MeridiemHeaderText properties of the TimePickerColumnHeaderView. The default value of the HourHeaderText property is “Hour”, MinuteHeaderText is “Minute”, SecondHeaderText is “Second”, and MerdiemHeaderText is “string.Empty”.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.ColumnHeaderView >
        <picker:TimePickerColumnHeaderView HourHeaderText="Hour Column"
                                           MinuteHeaderText="Minute Column"
                                           SecondHeaderText="Second Column"
                                           MeridiemHeaderText="Meridiem Column"/>
    </picker:SfTimePicker.ColumnHeaderView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.ColumnHeaderView = new TimePickerColumnHeaderView()
{
    HourHeaderText = "Hour Column",
    MinuteHeaderText = "Minute Column",
    SecondHeaderText = "Second Column",
    MerdiemHeaderText = "Merdiem Column"
};

this.Content = timePicker;

Set Column header text in .NET MAUI Time picker.

Set the divider color

The SfTimePicker control allows you to customize the column header divider color by setting the DividerColor property of the TimePickerColumnHeaderView.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.ColumnHeaderView >
        <picker:TimePickerColumnHeaderView DividerColor="Red" />
    </picker:SfTimePicker.ColumnHeaderView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timepicker.ColumnHeaderView = new TimePickerColumnHeaderView()
{
    DividerColor = Colors.Red,
};

this.Content = timePicker;

Set column header divider in .NET MAUI Time picker.

Customization of the column header

Customize the column header view text style and background color of the Time Picker using the TextStyle and Background properties of the TimePickerColumnHeaderView.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.ColumnHeaderView >
        <picker:TimePickerColumnHeaderView Background="#D3D3D3">
            <picker:TimePickerColumnHeaderView.TextStyle >
                <picker:PickerTextStyle FontSize="15" TextColor="Black" />
            </picker:TimePickerColumnHeaderView.TextStyle>
        </picker:TimePickerColumnHeaderView>
    </picker:SfTimePicker.ColumnHeaderView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.ColumnHeaderView = new TimePickerColumnHeaderView()
{
    Background = Color.FromArgb("#D3D3D3"),
    TextStyle = new PickerTextStyle()
    {
        TextColor = Colors.Black,
        FontSize = 15,
    }
};

this.Content = timePicker;

Custom column header in .NET MAUI Time picker.

Custom Column Header Appearance using Datatemplate

You can customize the time picker column header appearance by using the ColumnHeaderTemplate property in the SfTimePicker.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.ColumnHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#BB9AB1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Label Text="Hour" Grid.Column="0" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                <Label Text="Minute" Grid.Column="1" TextColor="White"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                <Label Text="Second" Grid.Column="2" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </picker:SfTimePicker.ColumnHeaderTemplate>
</picker:SfTimePicker>

Set column header template in .NET MAUI Time picker.

NOTE

If a template is applied to the column header in the TimePickerColumnHeaderView, the remaining column header properties will not have any effect, except for the DividerColor.

Custom Column Header appearance using DataTemplateSelector

You can customize the time picker column header appearance by using the ColumnHeaderTemplate property in the SfTimePicker. The DataTemplateSelector allows you to choose a DataTemplate at runtime based on the value bound to the time picker column header. This lets you apply a custom data template to the column header and customize its appearance based on specific conditions.

<Grid.Resources>
    <DataTemplate x:Key="currentTimeTemplate">
        <Grid Background="LightBlue">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Label Text="Hour" Grid.Column="0" TextColor="Red" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
            <Label Text="Minute" Grid.Column="1" TextColor="Red"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
            <Label Text="Second" Grid.Column="2" TextColor="Red" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="futureTimeTemplate">
        <Grid Background="LightGreen">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Label Text="Hour" Grid.Column="0" TextColor="Orange" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
            <Label Text="Minute" Grid.Column="1" TextColor="Orange"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
            <Label Text="Second" Grid.Column="2" TextColor="Orange" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
        </Grid>
    </DataTemplate>
    <local:TimeTemplateSelector x:Key="columnHeaderTemplateSelector" CurrentTimeTemplate="{StaticResource currentTimeTemplate}"  FutureTimeTemplate="{StaticResource futureTimeTemplate}"/>
    <picker:SfTimePicker x:Name="timePicker" ColumnHeaderTemplate="{StaticResource columnHeaderTemplateSelector}">
    </picker:SfTimePicker>
</Grid.Resources>
public class TimeTemplateSelector : DataTemplateSelector
{
    public TimeTemplateSelector()
    {
    }
    public DataTemplate CurrentTimeTemplate { get; set; }
    public DataTemplate FutureTimeTemplate { get; set; }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var Details = item as SfTimePicker;
        if (Details != null)
        {
            if (Details.SelectedTime <= DateTime.Now.TimeOfDay)
                return CurrentTimeTemplate;
        }
        return FutureTimeTemplate;
    }
}

Customize the time picker footer view by using the FooterView property of theSfTimePicker.

In the SfTimePicker control, validation buttons (OK and Cancel) can be customized by setting the OkButtonText and CancelButtonText properties of the PickerFooterView. It allows you to confirm or cancel the selected time. The OkButtonText can be enabled using the ShowOkButton property in the PickerFooterView.
The Default value of the OkButtonText property is “OK”, and CancelButtonText is “Cancel”. To enable the footer view, set the Height property of the PickerFooterView to a value greater than 0. The default value of the Height property is 0.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.FooterView >
        <picker:PickerFooterView Height="40" OkButtonText="Save"
                                 CancelButtonText="Exit"/>
    </picker:SfTimePicker.FooterView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.FooterView = new PickerFooterView()
{
    Height = 40,
    OkButtonText = "Save",
    CancelButtonText = "Exit",
};

this.Content = timePicker;

Set footer text in .NET MAUI Time picker.

Set the divider color

The SfTimePicker control allows you to customize the footer divider color by setting the DividerColor property of the PickerFooterView.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.FooterView >
        <picker:PickerFooterView DividerColor="Red" />
    </picker:SfTimePicker.FooterView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timepicker.FooterView = new PickerFooterView()
{
    DividerColor = Colors.Red,
};

this.Content = timePicker;

Set divider color in .NET MAUI Time picker.

Customize the footer text style and background color of the Time Picker using the TextStyle and Background properties of the PickerFooterView.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.FooterView >
        <picker:PickerFooterView Background="#D3D3D3">
            <picker:PickerFooterView.TextStyle >
                <picker:PickerTextStyle FontSize="15" TextColor="Black" />
            </picker:PickerFooterView.TextStyle>
        </picker:PickerFooterView>
    </picker:SfTimePicker.FooterView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.FooterView = new PickerFooterView()
{
    Background = Color.FromArgb("#D3D3D3"),
    TextStyle = new PickerTextStyle()
    {
        TextColor = Colors.Black,
        FontSize = 15,
    }
};

this.Content = timePicker;

Custom footer .NET MAUI Time picker.

You can customize the time picker footer appearance by using the FooterTemplate property in the SfTimePicker.

<picker:SfTimePicker x:Name="timePicker">
    <picker:SfTimePicker.FooterTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#BB9AB1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" Text="Decline" TextColor="White" Background="Transparent"/>
                <Button Grid.Column="1" Text="Accept" TextColor="White" Background="Transparent"/>
            </Grid>
        </DataTemplate>
    </picker:SfTimePicker.FooterTemplate>
</picker:SfTimePicker>

Set footer template in .NET MAUI Time picker.

NOTE

If a template is applied to the footer in the PickerFooterView, the remaining footer properties will not have any effect, except for the DividerColor Property.

You can customize the time picker footer appearance by using the FooterTemplate property in the SfTimePicker. The DataTemplateSelector allows you to choose a DataTemplate at runtime based on the value bound to the time picker footer. This lets you apply a custom data template to the footer and customize its appearance based on specific conditions.

<Grid.Resources>
    <DataTemplate x:Key="currentTimeTemplate">
        <Grid Background="LightBlue">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Text="Decline" TextColor="Red" Background="Transparent"/>
            <Button Grid.Column="1" Text="Accept" TextColor="Red" Background="Transparent"/>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="futureTimeTemplate">
        <Grid Background="LightGreen">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Text="Decline" TextColor="Orange" Background="Transparent"/>
            <Button Grid.Column="1" Text="Accept" TextColor="Orange" Background="Transparent"/>
        </Grid>
    </DataTemplate>
    <local:TimeTemplateSelector x:Key="footerTemplateSelector" CurrentTimeTemplate="{StaticResource currentTimeTemplate}"  FutureTimeTemplate="{StaticResource futureTimeTemplate}"/>
    <picker:SfTimePicker x:Name="timePicker" FooterTemplate="{StaticResource footerTemplateSelector}">
    </picker:SfTimePicker>
</Grid.Resources>
public class TimeTemplateSelector : DataTemplateSelector
{
    public TimeTemplateSelector()
    {
    }
    public DataTemplate CurrentTimeTemplate { get; set; }
    public DataTemplate FutureTimeTemplate { get; set; }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var Details = item as SfTimePicker;
        if (Details != null)
        {
            if (Details.SelectedTime <= DateTime.Now.TimeOfDay)
                return CurrentTimeTemplate;
        }
        return FutureTimeTemplate;
    }
}

Selection View Customization

Customize the time picker selection view by using the SelectionView property of the SfTimePicker.

Set the selection view

In the SfTimePicker control, the corner radius, stroke, and padding can be customized by setting the CornerRadius, Stroke, and Padding properties in the PickerSelectionView.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.SelectionView >
        <picker:PickerSelectionView CornerRadius="10" Stroke="#36454F" Padding="10, 5, 10, 5" Background="#808080" />
    </picker:SfTimePicker.SelectionView>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.SelectionView = new PickerSelectionView()
{
    CornerRadius = 10,
    Stroke = Color.FromArgb("#36454F"),
    Pading = new Thickness(10, 5, 10, 5),
    Background = Color.FromArgb("#808080"),
};

this.Content = timePicker;

Custom selection shape in .NET MAUI Time picker.

Customization of the selected item

Customize the selected view text style of the Time Picker using the SelectedTextStyle property of the SfTimePicker.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.SelectedTextStyle >
        <picker:PickerTextStyle FontSize="15" TextColor="White"/>
    </picker:SfTimePicker.SelectedTextStyle>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.SelectedTextStyle = new PickerTextStyle()
{
    TextStyle = new PickerTextStyle()
    {
        TextColor = Colors.White,
        FontSize = 15,
    }
};

this.Content = timePicker;

Custom Selection view in .NET MAUI Time picker.

Column divider color

Customize the column divider color using the ColumnDividerColor property in SfPicker.

<picker:SfTimePicker x:Name="timePicker"
                     ColumnDividerColor="Red">
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.ColumnDividerColor = Colors.Red;
this.Content = picker;

Time picker coloumn divider color in .NET MAUI Time picker.