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

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

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

Это правильный элемент управления?

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

Примеры

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

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

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

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

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

Поля списка

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

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

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

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

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

Создайте комбинированное поле

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

Для заполнения комбинированного списка нужно напрямую добавить объекты в коллекцию Items или привязать свойство 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 = Розовый
• 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 возникает при выполнении следующих условий:

• Для свойства 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.
}

UWP и WinUI 2

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

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

Связанные статьи

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