Date Picker Text display mode in .NET MAUI Date Picker (SfDatePicker)

18 Nov 20183 minutes to read

Use the text display mode to control how the date picker items appear. It offers four modes: Default, Fade, Shrink, and FadeAndShrink. The default text display mode is Default in the SfDatePicker.

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

Fade Mode

The fade mode in the date 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 SfDatePicker.

XAML

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

C#

using Syncfusion.Maui.Picker;

. . .
SfDatePicker datePicker = new SfDatePicker()
{
    TextDisplayMode = PickerTextDisplayMode.Fade
};

this.Content = datePicker;

Shrink Mode

The shrink mode reduces the font size of date picker items relative to the selected item by setting the TextDisplayMode property to Shrink in SfDatePicker.

XAML

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

C#

using Syncfusion.Maui.Picker;

. . .
SfDatePicker datePicker = new SfDatePicker()
{
    TextDisplayMode = PickerTextDisplayMode.Shrink
};

this.Content = datePicker;

Fade and Shrink Mode

The fade and shrink mode decreases both the opacity and font size of date picker items relative to the selected item by setting the TextDisplayMode property to FadeAndShrink in SfDatePicker.

XAML

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

C#

using Syncfusion.Maui.Picker;

. . .
SfDatePicker datePicker = new SfDatePicker()
{
    TextDisplayMode = PickerTextDisplayMode.FadeAndShrink
};

this.Content = datePicker;