Text display mode in .NET MAUI Picker (SfDateTimePicker)

21 Jul 20264 minutes to read

The TextDisplayMode property controls how unselected items are rendered relative to the selected item. It offers four modes: Default, Fade, Shrink, and FadeAndShrink. The default value is Default.

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 SfDateTimePicker and requires no additional configuration.

Fade mode

Fade mode fades out unselected items relative to the selected item. Set the TextDisplayMode property to Fade to apply this effect to the SfDateTimePicker.

XAML

<ContentPage
    . . .
    xmlns:dateTimePicker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <dateTimePicker:SfDateTimePicker x:Name="dateTimePicker"
                                     TextDisplayMode="Fade"/>
</ContentPage>

C#

using Syncfusion.Maui.Picker;
. . .
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfDateTimePicker dateTimePicker = new SfDateTimePicker()
        {
            TextDisplayMode = PickerTextDisplayMode.Fade
        };
        this.Content = dateTimePicker;
    }
}

Shrink mode

Shrink mode reduces the font size of unselected items relative to the selected item. Set the TextDisplayMode property to Shrink to apply this effect to the SfDateTimePicker.

XAML

<ContentPage
    . . .
    xmlns:dateTimePicker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <dateTimePicker:SfDateTimePicker x:Name="dateTimePicker"
                                     TextDisplayMode="Shrink"/>
</ContentPage>

C#

using Syncfusion.Maui.Picker;
. . .
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfDateTimePicker dateTimePicker = new SfDateTimePicker()
        {
            TextDisplayMode = PickerTextDisplayMode.Shrink
        };
        this.Content = dateTimePicker;
    }
}

Fade and shrink mode

Fade and shrink mode reduces both the opacity and the font size of unselected items relative to the selected item. Set the TextDisplayMode property to FadeAndShrink to apply this effect to the SfDateTimePicker.

XAML

<ContentPage
    . . .
    xmlns:dateTimePicker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <dateTimePicker:SfDateTimePicker x:Name="dateTimePicker"
                                     TextDisplayMode="FadeAndShrink"/>
</ContentPage>

C#

using Syncfusion.Maui.Picker;
. . .
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfDateTimePicker dateTimePicker = new SfDateTimePicker()
        {
            TextDisplayMode = PickerTextDisplayMode.FadeAndShrink
        };
        this.Content = dateTimePicker;
    }
}