Как установить высоту combobox?

Настройка DropDownStyle

Свойство ComboBox DropDownStyle можно использовать для изменения поведения поля со списком. Это свойство принимает возможные значения:

• Раскрывающееся меню — (значение по умолчанию). в поле со списком отображается раскрывающийся список, если щелкнуть стрелку и ввести пользовательское значение.
• Simple — поле со списком автоматически отображает раскрывающийся список, и можно ввести пользовательское значение.
• DropDownList — поле со списком работает так же, как элемент управления DropDownList.

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

Значение DropDownList заставляет элемент управления ComboBox работать так же, как и стандартный элемент управления DropDownList

Однако здесь есть важное отличие. В предыдущих версиях Internet Explorer отображается элемент управления DropDownList с бесконечным z-индексом, поэтому элемент управления отображается перед любым элементом управления, помещенным перед ним

Поскольку поле со списком отображает тег HTML вместо HTML- тега SELECT, поле со списком правильно учитывает z-порядок.

Выбор списка элементов из базы данных

Можно получить список элементов, отображаемых ComboBox из базы данных. Например, можно привязать ComboBox к элементу управления SqlDataSource, элементу управления ObjectDataSource, LinqDataSource или EntityDataSource.

Представьте, что вы хотите отобразить список фильмов в поле со списком. Необходимо получить список фильмов из таблицы базы данных фильмов. Выполните следующие действия:

1. Создание страницы с именем movies. aspx
2. Добавьте элемент управления ScriptManager на страницу, перетащив ScriptManager из вкладки расширения AJAX на панели элементов на страницу.
3. Добавьте на страницу элемент управления ComboBox, перетащив поле со списком на страницу.
4. В представление конструирования наведите указатель мыши на элемент управления ComboBox и выберите параметр задача Выбор источника данных (см. рис. 5). Запускается мастер настройки источника данных.
5. На шаге Выбор источника данных выберите < параметр Создать источник данных > .
6. На шаге Выбор типа источника данных выберите База данных.
7. На шаге Выбор подключения к данным выберите свою базу данных (например, мовиесдб. mdf).
8. В шаге сохранить строку подключения в файле конфигурации приложения выберите параметр, чтобы сохранить строку подключения.
9. На шаге Настройка инструкции SELECT выберите таблицу Database Movies и выберите все столбцы.
10. На шаге тестового запроса нажмите кнопку Готово.
11. Вернитесь к шагу Выбор источника данных , выберите столбец Заголовок для отображаемого поля и столбец Идентификатор для поля данных (см. рисунок).
12. Нажмите кнопку ОК, чтобы закрыть мастер.

Рис. 05. Выбор источника данных (щелкните, чтобы просмотреть изображение с полным размером)

Рис. 06. Выбор полей текста и значений данных (щелкните, чтобы просмотреть изображение с полным размером)

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

Листинг 2-movies. aspx

Обратите внимание, что элемент управления ComboBox имеет свойство DataSourceID, которое указывает на элемент управления SqlDataSource. При открытии страницы в браузере отображается список фильмов из базы данных (см

рис. 7). Можно либо выбрать фильм из списка, либо ввести новый фильм, введя фильм в поле со списком.

Рис. 07. Отображение списка фильмов (щелкните, чтобы просмотреть изображение с полным размером)

Настройка AutoCompleteMode

Свойство ComboBox AutoCompleteMode используется для указания того, что происходит, когда пользователь вводит текст в поле со списком. Это свойство принимает следующие возможные значения:

• None-(значение по умолчанию). поле со списком не предоставляет никаких поведений автоматического завершения.
• Предложение. поле со списком Отображает список и выделяет соответствующий элемент в списке (см. рис. 8).
• Append — поле со списком не отображает список и добавляет соответствующий элемент из списка на введенный текст (см. рис. 9).
• Сугжестаппенд — поле со списком Отображает список и добавляет соответствующий элемент из списка на введенный текст (см. рис. 10).

