Customizations in .NET MAUI Time Picker (SfTimePicker)
4 Jun 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 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;
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 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>
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 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;
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 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>
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;
}
}
Footer Customization
Customize the time picker footer view by using the FooterView
property of theSfTimePicker
.
Set the footer with Ok and Cancel button customizations
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 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;
Customization of the footer
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 Appearance using Datatemplate
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>
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.
Custom Footer appearance using DataTemplateSelector
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;
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;
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;