HelpBot Assistant

How can I help you?

Customizations in .NET MAUI Time Picker (SfTimePicker)

27 Feb 202624 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”, MilliSecondHeaderText is “MilliSecond”, and MerdiemHeaderText is “string.Empty”.

<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.ColumnHeaderView >
        <picker:TimePickerColumnHeaderView HourHeaderText="Hour Column"
                                           MinuteHeaderText="Minute Column"
                                           SecondHeaderText="Second Column"
                                           MilliSecondHeaderText="MilliSecond 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",
    MilliSecondHeaderText = "MilliSecond Column"
    MeridiemHeaderText = "Meridiem 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 SfTimePicker.

<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.

CloseButtonIcon

Show Close Button

You can enable or disable the close button in the SfTimePicker header by setting the ShowCloseButton property. The default value is false.

<Grid>
    <picker:SfTimePicker x:Name="timePicker" Mode="Dialog" ShowCloseButton="True">
        <picker:SfTimePicker.HeaderView >
            <picker:PickerHeaderView Height="40" Text="Date Picker"/>
        </picker:SfTimePicker.HeaderView>
    </picker:SfTimePicker>
    <Button Text="Open Picker" 
            x:Name="pickerButton"
            Clicked="Button_Clicked"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            HeightRequest="50" 
            WidthRequest="150">
    </Button>
</Grid>
private void Button_Clicked(object sender, EventArgs e)
{
    timePicker.IsOpen = true;
}

Enable CloseButton in the .NET MAUI Time Picker

NOTE

For the CloseButton to render properly, the header view must be present; otherwise, it will not function.

Close Button Icon

You can customize the close button icon in the SfTimePicker header by setting the CloseButtonIcon property.

<Grid>
    <picker:SfTimePicker x:Name="timePicker" Mode="Dialog" ShowCloseButton="True" CloseButtonIcon="closeicon.png">
        <picker:SfTimePicker.HeaderView >
            <picker:PickerHeaderView Height="40" Text="Date Picker"/>
        </picker:SfTimePicker.HeaderView>
    </picker:SfTimePicker>
    <Button Text="Open Picker" 
            x:Name="pickerButton"
            Clicked="Button_Clicked"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            HeightRequest="50" 
            WidthRequest="150">
    </Button>
</Grid>
private void Button_Clicked(object sender, EventArgs e)
{
    timePicker.IsOpen = true;
}

Enable CloseButtonIcon in the .NET MAUI Time Picker

NOTE

The ShowCloseButton property must be set to true for the close button icon to be displayed.

Column Customization

Customization of the hour column text style

Customize the hour column text style of the SfTimePicker by setting its HourColumnTextStyle property. This property accepts a TextStyle to change font, size, color, and attributes for the hour labels.

NOTE

  • Applying HourColumnTextStyle overrides the previously defined unselected TextStyle, so the unselected style will no longer be applied.
<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.HourColumnTextStyle>
        <picker:PickerTextStyle FontSize="15" TextColor="#2F855A"/>
    </picker:SfTimePicker.HourColumnTextStyle>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.HourColumnTextStyle = new PickerTextStyle()
{
    TextColor = Color.FromArgb("#2F855A"),
    FontSize = 15,
};

this.Content = timePicker;

Customization of the minute column text style

Customize the minute column text style of the SfTimePicker by setting its MinuteColumnTextStyle property. This property accepts a TextStyle to change font, size, color, and attributes for the minute labels.

NOTE

  • Applying MinuteColumnTextStyle overrides the previously defined unselected TextStyle, so the unselected style will no longer be applied.
<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.MinuteColumnTextStyle>
        <picker:PickerTextStyle FontSize="15" TextColor="#D53F8C"/>
    </picker:SfTimePicker.MinuteColumnTextStyle>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.MinuteColumnTextStyle = new PickerTextStyle()
{
    TextColor = Color.FromArgb("#D53F8C"),
    FontSize = 15,
};

this.Content = timePicker;

Customization of the second column text style

Customize the second column text style of the SfTimePicker by setting its SecondColumnTextStyle property. This property accepts a TextStyle to change font, size, color, and attributes for the second labels.