Рис. 08. предложение ComboBox (щелкните, чтобы просмотреть изображение с полным размером)

Рис. 09. добавление соответствующего текста в поле со списком (щелкните, чтобы просмотреть изображение с полным размером)

Рис. 10. предложение и Добавление поля со списком (щелкните, чтобы просмотреть изображение с полным размером)

Создание моделей данных для QComboBox +6

• 22.05.17 16:15

•
stanislav888
•
#329228
•
Хабрахабр

•
Tutorial

•

•

1900

C++, Qt

Всем привет! Хочу поделиться с вами двумя способами, как можно и нужно создавать модели данных для виджетов типа QComboBox в Qt. В конце статьи будет показано решение, для заполнения комбобокса из БД, одной строкой кода.

Способ №1. Полностью ручное создание модели

Все модели данных в Qt должны быть наследниками от QAbstractItemModel. Лично в моей практике комбобоксы всегда отображали перечисление из SQL базы данных. Это были пол, страна, национальность и некоторые другие списки, из которых пользователю нужно было выбрать один пункт. Поэтому, при создании модели, у меня всегда было две параллельных задачи:

1. Как сформировать человекочитаемые названия пунктов пользователю?
2. Как связать читаемые пункты с ключами, которые надо писать в БД?

Для реализации замысла. Первым делом надо посмотреть какие из методов QAbstractItemModel, вы обязаны определить у себя:

• QModelIndex QAbstractItemModel::index(int row, int column, const QModelIndex & parent = QModelIndex()) const
• QModelIndex QAbstractItemModel::parent(const QModelIndex & index) const
• int QAbstractItemModel::columnCount(const QModelIndex & parent = QModelIndex()) const
• int QAbstractItemModel::rowCount(const QModelIndex & parent = QModelIndex()) const
• QVariant QAbstractItemModel::data(const QModelIndex & index, int role = Qt::DisplayRole) const

columnCount()index()parent()QTreeViewQAbstractListModel

Все значения пунктов комбобокса, просто записываються в QList

Начинающим важно понимать. Не программист явно вызывает эту функцию в своём коде

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

NationalityModel::data()QAbstractItemModel::data()

• const QModelIndex &index. Объект содержащий номер строки, колонки и ссылку на родительский QModelIndex. Т.е. QComboBox сообщает место(позицию) пункта, для которого запрашиваются данные. В нашем случае актуален только номер строки. Остальные параметры внутри &index только для совместимости с другими моделями, типа QTreeView и QTableView. Поэтому наша функция запрашивает пару, «читаемое» и «служебное» значения (DataPair) только для данной строки. Хранящиеся в списке возможных значений (m_content).
• int role. В этом параметре QComboBox сообщает, какого рода данные нужны(какая роль). В нашем случае «читаемое» значение это Qt::DisplayRole, а «служебное» Qt::UserRole.

За один вызов NationalityModel::data() возвращаются данные одной роли для одной, конкретной строки в списке.

Если обратится к enum ItemDataRole, где определены Qt::DisplayRole, Qt::UserRole. Станет понятно для чего ещё можно реализовать такую модель. Например, поменять шрифт некоторых пунктов (Qt::FontRole). Выровнять текст пункта меню, как то по особенному. Или задать текст всплывающей подсказки. Смотрите в упомянутый enum. Возможно вы найдёте там то что искали уже давно.

Свойства поля со списком

