Создание списка для выбора элементов в Windows Forms Windows Forms Controls Used to List Options
Вы можете добавить разнообразные элементы управления в форму Windows Forms, если вы хотите предоставить пользователям список вариантов для выбора. You can add a variety of controls to a Windows Form if you want to provide users with a list of options to choose from. В зависимости от того, насколько необходимо ограничить ввод пользователей, можно добавить ListBox элемент управления, ComboBox элемент управления или CheckedListBox элемент управления. Depending on how much you want to restrict your users’ input, you can add a ListBox control, a ComboBox control, or a CheckedListBox control. Используйте следующие ссылки, чтобы определить, какие элементы управления лучше подходят для ваших нужд. Use the following links to determine which control best suits your needs.
в этом разделе In This Section
Применение элемента управления ComboBox вместо элемента управления ListBox в Windows Forms When to Use a Windows Forms ComboBox Instead of a ListBox Рекомендует соответствующий элемент управления на основе списка в зависимости от потребностей и ограничений формы Windows Forms. Recommends an appropriate list-based control depending on the needs and restrictions of your Windows Form.
Практическое руководство. Связывание элемента управления ComboBox или ListBox с данными в Windows Forms How to: Bind a Windows Forms ComboBox or ListBox Control to Data Инструкции по привязке элемента управления на основе списка к источнику данных. Gives directions for binding a list-based control to a data source.
Справочник Reference
CheckedListBox Описание класса и всех его членов. Describes this class and has links to all its members.
ComboBox Описание класса и всех его членов. Describes this class and has links to all its members.
ListBox Описание класса и всех его членов. Describes this class and has links to all its members.
Связанные разделы Related Sections
Общие сведения об элементе управления CheckedListBox CheckedListBox Control Overview Описание элемента управления, его основных возможностей и свойств. Explains what this control is and its key features and properties.
Общие сведения об элементе управления ComboBox ComboBox Control Overview Описание элемента управления, его основных возможностей и свойств. Explains what this control is and its key features and properties.
Общие сведения об элементе управления ListBox ListBox Control Overview Описание элемента управления, его основных возможностей и свойств. Explains what this control is and its key features and properties.
Элементы управления для использования в формах Windows Forms Controls to Use on Windows Forms Полный список элементов управления Windows Forms со ссылками на информацию об их применении. Provides a complete list of Windows Forms controls, with links to information on their use.
Поле со списком и список Combo box and list box
Поле со списком (также известное как раскрывающийся список) позволяет представить список элементов, из которых пользователь может выбирать. Use a combo box (also known as a drop-down list) to present a list of items that a user can select from. Сначала поле со списком представлено в компактном состоянии, а затем развертывается для отображения списка элементов, доступных для выбора. A combo box starts in a compact state and expands to show a list of selectable items. Элемент ListBox аналогичен полю со списком, но он не сворачивается и не имеет компактной формы. A ListBox is similar to a combo box, but is not collapsible/does not have a compact state. Дополнительные сведения о списках приведены в конце этой статьи. You can learn more about List boxes at the end of this article.
Если поле со списком закрыто, отображается либо текущий выбор, либо пустое поле (если ни один из элементов не выбран). When the combo box is closed, it either displays the current selection or is empty if there is no selected item. Когда пользователь развертывает поле со списком, оно отображает список элементов, доступных для выбора. When the user expands the combo box, it displays the list of selectable items.
Поле со списком в компактном состоянии с заголовкомA combo box in its compact state with a header.
Получение библиотеки пользовательского интерфейса WindowsGet the Windows UI Library
Библиотека пользовательского интерфейса Windows 2.2 или более поздних версий содержит новый шаблон для этого элемента управления, который использует закругленные углы. Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Дополнительные сведения см. в разделе о радиусе угла. For more info, see Corner radius. WinUI — это пакет NuGet, содержащий новые элементы управления и функции пользовательского интерфейса для приложений для Windows. WinUI is a NuGet package that contains new controls and UI features for Windows apps. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. For more info, including installation instructions, see Windows UI Library.
Выбор правильного элемента управления Is this the right control?
Используйте раскрывающийся список, чтобы дать пользователям возможность выбрать одно значение из набора элементов, которые можно надлежащим образом представить с помощью отдельных строк текста. Use a drop-down list to let users select a single value from a set of items that can be adequately represented with single lines of text.
Используйте представление списка или сетки вместо поля со списком для отображения элементов, состоящих из нескольких строк текста или изображений. Use a list or grid view instead of a combo box to display items that contain multiple lines of text or images.
Если элементов меньше пяти, возможно, лучше воспользоваться переключателями (если можно выбрать только один элемент) или флажками (если можно выбрать несколько элементов). When there are fewer than five items, consider using radio buttons (if only one item can be selected) or check boxes (if multiple items can be selected).
Используйте поле со списком, если элементы выбора не имеют большого значения для работы приложения. Use a combo box when the selection items are of secondary importance in the flow of your app. Если для большинства пользователей в большей части ситуаций рекомендуется использовать вариант по умолчанию, отображение всех элементов в списке может привлечь излишнее внимание к вариантам. If the default option is recommended for most users in most situations, showing all the items by using a list view might draw more attention to the options than necessary. Поле со списком позволяет экономить пространство и не отвлекать пользователя. You can save space and minimize distraction by using a combo box.
Примеры Examples
XAML Controls Gallery XAML Controls Gallery
Если у вас установлено приложение коллекции элементов управления XAML, щелкните здесь, чтобы открыть приложение и увидеть элемент ComboBox в действии. If you have the XAML Controls Gallery app installed, click here to open the app and see the ComboBox in action.
Поле со списком в компактном состоянии может отображать заголовок. A combo box in its compact state can show a header.
Хотя поля со списком разворачиваются для поддержки более длинных строк, избегайте слишком длинных строк, так как их сложно читать. Although combo boxes expand to support longer string lengths, avoid excessively long strings that are difficult to read.
Если коллекция в поле со списком достаточно длинная, появляется полоса прокрутки. If the collection in a combo box is long enough, a scroll bar will appear to accommodate it. Логически группируйте элементы в списке. Group items logically in the list.
Создание поля со списком Create a combo box
Для заполнения полей со списком нужно напрямую добавить объекты в коллекцию элементов или привязать свойство ItemsSource к источнику данных. You populate the combo box by adding objects directly to the Items collection or by binding the ItemsSource property to a data source. Добавляемые в ComboBox элементы помещаются в контейнеры ComboBoxItem. Items added to the ComboBox are wrapped in ComboBoxItem containers.
Здесь представлено простое поле со списком с добавленными элементами в формате XAML. Here’s a simple combo box with items added in XAML.
В следующем примере демонстрируется привязка поля со списком к коллекции объектов FontFamily. The following example demonstrates binding a combo box to a collection of FontFamily objects.
Выбор элементов Item selection
Подобно ListView и GridView, элемент ComboBox является производным от элемента выбора Selector, поэтому выбор пользователя можно получить стандартным образом. Like ListView and GridView, ComboBox is derived from Selector, so you can get the user’s selection in the same standard way.
Вы можете получить или задать выбранный в поле со списком элемент с помощью свойства SelectedItem, а индекс выбранного элемента — с помощью свойства SelectedIndex. You can get or set the combo box’s selected item by using the SelectedItem property, and get or set the index of the selected item by using the SelectedIndex property.
Чтобы получить значение конкретного свойства для выбранного элемента данных, можно использовать свойство SelectedValue. To get the value of a particular property on the selected data item, you can use the SelectedValue property. В этом случае задайте свойство SelectedValuePath для указания свойства выбранного элемента, из которого необходимо получить значение. In this case, set the SelectedValuePath to specify which property on the selected item to get the value from.
В случае задания свойства SelectedItem или SelectedIndex для указания выбора по умолчанию возникает исключение, если свойство задано до заполнения коллекции элементов для поля со списком. If you set SelectedItem or SelectedIndex to indicate the default selection, an exception occurs if the property is set before the combo box Items collection is populated. Если вы не определяете элементы в коде XAML, лучше всего обработать событие Loaded поля со списком и задать параметр SelectedItem или SelectedIndex в обработчике событий Loaded. Unless you define your Items in XAML, it’s best to handle the combo box Loaded event, and set SelectedItem or SelectedIndex in the Loaded event handler.
Вы можете осуществить привязку к этим свойствам в XAML или обрабатывать событие SelectionChanged для реагирования на изменения выбора. You can bind to these properties in XAML, or handle the SelectionChanged event to respond to selection changes.
В коде обработчика событий выбранный элемент можно получить из свойства SelectionChangedEventArgs.AddedItems. In the event handler code, you can get the selected item from the SelectionChangedEventArgs.AddedItems property. Ранее выбранный элемент (при наличии) можно получить из свойства SelectionChangedEventArgs.RemovedItems. You can get the previously selected item (if any) from the SelectionChangedEventArgs.RemovedItems property. Каждая из коллекций AddedItems и RemovedItems содержит только один элемент, так как поле со списком не поддерживает выбор нескольких элементов. The AddedItems and RemovedItems collections each contain only 1 item because combo box does not support multiple selection.
В этом примере показано, как обрабатывать событие SelectionChanged, а также как выполнить привязку к выбранному элементу. This example shows how to handle the SelectionChanged event, and also how to bind to the selected item.
Событие SelectionChanged и навигация с помощью клавиатуры SelectionChanged and keyboard navigation
По умолчанию событие SelectionChanged возникает в том случае, когда пользователь щелкает элемент в списке, касается его или нажимает клавишу ВВОД, наведя на элемент указатель, чтобы зафиксировать свой выбор, и поле со списком закрывается. By default, the SelectionChanged event occurs when a user clicks, taps, or presses Enter on an item in the list to commit their selection, and the combo box closes. Выбор не изменяется в том случае, когда пользователь осуществляет навигацию по открытому полю со списком с помощью клавиш со стрелками на клавиатуре. Selection doesn’t change when the user navigates the open combo box list with the keyboard arrow keys.
Чтобы создать поле со списком, которое обновляется в режиме реального времени, пока пользователь использует клавиши со стрелками (например, раскрывающийся список выбора шрифтов), задайте для свойства SelectionChangedTrigger значение Always. To make a combo box that «live updates» while the user is navigating the open list with the arrow keys (like a Font selection drop-down), set SelectionChangedTrigger to Always. В результате событие SelectionChanged возникает при переходе фокуса на другой элемент в открытом списке. This causes the SelectionChanged event to occur when focus changes to another item in the open list.
Изменение алгоритма поведения выбранного элемента Selected item behavior change
В Windows 10, версия 1809 (пакет SDK 17763) или более поздняя, алгоритм поведения выбранных элементов обновлен — теперь они поддерживают редактируемые поля со списком. In Windows 10, version 1809 (SDK 17763) or later, the behavior of selected items is updated to support editable combo boxes.
В более ранних версиях пакета SDK, чем 17763, значение свойства SelectedItem (и, следовательно, свойств SelectedValue и SelectedIndex) должно было находиться в коллекции элементов поля со списком. Prior to SDK 17763, the value of the SelectedItem property (and therefore, SelectedValue and SelectedIndex) was required to be in the combo box’s Items collection. В предыдущем примере установка colorComboBox.SelectedItem = «Pink» приводит к таким выходным данным: Using the previous example, setting colorComboBox.SelectedItem = «Pink» results in:
SelectedItem = null. SelectedItem = null
SelectedValue = null. SelectedValue = null
SelectedIndex = -1. SelectedIndex = -1
В пакете SDK версии 17763 и более поздних значение свойства SelectedItem (и, следовательно, свойств SelectedValue и SelectedIndex) не должно находиться в коллекции элементов поля со списком. In SDK 17763 and later, the value of the SelectedItem property (and therefore, SelectedValue and SelectedIndex) is not required to be in the combo box’s Items collection. В предыдущем примере установка colorComboBox.SelectedItem = «Pink» приводит к таким выходным данным: Using the previous example, setting colorComboBox.SelectedItem = «Pink» results in:
SelectedItem =Pink. SelectedItem = Pink
SelectedValue = Pink. SelectedValue = Pink
SelectedIndex = -1. SelectedIndex = -1
Поиск по тексту Text Search
Поля со списком автоматически поддерживают поиск в их коллекциях. Combo boxes automatically support search within their collections. По мере того, как пользователь вводит символы на физической клавиатуре, выбрав открытое или закрытое поле со списком, отображаются варианты, подходящие под строку пользователя. As users type characters on a physical keyboard while focused on an open or closed combo box, candidates matching the user’s string are brought into view. Эта функция особенно полезна при навигации по длинному списку. This functionality is especially helpful when navigating a long list. Например, при взаимодействии с раскрывающимся списком, который содержит список штатов, пользователь может нажать клавишу W, чтобы представить «Washington» для быстрого выбора. For example, when interacting with a drop-down containing a list of states, users can press the «w» key to bring «Washington» into view for quick selection. Текстовый поиск не чувствителен к регистру. The text search is not case-sensitive.
Чтобы отключить эту функцию, можно задать для свойства IsTextSearchEnabled значение false. You can set the IsTextSearchEnabled property to false to disable this functionality.
Создание редактируемого поля со списком Make a combo box editable
Для этой функции требуется Windows 10, версия 1809 (пакет SDK 17763) или более поздняя. This feature requires Windows 10, version 1809 (SDK 17763) or later.
По умолчанию поле со списком позволяет пользователю выбирать из предопределенного списка вариантов. By default, a combo box lets the user select from a pre-defined list of options. Однако существуют случаи, когда список содержит только подмножество допустимых значений и пользователь должен иметь возможность ввести остальные значения, которые не включены в список. However, there are cases where the list contains only a subset of valid values, and the user should be able to enter other values that aren’t listed. Для этого можно создать редактируемое поле со списком. To support this, you can make the combo box editable.
Чтобы создать редактируемое поле со списком, задайте для свойства IsEditable значение true. To make a combo box editable, set the IsEditable property to true. Затем обработайте событие TextSubmitted для работы со значением, которое ввел пользователь. Then, handle the TextSubmitted event to work with the value entered by the user.
По умолчанию значение SelectedItem обновляется, когда пользователь фиксирует введенный текст. By default, the SelectedItem value is updated when the user commits custom text. Это поведение можно переопределить, задав для свойства Handled значение true в аргументе события TextSubmitted. You can override this behavior by setting Handled to true in the TextSubmitted event args. Если событие отмечено как обработанное, в поле со списком не будут предприниматься дополнительные действия после завершения события и поле будет оставаться редактируемым. When the event is marked as handled, the combo box will take no further action after the event and will stay in the editing state. Значение SelectedItem не будет обновляться. SelectedItem will not be updated.
В приведенном ниже примере показано простое редактируемое поле со списком. This example shows a simple editable combo box. Список содержит простые строки, и любое введенное пользователем значение будет использоваться в том виде, в котором оно было введено. The list contains simple strings, and any value entered by the user is used as entered.
Элемент выбора «недавно использованные имена» позволяет вводить пользовательские строки. A «recently used names» chooser lets the user enter custom strings. Список RecentlyUsedNames содержит некоторые значения, из которых можно выбирать, но пользователь также может добавлять новые пользовательские значения. The ‘RecentlyUsedNames’ list contains some values that the user can choose from, but the user can also add a new, custom value. Свойство CurrentName представляет имя, введенное в настоящий момент. The ‘CurrentName’ property represents the currently entered name.
Событие TextSubmitted Text submitted
Вы можете обработать событие TextSubmitted для работы со значением, которое ввел пользователь. You can handle the TextSubmitted event to work with the value entered by the user. Как правило, в обработчике событий проверяется правильность введенного пользователем значения, после чего значение используется в приложении. In the event handler, you will typically validate that the value entered by the user is valid, then use the value in your app. В зависимости от ситуации, можно также добавить значение в поле списка вариантов для будущего использования. Depending on the situation, you might also add the value to the combo box’s list of options for future use.
Событие TextSubmitted возникает при выполнении следующих условий: The TextSubmitted event occurs when these conditions are met:
Для свойства IsEditable установлено значение true. The IsEditable property is true
Пользователь вводит текст, который не соответствует текущей записи в поле со списком. The user enters text that does not match an existing entry in the combo box list
Пользователь нажимает клавишу ВВОД или перемещает фокус с поля со списком. The user presses Enter, or moves focus from the combo box.
Событие TextSubmitted не происходит, если пользователь вводит текст, а затем осуществляет навигацию вверх или вниз по списку. The TextSubmitted event does not occur if the user enters text and then navigates up or down through the list.
Пример. Проверка входных данных и локальное использование Sample — Validate input and use locally
В этом примере элемент выбора размера шрифта содержит набор значений, которые соответствуют таблице размеров шрифта, однако пользователь может также задать значения, которые не внесены в список. In this example, a font size chooser contains a set of values corresponding to the font size ramp, but the user may enter font sizes that are not in the list.
Когда пользователь добавляет значение, которое отсутствует в списке, размер шрифта обновляется, однако значение не заносится в этот список. When the user adds a value that’s not in the list, the font size updates, but the value is not added to the list of font sizes.
Если только что введенное значение не является допустимым, необходимо использовать свойство SelectedValue, чтобы вернуть для свойства Text последнее допустимое значение. If the newly entered value is not valid, you use the SelectedValue to revert the Text property to the last known good value.
Пример. Проверка входных данных и добавление значений в список Sample — Validate input and add to list
В этом примере средство выбора избранного цвета содержит наиболее распространенные избранные цвета (красный, синий, зеленый, оранжевый). Однако пользователь также может ввести собственный избранный цвет, который не включен в список. Here, a «favorite color chooser» contains the most common favorite colors (Red, Blue, Green, Orange), but the user may enter a favorite color that’s not in the list. Когда пользователь добавляет допустимый цвет (например, розовый), этот цвет добавляется в список и устанавливается как активный избранный цвет. When the user adds a valid color (like Pink), the newly entered color is added to the list and set as the active «favorite color».
Что рекомендуется и что не рекомендуется делать Do’s and don’ts
Ограничьте текстовое содержимое элементов полей со списком одной строкой. Limit the text content of combo box items to a single line.
Сортируйте элементы в поле со списком в логическом порядке. Sort items in a combo box in the most logical order. Группируйте связанные параметры и размещайте часто используемые параметры в начале списка. Group together related options and place the most common options at the top. Названия сортируйте в алфавитном порядке, числа — по возрастанию, даты — по хронологии. Sort names in alphabetical order, numbers in numerical order, and dates in chronological order.
Окна со списками List boxes
Окно со списком позволяет пользователю выбрать один или несколько элементов коллекции. A list box allows the user to choose either a single item or multiple items from a collection. Окна со списками аналогичны раскрывающимся спискам за исключением того, что они всегда открыты — у окна со списком нет компактного (не развернутого) состояния. List boxes are similar to drop-down lists, except that list boxes are always open—there is no compact (non-expanded) state for a list box. Элементы списка можно прокручивать, если для отображения списка полностью не хватает места. Items in the list can be scrolled if there isn’t space to show everything.
