Поле со списком и список

Поле со списком (также известное как раскрывающийся список) позволяет представить список элементов, из которых пользователь может выбирать. Сначала поле со списком представлено в компактном состоянии, а затем развертывается для отображения списка элементов, доступных для выбора. Список похож на поле со списком, но не сворачиваемый или не имеет компактного состояния. Дополнительные сведения о списках см. в конце этой статьи.

Если поле со списком закрыто, отображается либо текущий выбор, либо пустое поле (если ни один из элементов не выбран). Когда пользователь развертывает поле со списком, оно отображает список элементов, доступных для выбора.

Выбор правильного элемента управления

• Используйте раскрывающийся список, чтобы дать пользователям возможность выбрать одно значение из набора элементов, которые можно надлежащим образом представить с помощью отдельных строк текста.
• Используйте представление списка или сетки вместо поля со списком для отображения элементов, состоящих из нескольких строк текста или изображений.
• Если элементов меньше пяти, возможно, лучше воспользоваться переключателями (если можно выбрать только один элемент) или флажками (если можно выбрать несколько элементов).
• Используйте поле со списком, если элементы выбора не имеют большого значения для работы приложения. Если для большинства пользователей в большей части ситуаций рекомендуется использовать вариант по умолчанию, отображение всех элементов в списке может привлечь излишнее внимание к вариантам. Поле со списком позволяет экономить пространство и не отвлекать пользователя.

Примеры

Поле со списком в компактном состоянии может отображать заголовок.

Хотя поля со списком разворачиваются для поддержки более длинных строк, избегайте слишком длинных строк, так как их сложно читать.

Если коллекция в поле со списком достаточно длинная, появляется полоса прокрутки. Логически группируйте элементы в списке.

Рекомендации

• Ограничьте текстовое содержимое элементов полей со списком одной строкой.
• Сортируйте элементы в поле со списком в логическом порядке. Группируйте связанные параметры и размещайте часто используемые параметры в начале списка. Названия сортируйте в алфавитном порядке, числа — по возрастанию, даты — по хронологии.

Окна со списками

Окно со списком позволяет пользователю выбрать один или несколько элементов коллекции. Окна со списками аналогичны раскрывающимся спискам за исключением того, что они всегда открыты — у окна со списком нет компактного (не развернутого) состояния. Элементы списка можно прокручивать, если для отображения списка полностью не хватает места.

Является ли список правильным элементом управления?

• Окно со списком может быть полезно, если элементы списка достаточно важны и экранного пространства достаточно для отображения всего списка.
• При важном выборе список должен привлечь внимание пользователя к полному списку вариантов. И наоборот, раскрывающийся список изначально привлекает внимание пользователя к выбранному элементу.
• Не используйте список в следующих случаях.
  • Список содержит очень малое число элементов. Список с возможностью выбора одного варианта, в котором содержится два пункта, лучше представить в виде переключателей. Также подумайте о возможности использования переключателей, если в списке 3 или 4 статических элемента.
  • Список выбран один раз, и в нем всегда есть те же 2 параметра, где один может быть подразумеваться как не другой, например "вкл" и "выкл". Используйте один проверка прямоугольник или переключатель.
  • Очень большое число элементов. Для длинных списков оптимальным решением является представление сетки и представление списка. Для очень длинных списков сгруппированных данных лучше использовать контекстное масштабирование.
  • Список представляет собой непрерывные числовые значения. В этом случае попробуйте использовать ползунок.
  • Элементы выбора не имеют большого значения для работы приложения, или же рекомендуется использовать вариант по умолчанию для большинства пользователей и ситуаций. Вместо списка используйте раскрывающийся список.

Рекомендации по спискам

• Идеальное количество элементов в окне со списком — от 3 до 9.
• Также окно со списком хорошо подходит, если элементы списка могут динамически изменяться.
• По возможности настройте размер окна со списком таким образом, чтобы список элементов не нужно было сдвигать или прокручивать.
• Убедитесь, что цель окна со списком, а также выбранные в данный момент элементы понятны.
• Предусмотрите визуальные эффекты и анимации для реакции на касание и состояние выбора элементов.
• Ограничьте текстовое содержимое элементов списка одной строкой. Если элементы списка — это визуальные элементы, можно настроить их размер. Если элемент содержит несколько строк текста или изображений, используйте представление сетки или представление списка.
• Используйте шрифт по умолчанию, если руководство по использованию корпоративного стиля не требует использования другого шрифта.
• Не используйте окно с списком для выполнения команд или динамического скрытия либо отображения других элементов управления.

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

• API UWP:класс ComboBox, свойство IsEditable, свойство Text, событие TextSubmitted, класс ListBox
• Откройте приложение коллекции WinUI 2 и просмотрите ComboBox в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

Библиотека пользовательского интерфейса Windows 2.2 или более поздней версии содержит новый шаблон для этого элемента управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.

Создание поля со списком

• Важные API: класс ComboBox, свойство IsEditable, свойство Text, событие TextSubmitted, класс ListBox

