.NET MAUI Picker

In .NET MAUI, a Picker is a user interface control used to display a list of items from which a user can select exactly one. Visually, it often resembles an Entry field but opens a platform-specific selection interface (like a scrollable wheel on iOS or a dropdown dialog on Android) when tapped. Picker is a user interface control that lets people select a single item from a list of options. Think of it as a dropdown menu or combo box, but styled for mobile and cross-platform apps.

Key Features

Placeholder Text: Uses a Title property to display a hint when no item is selected.

Flexible Data Sources: Can be populated manually with strings or bound to a collection of complex objects using MVVM.

Selection Tracking: Tracks the user's choice through SelectedIndex (the position in the list) or SelectedItem (the actual data object).

Specialized Versions: MAUI also includes built-in specialized pickers like the DatePicker, TimePicker, and FilePicker.

Item Selection: Displays a list of items (strings or objects) for the user to choose from.

Single Choice: Only one item can be selected at a time.

Binding Support: Works seamlessly with data binding, so you can bind the ItemsSource to a collection and the SelectedItem or SelectedIndex to a property in your ViewModel.

Cross-Platform Look: On iOS, it appears as a wheel-style selector; on Android, it looks like a dropdown; on Windows, it behaves like a combo box.

⚙️ Common Properties

ItemsSource → The list of items to display.
SelectedItem → The currently chosen item.
SelectedIndex → The index of the chosen item.
Title → Placeholder text shown before selection.

📄 Example

xml

<Picker Title="Select a fruit"
        ItemsSource="{Binding Fruits}"
        SelectedItem="{Binding SelectedFruit}" />

Here:

Fruits is a collection (like ["Apple", "Banana", "Mango"]).

SelectedFruit is the property that stores the chosen fruit.

Example: Simple String Picker

This example shows how to create a Picker in XAML and handle the selection event in the code-behind file.

1. XAML Definition

Add the Picker to your layout. The Title acts as the label, and Items contains the selectable options.

xml

<StackLayout Padding="20">
    <Label Text="Choose your favorite fruit:" />

    <Picker x:Name="fruitPicker" 
            Title="Select a fruit"
            SelectedIndexChanged="OnFruitSelected">
        <Picker.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Apple</x:String>
                <x:String>Banana</x:String>
                <x:String>Cherry</x:String>
            </x:Array>
        </Picker.ItemsSource>
    </Picker>

    <Label x:Name="selectionLabel" Text="Selection will appear here" />
</StackLayout>

2. Code-Behind (C#)

Handle the SelectedIndexChanged event to perform an action when the user picks an item.

csharp

void OnFruitSelected(object sender, EventArgs e)
{
    var picker = (Picker)sender;
    int selectedIndex = picker.SelectedIndex;

    if (selectedIndex != -1)
    {
        string selectedValue = (string)picker.ItemsSource[selectedIndex];
        selectionLabel.Text = $"You selected: {selectedValue}";
    }
}

Example: Object Selection with MVVM

1. The Model

Define the object you want the user to pick from.

csharp

public class Car
{
    public string ModelName { get; set; }
    public string Manufacturer { get; set; }
}

Pro Tips for 2026

Object Reference: Ensure the object assigned to SelectedItem is exactly the same reference as one in the ItemsSource collection; otherwise, the Picker may remain blank even if the properties match.

Platform Behavior: In 2026, remember that Android shows a dialog, while iOS uses an input view at the bottom of the screen when the Picker is focused.

Customization: You can now easily change the PlaceholderColor to match your app's theme using the built-in property.