Time Picker Text Display Mode in .NET MAUI Time Picker (SfTimePicker)

18 Nov 20183 minutes to read

The time picker text display mode is specified in the time picker property enumeration, which is used to display the time picker items based on the modes. It offers four modes: Default, Fade, Shrink and FadeAndShrink. The default time picker text display mode is Default in the SfTimePicker.

Default Mode

The default mode displays all time picker items at the same opacity and font size. This is the default value of the TextDisplayMode property in SfTimePicker and requires no additional configuration.

Fade Mode

The fade mode in the time picker gradually decreases the visibility of unselected items relative to the selected item. This effect is achieved by setting the TextDisplayMode property to Fade in SfTimePicker.

XAML

<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"
                         TextDisplayMode="Fade"/>
</ContentPage>

C#

using Syncfusion.Maui.Picker;
. . .

SfTimePicker timePicker = new SfTimePicker()
{
    TextDisplayMode = PickerTextDisplayMode.Fade
};

this.Content = timePicker;

Shrink Mode

The shrink mode is used to display the font size of time picker items decreased from the selected item by setting the TextDisplayMode property to Shrink in SfTimePicker.

XAML

<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"
                         TextDisplayMode="Shrink"/>
</ContentPage>

C#

using Syncfusion.Maui.Picker;
. . .

SfTimePicker timePicker = new SfTimePicker()
{
    TextDisplayMode = PickerTextDisplayMode.Shrink
};

this.Content = timePicker;

FadeAndShrink Mode

The fade and shrink mode are used to decrease the opacity and font size of time picker items from the selected item by setting the TextDisplayMode property to FadeAndShrink in SfTimePicker.

XAML

<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"
                         TextDisplayMode="FadeAndShrink"/>
</ContentPage>

C#

using Syncfusion.Maui.Picker;
. . .

SfTimePicker timePicker = new SfTimePicker()
{
    TextDisplayMode = PickerTextDisplayMode.FadeAndShrink
};

this.Content = timePicker;