Свойство	Описание
AutoSize	Автоподбор размера комбинированного поля. True – размер автоматически подстраивается под длину выбранной или введенной строки. False – размер элемента управления определяется свойствами Width и Height.
AutoTab	Включение автоматической табуляции – передачи фокуса следующему элементу управления при достижении максимального числа символов при значениях свойства MaxLenght > 0. True – автоматическая табуляция включена, False – выключена.
ColumnCount	Указывает количество столбцов в раскрывающемся списке. Значение по умолчанию = 1.
ColumnHeads	Добавляет строку заголовков в раскрывающийся список. True – заголовки столбцов включены, False – заголовки столбцов выключены. Значение по умолчанию = False.
ColumnWidths	Ширина столбцов в раскрывающемся списке. Значения для нескольких столбцов указываются в одну строку через точку с запятой (;).
ControlSource	Ссылка на ячейку для ее привязки к элементу управления ComboBox.
ControlTipText	Текст всплывающей подсказки при наведении курсора на элемент управления.
Enabled	Доступ пользователя к полю и раскрывающемуся списку. True – доступ разрешен, False – доступ запрещен*. Значение по умолчанию = True.
Font	Шрифт, начертание и размер текста в поле.
Height	Высота элемента управления ComboBox.
Left	Расстояние от левого края внутренней границы пользовательской формы до левого края комбинированного списка.
List	Позволяет заполнить ComboBox данными из одномерного или двухмерного массива, а также обращаться к отдельным элементам раскрывающегося списка по индексам для записи и чтения.
ListIndex	Номер выбранной пользователем строки в раскрывающемся списке. Нумерация начинается с нуля. Если ничего не выбрано, ListIndex = -1.
ListRows	Количество видимых строк в раскрытом списке. Если общее количество строк больше ListRows, появляется полоса прокрутки. Значение по умолчанию = 8.
Locked	Запрет на отображение раскрывающегося списка, ввод и редактирование данных в поле. True – ввод и редактирование запрещены**, False – ввод и редактирование разрешены. Значение по умолчанию = False.
MatchRequired	Задает проверку вводимых в поле строк с элементами списка. True – проверка включена (допускается ввод только строк, совпадающих с элементами списка), False – проверка выключена (допускается ввод любых строк). Значение по умолчанию = False.
MaxLenght	Максимальная длина строки в поле. Значение по умолчанию = 0, что означает – ограничений нет.
RowSource	Источник строк для раскрывающегося списка (адрес диапазона на рабочем листе Excel).
TabIndex	Целое число, определяющее позицию элемента управления в очереди на получение фокуса при табуляции. Отсчет начинается с 0.
Text	Текстовое содержимое (значение) поля (=Value).
TextAlign	Выравнивание текста в поле: 1 (fmTextAlignLeft) – по левому краю, 2 (fmTextAlignCenter) – по центру, 3 (fmTextAlignRight) – по правому краю.
Top	Расстояние от верхнего края внутренней границы пользовательской формы до верхнего края комбинированного списка.
Value	Текстовое содержимое (значение) поля (=Text).
Visible	Видимость поля со списком. True – ComboBox отображается на пользовательской форме, False – ComboBox скрыт.
Width	Ширина элемента управления.

* При Enabled в значении False пользователь не может раскрывать список, а также вводить или редактировать данные в поле.** Для элемента управления ComboBox действие свойства Locked в значении True аналогично действию свойства Enabled в значении False.

В таблице перечислены только основные, часто используемые свойства поля со списком. Еще больше доступных свойств отображено в окне Properties элемента управления ComboBox, а все методы, события и свойства – в окне Object Browser.

Вызывается Object Browser нажатием клавиши «F2». Слева выберите объект ComboBox, а справа смотрите его методы, события и свойства.

Свойства BackColor, BackStyle, BorderColor, BorderStyle отвечают за внешнее оформление комбинированного списка и его границ. Попробуйте выбирать доступные значения этих свойств в окне Properties, наблюдая за изменениями внешнего вида элемента управления ComboBox на проекте пользовательской формы.

Комментарии

IsEditableСвойства и IsReadOnly определяют, как работает, ComboBox когда пользователь выполняет одно из следующих действий:

• Вводит строку для выбора элемента в ComboBox .

• Вводит строку, которая не соответствует элементу в ComboBox .

• Выбирает часть строки, которая находится в текстовом поле.

• Копирует или вставляет значение в текстовое поле.

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

	IsReadOnly равно	IsReadOnly равно