Откройте приложение коллекции WinUI 3 и просмотрите ComboBox в действии.

Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub

Для заполнения полей со списком нужно напрямую добавить объекты в коллекцию элементов или привязать свойство ItemsSource к источнику данных. Добавляемые в ComboBox элементы помещаются в контейнеры ComboBoxItem.

Здесь представлено простое поле со списком с добавленными элементами в формате XAML.

<ComboBox Header="Colors" PlaceholderText="Pick a color" Width="200">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>

В следующем примере демонстрируется привязка поля со списком к коллекции объектов FontFamily.

<ComboBox x:Name="FontsCombo" Header="Fonts" Height="44" Width="296"
          ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source"/>

ObservableCollection<FontFamily> fonts = new ObservableCollection<FontFamily>()
{
    fonts.Add(new FontFamily("Arial"));
    fonts.Add(new FontFamily("Courier New"));
    fonts.Add(new FontFamily("Times New Roman"));
};

Выбор элементов

Подобно ListView и GridView, элемент ComboBox является производным от элемента выбора Selector, поэтому выбор пользователя можно получить стандартным образом.

Вы можете получить или задать выбранный в поле со списком элемент с помощью свойства SelectedItem, а индекс выбранного элемента — с помощью свойства SelectedIndex.

Чтобы получить значение конкретного свойства для выбранного элемента данных, можно использовать свойство SelectedValue. В этом случае задайте свойство SelectedValuePath для указания свойства выбранного элемента, из которого необходимо получить значение.

Совет

В случае задания свойства SelectedItem или SelectedIndex для указания выбора по умолчанию возникает исключение, если свойство задано до заполнения коллекции элементов для поля со списком. Если вы не определяете элементы в коде XAML, лучше всего обработать событие Loaded поля со списком и задать параметр SelectedItem или SelectedIndex в обработчике событий Loaded.

Вы можете осуществить привязку к этим свойствам в XAML или обрабатывать событие SelectionChanged для реагирования на изменения выбора.

В коде обработчика событий выбранный элемент можно получить из свойства SelectionChangedEventArgs.AddedItems. Ранее выбранный элемент (при наличии) можно получить из свойства SelectionChangedEventArgs.RemovedItems. Каждая из коллекций AddedItems и RemovedItems содержит только один элемент, так как поле со списком не поддерживает выбор нескольких элементов.

В этом примере показано, как обрабатывать событие SelectionChanged, а также как выполнить привязку к выбранному элементу.

<StackPanel>
    <ComboBox x:Name="colorComboBox" Width="200"
              Header="Colors" PlaceholderText="Pick a color"
              SelectionChanged="ColorComboBox_SelectionChanged">
        <x:String>Blue</x:String>
        <x:String>Green</x:String>
        <x:String>Red</x:String>
        <x:String>Yellow</x:String>
    </ComboBox>

    <Rectangle x:Name="colorRectangle" Height="30" Width="100"
               Margin="0,8,0,0" HorizontalAlignment="Left"/>

    <TextBlock Text="{x:Bind colorComboBox.SelectedIndex, Mode=OneWay}"/>
    <TextBlock Text="{x:Bind colorComboBox.SelectedItem, Mode=OneWay}"/>
</StackPanel>

private void ColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string colorName = e.AddedItems[0].ToString();
    Color color;
    switch (colorName)
    {
        case "Yellow":
            color = Colors.Yellow;
            break;
        case "Green":
            color = Colors.Green;
            break;
        case "Blue":
            color = Colors.Blue;
            break;
        case "Red":
            color = Colors.Red;
            break;
    }
    colorRectangle.Fill = new SolidColorBrush(color);
}

Событие SelectionChanged и навигация с помощью клавиатуры

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

Чтобы создать поле со списком, которое обновляется в режиме реального времени, пока пользователь использует клавиши со стрелками (например, раскрывающийся список выбора шрифтов), задайте для свойства SelectionChangedTrigger значение Always. В результате событие SelectionChanged возникает при переходе фокуса на другой элемент в открытом списке.

Изменение алгоритма поведения выбранного элемента

В Windows 10, версия 1809 (пакет SDK 17763) или более поздняя, алгоритм поведения выбранных элементов обновлен — теперь они поддерживают редактируемые поля со списком.

В более ранних версиях пакета SDK, чем 17763, значение свойства SelectedItem (и, следовательно, свойств SelectedValue и SelectedIndex) должно было находиться в коллекции элементов поля со списком. В предыдущем примере установка colorComboBox.SelectedItem = "Pink" приводит к таким выходным данным:

• SelectedItem = null.
• SelectedValue = null.
• SelectedIndex = -1.

В пакете SDK версии 17763 и более поздних значение свойства SelectedItem (и, следовательно, свойств SelectedValue и SelectedIndex) не должно находиться в коллекции элементов поля со списком. В предыдущем примере установка colorComboBox.SelectedItem = "Pink" приводит к таким выходным данным:

• SelectedItem =Pink.
• SelectedValue = Pink.
• SelectedIndex = -1.

