Picker Text display mode in .NET MAUI Picker (SfPicker)

21 Jul 20262 minutes to read

The picker text display mode determines how picker items are rendered relative to the selected item. It offers four modes: Default, Fade, Shrink and FadeAndShrink. The default picker text display mode is Default in the SfPicker.

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

Fade Mode

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

XAML

<picker:SfPicker x:Name="picker"
                 TextDisplayMode="Fade"/>

C#

SfPicker picker = new SfPicker()
{
    TextDisplayMode = PickerTextDisplayMode.Fade
};

this.Content = picker;

Shrink Mode

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

XAML

<picker:SfPicker x:Name="picker"
                 TextDisplayMode="Shrink"/>

C#

SfPicker picker = new SfPicker()
{
    TextDisplayMode = PickerTextDisplayMode.Shrink
};

this.Content = picker;

FadeAndShrink Mode

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

XAML

<picker:SfPicker x:Name="picker"
                 TextDisplayMode="FadeAndShrink"/>

C#

SfPicker picker = new SfPicker()
{
    TextDisplayMode = PickerTextDisplayMode.FadeAndShrink
};

this.Content = picker;