IsEditable равно	-Не удается выбрать элемент в, ComboBox введя строку.-Невозможно ввести строку, которая не соответствует элементу в ComboBox .— Может выбрать часть строки в ComboBox текстовом поле.— Может скопировать строку в ComboBox текстовое поле, но не может вставить строку в ComboBox текстовое поле.	— Может выбрать элемент в, ComboBox введя строку.— Может ввести строку, не соответствующую элементу в ComboBox .— Может выбрать часть строки в ComboBox текстовом поле.— Может копировать или вставлять строку в ComboBox текстовое поле.
IsEditable равно	— Может выбрать элемент в, ComboBox введя строку.-Невозможно ввести строку, которая не соответствует элементу в ComboBox .-Не удается выбрать часть строки в ComboBox .-Невозможно скопировать или вставить строку в ComboBox .	— Может выбрать элемент в, ComboBox введя строку.-Невозможно ввести строку, которая не соответствует элементу в ComboBox .-Не удается выбрать часть строки в ComboBox .-Невозможно скопировать или вставить строку в ComboBox .

Когда параметр равен IsEditable , ComboBox компонент использует ContentPresenter для вывода текущего выбранного элемента; если IsEditable равно , для TextBox этой цели используется

Обратите внимание, что TextBox отображается только обычный текст, который ComboBoxItem может включать в себя неформатированное текстовое содержимое, например изображения

Элемент ComboBox

Последнее обновление: 31.10.2015

Элемент ComboBox образует выпадающий список и совмещает функциональность компонентов ListBox и TextBox. Для хранения элементов списка в ComboBox также предназначено свойство
Items.

Подобным образом, как и с ListBox, мы можем в окне свойств на свойство Items и нам отобразится окно для добавления элементов ComboBox:

И как и с компонентом ListBox, здесь мы также можем программно управлять элементами.

Добавление элементов:

// добавляем один элемент
comboBox1.Items.Add("Парагвай");
// добавляем набор элементов
comboBox1.Items.AddRange(new string[] { "Уругвай", "Эквадор" });
// добавляем один элемент на определенную позицию
comboBox1.Items.Insert(1, "Боливия");

При добавлении с помощью методов Add / AddRange все новые элементы помещаются в конец списка. Однако если мы зададим у ComboBox свойство
равным , тогда при добавлении будет автоматически производиться сортировка.

Удаление элементов:

// удаляем один элемент
comboBox1.Items.Remove("Аргентина");
// удаляем элемент по индексу
comboBox1.Items.RemoveAt(1);
// удаляем все элементы
comboBox1.Items.Clear();

Мы можем получить элемент по индексу и производить с ним разные действия. Например, изменить его:

comboBox1.Items = "Парагвай";

Настройка оформления ComboBox

С помощью ряда свойств можно настроить стиль оформления компонента. Так, свойство DropDownWidth задает ширину выпадающего списка.
С помощью свойства DropDownHeight можно установить высоту выпадающего списка.

Еще одно свойство MaxDropDownItems позволяет задать число видимых элементов списка — от 1 до 100. По умолчанию это число равно 8.

Другое свойство DropDownStyle задает стиль ComboBox. Оно может принимать три возможных значения:

• Dropdown: используется по умолчанию. Мы можем открыть выпадающий список вариантов при вводе значения в текстовое поле или нажав на кнопку со стрелкой
  в правой части элемента, и нам отобразится собственно выпадающий список, в котором можно выбрать возможный вариант

• DropdownList: чтобы открыть выпадающий список, надо нажать на кнопку со стрелкой в правой стороне элемента

• Simple: ComboBox представляет простое текстовое поле, в котором для перехода между элементами мы можем использовать клавиши
  клавиатуры вверх/вниз

Событие SelectedIndexChanged

Наиболее важным событием для ComboBox также является событие , позволяющее отследить выбор элемента в списке:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        comboBox1.SelectedIndexChanged += comboBox1_SelectedIndexChanged;    
    }

    void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        string selectedState = comboBox1.SelectedItem.ToString();
        MessageBox.Show(selectedState);
    }
}

