Выпадающий список Picker

Визуально элемент Picker представляет собой обычное текстовое поле, по нажатию на которое открывается список для выбора, что-то наподобие выпадающего списка. Для управления внешним видом и вложенными элементами класс Picker определяет следующие свойства:

• ItemsSource: представляет тип IList и определяет коллекцию отображаемых элементов. По умолчанию равно null.

• SelectedIndex: представляет тип int, хранит индекс выделенного элемента. По умолчанию равно -1.

• SelectedItem: представляет тип object, хранит выбранный элемент. По умолчанию равно null.

• CharacterSpacing: представляет тип double и определяет расстояние между символами в Picker.

• FontAttributes: представляет тип FontAttributes и определяет атрибуты шрифта.

• FontAutoScalingEnabled: представляет тип bool и определяет, будет ли применяться к элементу системное масштабирование.

• FontFamily: представляет тип string и определяет используемое семейство шрифтов.

• FontSize: представляет тип double и определяет высоту шрифта.

• TextColor: представляет тип Color и определяет цвет текста.

• TitleColor: представляет тип Color и определяет цвет заголовка.

Ключевое свойство - ItemsSource, которое представляет коллекцию вложенных элементов.

С помощью события SelectedIndexChanged можно обработать выбор элемента в Picker

Например, создадим Picker в коде C#:

namespace HelloApp;

class StartPage : ContentPage
{
    Label header = new Label { Text = "Выберите язык", FontSize = 18 };
    Picker languagePicker = new Picker { Title = "Язык программирования" };
    public StartPage()
    {
        // можно динамически доблять элементы
        languagePicker.Items.Add("C#");
        languagePicker.Items.Add("JavaScript");
        languagePicker.Items.Add("Java");

        // можно сразу установить список элементов
        // languagePicker.ItemsSource = new string[]{ "C#", "Java", "JavaScript"};
        
        // установка выделенного индекса 
        // languagePicker.SelectedIndex = 0;

        languagePicker.SelectedIndexChanged += PickerSelectedIndexChanged;
        
        Content = new StackLayout { Children = { header, languagePicker }, Padding=8 };
    }

    void PickerSelectedIndexChanged(object sender, EventArgs e)
    {
        header.Text = $"Вы выбрали: {languagePicker.SelectedItem}";
        // или так через индекс
        //header.Text = $"Вы выбрали: {languagePicker.Items[languagePicker.SelectedIndex]}";
    }
}

Здесь содержит список для выбора, а отследить выбранный элемент мы можем с помощью обработчик события SelectedIndexChanged. Стоит отметить, что длина элемента Picker по умолчанию устанавливается чуть меньше чем его заголовок. .

Аналог в xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <StackLayout Padding="8">
        <Label x:Name="header" Text="Выберите язык" FontSize="18" />
        <Picker x:Name="languagePicker" Title = "Язык программирования" 
                SelectedIndexChanged="PickerSelectedIndexChanged">
            <Picker.Items>
                <x:String>C#</x:String>
                <x:String>JavaScript</x:String>
                <x:String>Java</x:String>
            </Picker.Items>
        </Picker>
    </StackLayout>
</ContentPage>

И тогда в файл связанного кода надо добавить обработчик события:

namespace HelloApp;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
    }
    void PickerSelectedIndexChanged(object sender, EventArgs e)
    {
        header.Text = $"Вы выбрали: {languagePicker.SelectedItem}";
    }
}