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

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

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

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

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

Примеры

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

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

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

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

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

Поля списка

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

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

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

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

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

UWP и WinUI 2

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

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

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

Приложение коллекции 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 для указания свойства выбранного элемента, из которого необходимо получить значение.

Вы можете осуществить привязку к этим свойствам в 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.

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

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

Чтобы создать редактируемое поле со списком, задайте для свойства 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