Здесь также свойство будет ссылаться на выбранный элемент.

НазадВперед

Свойства

• AddColon
• AfterUpdate
• AllowAutoCorrect
• AllowValueListEdits
• Application
• AutoExpand
• AutoLabel
• BackColor
• BackShade
• BackStyle
• BackThemeColorIndex
• BackTint
• BeforeUpdate
• BorderColor
• BorderShade
• BorderStyle
• BorderThemeColorIndex
• BorderTint
• BorderWidth
• BottomMargin
• BottomPadding
• BoundColumn
• CanGrow
• CanShrink
• Column
• ColumnCount
• ColumnHeads
• ColumnHidden
• ColumnOrder
• ColumnWidth
• ColumnWidths
• Controls
• ControlSource
• ControlTipText
• ControlType
• DecimalPlaces
• DefaultValue
• DisplayAsHyperlink
• DisplayWhen
• Enabled
• EventProcPrefix
• FontBold
• FontItalic
• FontName
• FontSize
• FontUnderline
• FontWeight
• ForeColor
• ForeShade
• ForeThemeColorIndex
• ForeTint
• Format
• FormatConditions
• GridlineColor
• GridlineShade
• GridlineStyleBottom
• GridlineStyleLeft
• GridlineStyleRight
• GridlineStyleTop
• GridlineThemeColorIndex
• GridlineTint
• GridlineWidthBottom
• GridlineWidthLeft
• GridlineWidthRight
• GridlineWidthTop
• Height
• HelpContextId
• HideDuplicates
• HorizontalAnchor
• Hyperlink
• IMEHold
• IMEMode
• IMESentenceMode
• InheritValueList
• InputMask
• InSelection
• IsHyperlink
• IsVisible
• ItemData
• ItemsSelected
• KeyboardLanguage
• LabelAlign
• LabelX
• LabelY
• Layout
• LayoutID
• Left
• LeftMargin
• LeftPadding
• LimitToList
• ListCount
• ListIndex
• ListItemsEditForm
• ListRows
• ListWidth
• Locked
• Name
• NumeralShapes
• OldBorderStyle
• OldValue
• OnChange
• OnClick
• OnDblClick
• OnDirty
• OnEnter
• OnExit
• OnGotFocus
• OnKeyDown
• OnKeyPress
• OnKeyUp
• OnLostFocus
• OnMouseDown
• OnMouseMove
• OnMouseUp
• OnNotInList
• OnUndo
• Parent
• Properties
• ReadingOrder
• Recordset
• RightMargin
• RightPadding
• RowSource
• RowSourceType
• ScrollBarAlign
• Section
• Selected
• SelLength
• SelStart
• SelText
• SeparatorCharacters
• ShortcutMenuBar
• ShowOnlyRowSourceValues
• SmartTags
• SpecialEffect
• StatusBarText
• TabIndex
• TabStop
• Tag
• Text
• TextAlign
• ThemeFontIndex
• Top
• TopMargin
• TopPadding
• ValidationRule
• ValidationText
• Value
• VerticalAnchor
• Visible
• Width

Выбор из статического списка элементов

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

Мы создадим новую страницу веб-форм ASP.NET и используем элемент управления ComboBox на странице. Добавьте новую страницу ASP.NET в проект и переключитесь на представление конструирования.

Если вы хотите использовать на странице элемент управления ComboBox, необходимо добавить на страницу элемент управления ScriptManager. Перетащите элемент управления ScriptManager с вкладки расширения AJAX на поверхность конструктора. Элемент управления ScriptManager следует добавить в верхнюю часть страницы. его можно добавить непосредственно под открывающим тегом формы на стороне < сервера > .

Затем перетащите элемент управления ComboBox на страницу. Элемент управления ComboBox можно найти в области элементов с помощью других элементов управления AJAX Control Toolkit и расширителей элементов управления (см. рис).

