Customizations in .NET MAUI Time Picker (SfTimePicker)

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

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.HeaderView >
            <picker:PickerHeaderView Height="40" Text="Time Picker"/>
        </picker:SfTimePicker.HeaderView>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.HeaderView >
            <picker:PickerHeaderView DividerColor="Red" />
        </picker:SfTimePicker.HeaderView>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <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>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <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>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker timePicker = new 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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <ContentPage.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}"/>
    </ContentPage.Resources>
    <picker:SfTimePicker x:Name="timePicker" HeaderTemplate="{StaticResource headerTemplateSelector}">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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 MeridiemHeaderText is “string.Empty”.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <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>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.ColumnHeaderView >
            <picker:TimePickerColumnHeaderView DividerColor="Red" />
        </picker:SfTimePicker.ColumnHeaderView>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <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>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <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>
</ContentPage>

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <ContentPage.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}"/>
    </ContentPage.Resources>
    <picker:SfTimePicker x:Name="timePicker" ColumnHeaderTemplate="{StaticResource columnHeaderTemplateSelector}">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.FooterView >
            <picker:PickerFooterView Height="40" OkButtonText="Save"
                                     CancelButtonText="Exit"/>
        </picker:SfTimePicker.FooterView>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.FooterView >
            <picker:PickerFooterView DividerColor="Red" />
        </picker:SfTimePicker.FooterView>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <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>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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 in .NET MAUI Time Picker.

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

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <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>
</ContentPage>

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <ContentPage.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}"/>
    </ContentPage.Resources>
    <picker:SfTimePicker x:Name="timePicker" FooterTemplate="{StaticResource footerTemplateSelector}">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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;
    }
}

Set height and width to the Time Picker

The SfTimePicker control allows you to change the height and width by using the HeightRequest and WidthRequest properties on the SfTimePicker.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="picker"
                        HeightRequest="280"
                        WidthRequest="300">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker picker = new SfTimePicker()
{
    HeightRequest = 280,
    WidthRequest = 300,
};

this.Content = picker;

Set height and width in .NET MAUI Time Picker.

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <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>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker timePicker = new SfTimePicker();
timePicker.SelectionView = new PickerSelectionView()
{
    CornerRadius = 10,
    Stroke = Color.FromArgb("#36454F"),
    Padding = 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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.SelectedTextStyle >
            <picker:PickerTextStyle FontSize="15" TextColor="White"/>
        </picker:SfTimePicker.SelectedTextStyle>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker timePicker = new SfTimePicker();
timePicker.SelectedTextStyle = 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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker"
                         ColumnDividerColor="Red">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker timePicker = new SfTimePicker();
timePicker.ColumnDividerColor = Colors.Red;
this.Content = timePicker;

Time picker column 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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <Grid>
        <picker:SfTimePicker x:Name="timePicker" Mode="Dialog" ShowCloseButton="true">
            <picker:SfTimePicker.HeaderView >
                <picker:PickerHeaderView Height="40" Text="Time 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>
</ContentPage>
private void Button_Clicked(object sender, EventArgs e)
{
    this.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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <Grid>
        <picker:SfTimePicker x:Name="timePicker" Mode="Dialog" ShowCloseButton="True" CloseButtonIcon="closeicon.png">
            <picker:SfTimePicker.HeaderView >
                <picker:PickerHeaderView Height="40" Text="Time 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>
</ContentPage>
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.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.HourColumnTextStyle>
            <picker:PickerTextStyle FontSize="15" TextColor="#2F855A"/>
        </picker:SfTimePicker.HourColumnTextStyle>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.MinuteColumnTextStyle>
            <picker:PickerTextStyle FontSize="15" TextColor="#D53F8C"/>
        </picker:SfTimePicker.MinuteColumnTextStyle>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.SecondColumnTextStyle>
            <picker:PickerTextStyle FontSize="15" TextColor="#2B6CB0"/>
        </picker:SfTimePicker.SecondColumnTextStyle>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.MeridiemColumnTextStyle>
            <picker:PickerTextStyle FontSize="15" TextColor="DarkCyan"/>
        </picker:SfTimePicker.MeridiemColumnTextStyle>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" >
        <picker:SfTimePicker.MilliSecondColumnTextStyle>
            <picker:PickerTextStyle FontSize="15" TextColor="DarkCyan"/>
        </picker:SfTimePicker.MilliSecondColumnTextStyle>
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" HourColumnWidth="150"/>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" MinuteColumnWidth="150"/>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" SecondColumnWidth="150"/>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" MeridiemColumnWidth="150"/>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

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.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="timePicker" MilliSecondColumnWidth="150"/>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker timePicker = new SfTimePicker();
timePicker.MilliSecondColumnWidth = 150;

this.Content = timePicker;