Выпадающий список Picker в .NET MAUI

Элемент Picker в .NET MAUI представляет собой обычный выпадающий список, адаптированный для работы на различных платформах. Визуально, Picker представляет собой обычное текстовое поле наподобие Entry, клик по которому открывает список элементов для выбора.

Свойства Picker

Элемент Picker предоставляет нам следующие свойства для работы:

Также Picker предоставляет нам событие

public event EventHandler SelectedIndexChanged;

которое возникает каждый раз как только пользователь выбирает элемент в списке.

Заполнение Picker элементами в XAML

Заполнение Picker элементами для выбора можно производить как непосредственно в XAML, так и динамически, например, в файле отдельного кода. Сейчас мы рассмотрим только один из способов заполнения Picker элементами. Другие способы мы рассмотрим позднее, когда будем изучать привязку в .NET MAUI. Итак, создайте новое приложение .NET MAUI и измените код страницы MainPage.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="MauiApp7.MainPage">

    <VerticalStackLayout>
        <Picker x:Name="MyPicker" Title="Список">
            <Picker.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Опция 1</x:String>
                    <x:String>Опция 2</x:String>
                    <x:String>Опция 3</x:String>
                    <x:String>Опция 4</x:String>
                </x:Array>
            </Picker.ItemsSource>
        </Picker>
    </VerticalStackLayout>
</ContentPage>

Здесь мы заполняем Picker четырьмя элементами. Обратите внимание на то, как мы в XAML передаем свойству ItemsSource массив данных:

<x:Array Type="{x:Type x:String}">
    <x:String>Опция 1</x:String>
    <x:String>Опция 2</x:String>
    <x:String>Опция 3</x:String>
    <x:String>Опция 4</x:String>
</x:Array>

x:Array — это расширение разметки из пространства имен xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml", которое позволяет задавать непосредственно в коде XAML массив элементов. Для того, чтобы определить тип элементов массива мы используем ещё одно расширение — x:Type с параметром в котором указываем ключевое слово XAML — x:String, означающее, что массив будет содержать строки. Далее, внутри тэга <x:Array> мы перечисляем элементы массива, которые заключаем также в тэги, соответствующие типу элементов, то есть в <x:String>. Так, используя пространство имен xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" мы можем определять различные данные в коде — числа, строки, массивы и т.д.

Теперь вернемся к нашему приложению. Вот как будет выглядеть наш список выбора:Нажмите на текстовое поле, чтобы раскрылся список:

После выбора элемента списка его имя будет показано в текстовом поле:

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

<Picker x:Name="MyPicker" Title="Список">
    <Picker.Items>
        <x:String>Опция 1</x:String>
        <x:String>Опция 2</x:String>
        <x:String>Опция 3</x:String>
        <x:String>Опция 4</x:String>
    </Picker.Items>
</Picker>

Обратите внимание на то, что здесь мы уже не указываем массив, а просто перечисляем строки, которые необходимо добавить в Picker.

Заполнение Picker элементами в C#

Также мы можем заполнять список элементов Picker непосредственно в коде. Например, воспользуемся файлом отдельного кода MainPage.xaml.cs и перепишем его следующим образом:

namespace MauiApp7
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            MyPicker.ItemsSource = new string[] {"Выбор 1", "Выбор 2", "Выбор 3", "Выбор 4" };
        }
    }
}

Теперь код 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="MauiApp7.MainPage">

    <VerticalStackLayout>
        <Picker x:Name="MyPicker" Title="Список"/>
    </VerticalStackLayout>
</ContentPage>

Запустим приложение и убедимся, что наш Picker заполнен элементами, которые мы определили в коде C#:Аналогичным образом мы можем использовать и свойство Items.

Обработка события SelectedIndexChanged

Объявим в файле отдельного кода MainPage.xaml.cs следующий обработчик события:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        MyPicker.ItemsSource = new string[] {"Выбор 1", "Выбор 2", "Выбор 3", "Выбор 4" };
    }

    //обработчик события
    public void OnSelectedIndexChanged(object sender, EventArgs args)
    {
        MyLabel.Text = $"Ваш выбор: {(string)(MyPicker.SelectedItem)}";
    }
}

и изменим код XAML страницы, добавив на неё новую метку и назначив наш обработчик событию Picker:

<?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="MauiApp7.MainPage">

    <VerticalStackLayout>
        <Picker x:Name="MyPicker" 
                Title="Список"
                SelectedIndexChanged="OnSelectedIndexChanged"/>
        <Label x:Name="MyLabel"/>
    </VerticalStackLayout>
</ContentPage>

Теперь запустим приложение и убедимся, что оно реагирует на выбор элемента в Picker:

Итого

Элемент .NET MAUI Picker представляет собой выпадающий список выбора из нескольких элементов. Для определения элементов в Picker могут использоваться два свойства — ItemsSource (предпочтительный вариант) и Items (альтернативный вариант). При этом, ItemsSources позволяет указывать в качестве элементов списка любые объекты, а Items — только строки. Для реагирования на изменение выбора в Picker используется событие SelectedIndexChanged.