Рис. 01. Выбор элемента управления ComboBox из панели элементов (щелкните, чтобы просмотреть изображение с полным размером)

Мы будем использовать элемент управления ComboBox для вывода статического списка вариантов. Пользователь может выбрать определенный уровень «оживить» для своего продукта из списка трех вариантов: умеренный, средний и горячий (см. рис. 2).

Рис. 02. выбор из статического списка элементов (щелкните, чтобы просмотреть изображение с полным размером)

Существует два способа добавления этих вариантов в элемент управления ComboBox. Во-первых, следует выбрать параметр задачи изменить параметры при наведении указателя мыши на элемент управления в представление конструирования и открыть редактор элементов (см. рис. 3).

Рис. 03. изменение элементов поля со списком (щелкните, чтобы просмотреть изображение с полным размером)

Второй вариант — добавить список элементов между открывающим и закрывающим < тегами ASP: ComboBox > в представлении исходного кода. Страница в листинге 1 содержит обновленный ComboBox со списком элементов.

Листинг 1-static. aspx

При открытии страницы в листинге 1 можно выбрать один из уже существующих параметров из поля со списком. Иными словами, поле со списком работает так же, как элемент управления DropDownList.

Однако можно также ввести новый вариант (например, Super спици), который отсутствует в существующем списке. Таким образом, поле со списком также работает как элемент управления TextBox.

Независимо от того, выбирается ли уже существующий элемент или вводится настраиваемый элемент, при отправке формы выбранный вами элемент отображается в элементе управления метка. При отправке формы _ обработчик щелчка btnSubmit выполняет и обновляет метку (см. рис. 4).

Рис. 04. Отображение выбранного элемента (щелкните, чтобы просмотреть изображение с полным размером)

Поле со списком поддерживает те же свойства, что и элемент управления DropDownList для получения выбранного элемента после отправки формы:

• SelectedItem. Text — отображает значение свойства Text выбранного элемента.
• SelectedItem. Value — отображает значение свойства Value выбранного элемента или отображает текст, введенный в поле со списком.
• SelectedValue — то же, что и SelectedItem. Value, за исключением того, что это свойство позволяет указать (начальный) выбранный элемент по умолчанию.

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

Пример

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

В следующем примере показано, как установить свойство RowSource для комбо-окна при загрузке формы. При отображлении формы элементы, хранимые в поле Departments в поле комбо tblDepartment, отображаются в поле комбо cboDept.

В следующем примере показано, как создать поле комбо, связанное с одним столбцом при отображке другого столбца. Настройка свойства ColumnCount до 2 указывает, что в поле cboDept будет отображаться первые два столбца источника данных, указанного свойством RowSource. Настройка свойства BoundColumn до 1 указывает, что значение, сохраненное в первом столбце, будет возвращено при проверке значения комбо-окна.

Свойство ColumnWidths указывает ширину двух столбцов. Задав ширину первого столбца до 0in. Первый столбец не отображается в поле комбо.

В следующем примере показано, как добавить элемент в связанное поле комбо.

Элемент управления ComboBox

UserForm.ComboBox – это элемент управления пользовательской формы, предназначенный для передачи в код VBA информации, выбранной пользователем из раскрывающегося списка или введенной с клавиатуры.

ComboBox представляет из себя комбинацию двух элементов управления: текстового поля (TextBox) и списка (ListBox), поэтому его еще называют «комбинированным списком» или «полем со списком». Также ComboBox сочетает в себе свойства этих двух элементов управления.

Изначально комбинированный список прорисовывается на форме в виде текстового поля с кнопкой для отображения раскрывающегося списка. Далее по тексту будем использовать слово «поле» в значении текстового поля в составе элемента управления ComboBox, а словосочетание «раскрывающийся список» – в значении списка в составе элемента управления ComboBox.

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