NOTE

  • Applying SecondColumnTextStyle overrides the previously defined unselected TextStyle, so the unselected style will no longer be applied.
<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.SecondColumnTextStyle>
        <picker:PickerTextStyle FontSize="15" TextColor="#2B6CB0"/>
    </picker:SfTimePicker.SecondColumnTextStyle>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.SecondColumnTextStyle = new PickerTextStyle()
{
    TextColor = Color.FromArgb("#2B6CB0"),
    FontSize = 15,
};

this.Content = timePicker;

Customization of the meridiem column text style

Customize the meridiem column text style of the SfTimePicker by setting its MeridiemColumnTextStyle property. This property accepts a TextStyle to change font, size, color, and attributes for the meridiem labels.

NOTE

  • Applying MeridiemColumnTextStyle overrides the previously defined unselected TextStyle, so the unselected style will no longer be applied.
<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.MeridiemColumnTextStyle>
        <picker:PickerTextStyle FontSize="15" TextColor="DarkCyan"/>
    </picker:SfTimePicker.MeridiemColumnTextStyle>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.MeridiemColumnTextStyle = new PickerTextStyle()
{
    TextColor = Colors.DarkCyan,
    FontSize = 15,
};

this.Content = timePicker;

Customization of the millisecond column text style

Customize the millisecond column text style of the SfTimePicker by setting its MilliSecondColumnTextStyle property. This property accepts a TextStyle to change font, size, color, and attributes for the millisecond labels.

NOTE

  • Applying MilliSecondColumnTextStyle overrides the previously defined unselected TextStyle, so the unselected style will no longer be applied.
<picker:SfTimePicker x:Name="timePicker" >
    <picker:SfTimePicker.MilliSecondColumnTextStyle>
        <picker:PickerTextStyle FontSize="15" TextColor="DarkCyan"/>
    </picker:SfTimePicker.MilliSecondColumnTextStyle>
</picker:SfTimePicker>
SfTimePicker timePicker = new SfTimePicker();
timePicker.MilliSecondColumnTextStyle = new PickerTextStyle()
{
    TextColor = Colors.DarkCyan,
    FontSize = 15,
};

this.Content = timePicker;

Custom column textstyle in .NET MAUI Time picker.

Customization of the hour column width

Customize the hour column width of the SfTimePicker by setting its HourColumnWidth property. This property controls the width of the hour column.

<picker:SfTimePicker x:Name="timePicker" HourColumnWidth="150"/>
SfTimePicker timePicker = new SfTimePicker();
timePicker.HourColumnWidth = 150;

this.Content = timePicker;

Customization of the minute column width

Customize the minute column width of the SfTimePicker by setting its MinuteColumnWidth property. This property controls the width of the minute column.

<picker:SfTimePicker x:Name="timePicker" MinuteColumnWidth="150"/>
SfTimePicker timePicker = new SfTimePicker();
timePicker.MinuteColumnWidth = 150;

this.Content = timePicker;

Customization of the second column width

Customize the second column width of the SfTimePicker by setting its SecondColumnWidth property. This property controls the width of the second column.

<picker:SfTimePicker x:Name="timePicker" SecondColumnWidth="150"/>
SfTimePicker timePicker = new SfTimePicker();
timePicker.SecondColumnWidth = 150;

this.Content = timePicker;

Customization of the meridiem column width

Customize the meridiem column width of the SfTimePicker by setting its MeridiemColumnWidth property. This property controls the width of the meridiem column.

<picker:SfTimePicker x:Name="timePicker" MeridiemColumnWidth="150"/>
SfTimePicker timePicker = new SfTimePicker();
timePicker.MeridiemColumnWidth = 150;

this.Content = timePicker;

Customization of the millisecond column width

Customize the millisecond column width of the SfTimePicker by setting its MilliSecondColumnWidth property. This property controls the width of the millisecond column.

<picker:SfTimePicker x:Name="timePicker" MilliSecondColumnWidth="150"/>
SfTimePicker timePicker = new SfTimePicker();
timePicker.MilliSecondColumnWidth = 150;

this.Content = timePicker;