Поиск по тексту

Поля со списком автоматически поддерживают поиск в их коллекциях. По мере того, как пользователь вводит символы на физической клавиатуре, выбрав открытое или закрытое поле со списком, отображаются варианты, подходящие под строку пользователя. Эта функция особенно полезна при навигации по длинному списку. Например, при взаимодействии с раскрывающимся списком, который содержит список штатов, пользователь может нажать клавишу W, чтобы представить "Washington" для быстрого выбора. Текстовый поиск не чувствителен к регистру.

Чтобы отключить эту функцию, можно задать для свойства IsTextSearchEnabled значение false.

Создание редактируемого поля со списком

Важно!

Для этой функции требуется Windows 10, версия 1809 (пакет SDK 17763) или более поздняя.

По умолчанию поле со списком позволяет пользователю выбирать из предопределенного списка вариантов. Однако существуют случаи, когда список содержит только подмножество допустимых значений и пользователь должен иметь возможность ввести остальные значения, которые не включены в список. Для этого можно создать редактируемое поле со списком.

Чтобы создать редактируемое поле со списком, задайте для свойства IsEditable значение true. Затем обработайте событие TextSubmitted для работы со значением, которое ввел пользователь.

По умолчанию значение SelectedItem обновляется, когда пользователь фиксирует введенный текст. Это поведение можно переопределить, задав для свойства Handled значение true в аргументе события TextSubmitted. Если событие отмечено как обработанное, в поле со списком не будут предприниматься дополнительные действия после завершения события и поле будет оставаться редактируемым. Значение SelectedItem не будет обновляться.

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

Элемент выбора "недавно использованные имена" позволяет вводить пользовательские строки. Список RecentlyUsedNames содержит некоторые значения, из которых можно выбирать, но пользователь также может добавлять новые пользовательские значения. Свойство CurrentName представляет имя, введенное в настоящий момент.

<ComboBox IsEditable="true"
          ItemsSource="{x:Bind RecentlyUsedNames}"
          SelectedItem="{x:Bind CurrentName, Mode=TwoWay}"/>

Событие TextSubmitted

Вы можете обработать событие TextSubmitted для работы со значением, которое ввел пользователь. Как правило, в обработчике событий проверяется правильность введенного пользователем значения, после чего значение используется в приложении. В зависимости от ситуации, можно также добавить значение в поле списка вариантов для будущего использования.

Событие TextSubmitted возникает при выполнении следующих условий:

• Для свойства IsEditable установлено значение true.
• Пользователь вводит текст, который не соответствует текущей записи в поле со списком.
• Пользователь нажимает клавишу ВВОД или перемещает фокус с поля со списком.

Событие TextSubmitted не происходит, если пользователь вводит текст, а затем осуществляет навигацию вверх или вниз по списку.

Пример. Проверка входных данных и локальное использование

В этом примере элемент выбора размера шрифта содержит набор значений, которые соответствуют таблице размеров шрифта, однако пользователь может также задать значения, которые не внесены в список.

Когда пользователь добавляет значение, которое отсутствует в списке, размер шрифта обновляется, однако значение не заносится в этот список.

Если только что введенное значение не является допустимым, необходимо использовать свойство SelectedValue, чтобы вернуть для свойства Text последнее допустимое значение.

<ComboBox x:Name="fontSizeComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfFontSizes}"
          TextSubmitted="FontSizeComboBox_TextSubmitted"/>

private void FontSizeComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (byte.TryParse(e.Text, out double newValue))
    {
        // Update the app's font size.
        _fontSize = newValue;
    }
    else
    {
        // If the item is invalid, reject it and revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        sender.Text = sender.SelectedValue.ToString();
        e.Handled = true;
    }
}

Пример. Проверка входных данных и добавление значений в список

В этом примере средство выбора избранного цвета содержит наиболее распространенные избранные цвета (красный, синий, зеленый, оранжевый). Однако пользователь также может ввести собственный избранный цвет, который не включен в список. Когда пользователь добавляет допустимый цвет (например, розовый), этот цвет добавляется в список и устанавливается как активный избранный цвет.

<ComboBox x:Name="favoriteColorComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfColors}"
          TextSubmitted="FavoriteColorComboBox_TextSubmitted"/>

private void FavoriteColorComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (IsValid(e.Text))
    {
        FavoriteColor newColor = new FavoriteColor()
        {
            ColorName = e.Text,
            Color = ColorFromStringConverter(e.Text)
        }
        ListOfColors.Add(newColor);
    }
    else
    {
        // If the item is invalid, reject it but do not revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        e.Handled = true;
    }
}

bool IsValid(string Text)
{
    // Validate that the string is: not empty; a color.
}

Получение примера кода

• Пример коллекции WinUI — просмотр всех элементов управления XAML в интерактивном формате.

Похожие статьи

• Текстовые элементы управления
• Руководство по проверке орфографии
• Класс TextBox
• Класс PasswordBox
• Свойство String.Length