Элемент управления ComboBox незаменим при больших списках. При списках из нескольких позиций его можно заменить на ListBox, который отображает позиции для выбора сразу после загрузки формы, не требуя дополнительных действий от пользователя.

Варианты использования

Составной список

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

Основное значение — короткое, емкое и уникальное.

Выбор сделан

После выбора показывайте дополнительное значение в поле серым цветом. Если оно полностью не входит, показывайте при наведении хинт:

Фокус по заполненному полю

При получении фокуса тултип должен исчезнуть.

Поиск по вхождению

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

Чтобы понять, стоит ли использовать поиск по вхождению, задайте себе вопрос: точно ли пользователь знает начало строки? Если нет — используйте поиск по вхождению.

Подсвечивайте совпадения жирным начертанием Lab Grotesque K Bold.

Избранные варианты

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

Фокус по пустому полю

Эти варианты показываются над основным списком,
отделяются чертой.

Если это комбобокс в режиме автокомплита сразу по фокусу показывайте список из 3-5 вариантов с заголовком. Заголовок нужен для того, чтобы было понятно, что это не полный список:

Указание значения не из справочника

Если справочник может быть неактуальным, дайте пользователю возможность указать свое значение

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

Автоматическое добавление значения в справочник

Если пользователь сам наполняет справочник, то при вводе нового значения не показывайте текст «Нет совпадений». Добавляйте значение в список и при следующем заполнении предлагайте его наравне с остальными.

Фокус потерян без выбора из справочника

Добавление карточки в справочник

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

Фокус на пустом поле

Если добавление карточки частый сценарий — выбирайте пункт «Добавить» по умолчанию, чтобы
пользователь мог нажать Enter и быстро перейти к добавлению
новой карточки:

В открывающемся лайтбоксе добавления карточки поле «Название» предзаполняется уже введенным значением.

Потеря фокуса

Если в предыдущем состоянии поле теряет фокус, срабатывает валидация: поле красится в красный, показывается сообщение об ошибке.

Привязка данных в ListBox и ComboBox

Последнее обновление: 31.10.2015

Кроме прямого добавления элементов в коллекцию компонентов ListBox и ComboBox мы также можем использовать механизм привязки
данных.

Привязка данных в ListBox и ComboBox реализуется с помощью следующих свойств:

• DataSource: источник данных — какой-нибудь массив или коллекция объектов

• DisplayMember: свойство объекта, которое будет использоваться для отображения в ListBox / ComboBox

• ValueMember: свойство объекта, которое будет использоваться в качестве его значения

Рассмотрим пример.

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        List<Phone> phones = new List<Phone>
        {
            new Phone { Id=11, Name="Samsung Galaxy Ace 2", Year=2012},
            new Phone { Id=12, Name="Samsung Galaxy S4", Year=2013},
            new Phone { Id=13, Name="iPhone 6", Year=2014},
            new Phone { Id=14, Name="Microsoft Lumia 435", Year=2015},
            new Phone { Id=15, Name="Xiaomi Mi 5", Year=2015}
        };

        listBox1.DataSource = phones;
        listBox1.DisplayMember = "Name";
        listBox1.ValueMember = "Id";

        listBox1.SelectedIndexChanged += listBox1_SelectedIndexChanged;
    }

    void listBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        // получаем id выделенного объекта
        int id = (int)listBox1.SelectedValue;

        // получаем весь выделенный объект
        Phone phone = (Phone)listBox1.SelectedItem;
        MessageBox.Show(id.ToString() + ". " + phone.Name);
    }
}
class Phone
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Year { get; set; }
}

Итак, на форме у нас есть список ListBox с именем listBox1. В коде имеется класс Phone с тремя свойствами, объекты которого мы хотим выводить в список.
В отличие от предыдущих тем эта задача сложнее, так как раньше мы выводили обычные строки, тут же у нас сложные объекты.

Для вывода используем механизм привязки. Сначала устанавливаем список телефонов в качестве источника данных:

listBox1.DataSource = phones;

Затем устанавливаем в качестве отображаемого свойства свойство Name класса Phone, а в качестве свойства значения — свойство Id:

listBox1.DisplayMember = "Name";
listBox1.ValueMember = "Id";

Значение отображаемого свойства мы затем увидим в списке. Оно будет представлять каждый отдельный объект Phone.

С помощью же свойства значения, которым является свойство Id, мы можем упростить работу с источником данных. В данном случае оно не играет большой роли.
Но если бы мы использовали в качестве источника данных некоторый набор объектов из базы данных, то с помощью id нам было проще удалять, обновлять и взаимодействовать
с базой данных.

И теперь если мы выделим какой-то объект, то свойство SelectedItem элементы ListBox будет содержать объект Phone, у которого мы можем получить
значения свойств:

Phone phone = (Phone)listBox1.SelectedItem;
string name = phone.Name;

А выделенное значение, то есть значение свойства Id выделенного телефона, будет находиться в свойстве SelectedValue.

И если мы запустим приложение, то увидим все отображаемые телефоны:

Все то же самое характерно и для элемента ComboBox. Пусть кроме ListBoxa на форме есть ComboBox:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        List<Phone> phones = new List<Phone>
        {
            new Phone { Id=11, Name="Samsung Galaxy Ace 2", Year=2012},
            new Phone { Id=12, Name="Samsung Galaxy S4", Year=2013},
            new Phone { Id=13, Name="iPhone 6", Year=2014},
            new Phone { Id=14, Name="Microsoft Lumia 435", Year=2015},
            new Phone { Id=15, Name="Xiaomi Mi 5", Year=2015}
        };

        comboBox1.DataSource = phones;
        comboBox1.DisplayMember = "Name";
        comboBox1.ValueMember = "Id";

        comboBox1.SelectedIndexChanged += comboBox1_SelectedIndexChanged;

        listBox1.DisplayMember = "Name";
        listBox1.ValueMember = "Id";
	}

    void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Phone phone = (Phone)comboBox1.SelectedItem;
        listBox1.Items.Add(phone);
    }
}

class Phone
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Year { get; set; }
}

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

В отличие от ListBoxa ComboBox имеет три свойства для обработки выделенного объекта:

• : выбранный элемент

• : значение свойства значения, в данном случае свойство Id

• : значение свойства отображение, в данном случае свойство Name класса Phone

НазадВперед

Описание работы

Комбобокс со стрелкой

Плейсхолдер подсказывает, что в поле можно ввести свое значение или выбрать его из списка вручную:

Фокус по пустому полю

При получении фокуса плейсхолдер становится чуть светлее, открывается список вариантов.

Когда курсор находится над списком, скроллинг страницы блокируется.

При вводе первого символа список фильтруется. Первый пункт в списке подсвечивается:

Выбор пункта из списка

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

При выборе значения мышью или клавишей Enter список закрывается, фокус остается в поле. Список будет показан снова при следующем клике в поле или изменении значения.

При получении фокуса введенное значение выделяется, раскрывается список, прокрученный до выбранного значения:

Нет совпадений

Если в справочнике не найдено совпадений с введенным значением, комбобокс показывает соответствующий текст

Важно показать подсказку, чтобы пользователь понял, что поле обработало его запрос

В этом состоянии, при нажатии на клавиатуре Enter ничего не происходит, фокус остается в поле.

Потеря фокуса без выбора пункта из списка

Если введенное значение совпадает со значением из справочника, при потере фокуса это значение выбирается:

Если ничего не найдено или список не успел загрузиться, покажите ошибку:

Комбобокс без стрелки

В целом комбобокс без стрелки работает так же как со стрелкой с некоторыми исключениями.

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

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

При клике или получению фокуса плейсхолдер в поле становится чуть светлее.

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

Оптимальное количество строк в списке — 5. Если после фильтрации список может быть очень большим, это число можно увеличивать до 20.

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

Поиск запускается и список появляется только после изменения значения.