windowsforms-devexpress-dot-xtraeditors-c28298cd.md
A control that displays a list of items that a user can select. This control can be populated with items from a data source.
Namespace : DevExpress.XtraEditors
Assembly : DevExpress.XtraEditors.v25.2.dll
NuGet Package : DevExpress.Win.Navigation
[DXLicenseWinFormsEditors]
[ListBoxControl.ListBoxControlCustomBindingProperties]
public class ListBoxControl :
BaseListBoxControl,
IBehaviorPropertiesFilter
<ListBoxControl.ListBoxControlCustomBindingProperties>
<DXLicenseWinFormsEditors>
Public Class ListBoxControl
Inherits BaseListBoxControl
Implements IBehaviorPropertiesFilter
A ListBoxControl displays a list of items and allows a user to select none, one, or multiple items.
Use the DataSource property to bind the control to a data source. The control automatically creates items based on the data source.
The code below shows how to use a DataTable as a data source.
using DevExpress.XtraEditors;
listBoxControl1.DataSource = GetCountries();
listBoxControl1.DisplayMember = "Name";
listBoxControl1.ValueMember = "PhoneCode";
listBoxControl1.SelectedValueChanged += ListBoxControl1_SelectedValueChanged;
private void ListBoxControl1_SelectedValueChanged(object sender, EventArgs e) {
var listBoxControl = sender as ListBoxControl;
XtraMessageBox.Show(listBoxControl.SelectedValue.ToString());
}
DataTable GetCountries() {
DataTable table = new DataTable();
DataColumn name = new DataColumn("Name", typeof(string));
DataColumn phoneCode = new DataColumn("PhoneCode", typeof(int));
table.Columns.AddRange(new DataColumn[] { name, phoneCode});
table.Rows.Add(new object[] { "United States", 1 });
table.Rows.Add(new object[] { "Afghanistan", 93 });
// ...
table.Rows.Add(new object[] { "Zimbabwe", 263 });
return table;
}
Imports DevExpress.XtraEditors
listBoxControl1.DataSource = GetCountries()
listBoxControl1.DisplayMember = "Name"
listBoxControl1.ValueMember = "PhoneCode"
AddHandler listBoxControl1.SelectedValueChanged, AddressOf ListBoxControl1_SelectedValueChanged
Private Sub ListBoxControl1_SelectedValueChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim listBoxControl = TryCast(sender, ListBoxControl)
Call XtraMessageBox.Show(listBoxControl.SelectedValue.ToString())
End Sub
Private Function GetCountries() As DataTable
Dim table As DataTable = New DataTable()
Dim name As DataColumn = New DataColumn("Name", GetType(String))
Dim phoneCode As DataColumn = New DataColumn("PhoneCode", GetType(Integer))
table.Columns.AddRange(New DataColumn() {name, phoneCode})
table.Rows.Add(New Object() {"United States", 1})
table.Rows.Add(New Object() {"Afghanistan", 93})
' ...
table.Rows.Add(New Object() {"Zimbabwe", 263})
Return table
End Function
If objects in the data source expose multiple data fields, use the following properties to specify fields that contain an item’s value and string representation:
The code below uses the ValueMember and DisplayMember properties to specify data fields that contain a business object’s value and string representation. If you do not specify these properties, the control uses the business object as a value and the ToString() method to obtain the object’s string representation.
using DevExpress.XtraEditors;
listBoxControl1.DataSource = Country.Countries;
listBoxControl1.DisplayMember = "Name";
listBoxControl1.ValueMember = "PhoneCode";
listBoxControl1.SelectedValueChanged += ListBoxControl1_SelectedValueChanged;
private void ListBoxControl1_SelectedValueChanged(object sender, EventArgs e) {
var listBoxControl = sender as ListBoxControl;
XtraMessageBox.Show(listBoxControl.SelectedValue.ToString());
}
public class Country {
public string Name { get; set; }
public int PhoneCode { get; set; }
public override string ToString() {
return $"{Name}, {PhoneCode}";
}
public static Country[] Countries = (new Country[] {
new Country() { Name = "United States", PhoneCode = 1 },
new Country() { Name = "Afghanistan", PhoneCode = 93 },
// ...
new Country() { Name = "Zimbabwe", PhoneCode = 263 }
});
}
Imports DevExpress.XtraEditors
listBoxControl1.DataSource = Country.Countries
listBoxControl1.DisplayMember = "Name"
listBoxControl1.ValueMember = "PhoneCode"
AddHandler listBoxControl1.SelectedValueChanged, AddressOf ListBoxControl1_SelectedValueChanged
Private Sub ListBoxControl1_SelectedValueChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim listBoxControl = TryCast(sender, ListBoxControl)
Call XtraMessageBox.Show(listBoxControl.SelectedValue.ToString())
End Sub
Public Class Country
Public Property Name As String
Public Property PhoneCode As Integer
Public Overrides Function ToString() As String
Return $"{Name}, {PhoneCode}"
End Function
Public Shared Countries As Country() = (
New Country() {
New Country() With {
.Name = "United States",
.PhoneCode = 1
},
New Country() With {
.Name = "Afghanistan",
.PhoneCode = 93
},
New Country() With {
.Name = "Zimbabwe",
.PhoneCode = 263
}
}
)
End Class
You can use a ListBoxControl if it is not bound to a data source. The Items property allows you to populate the control with items in unbound mode.
The code below uses an array of strings to populate the Items collection.
// Initialize an array of strings.
string[] myColors = {
Color.Black.Name,
Color.Blue.Name,
Color.Brown.Name,
Color.Green.Name,
Color.Red.Name,
Color.Yellow.Name,
Color.Orange.Name
};
// Check whether a data source is assigned to the ListBoxControl.
if (listBoxControl1.DataSource == null)
// Add items to the ListBoxControl.
listBoxControl1.Items.AddRange(myColors);
' Initialize an array of strings.
Dim myColors() As String = New String() {Color.Black.Name, Color.Blue.Name, Color.Brown.Name, _
Color.Green.Name, Color.Red.Name, Color.Yellow.Name, Color.Orange.Name}
' Check whether a data source is assigned to the ListBoxControl.
If ListBoxControl1.DataSource Is Nothing Then
' Add items to the ListBoxControl.
ListBoxControl1.Items.AddRange(myColors)
End If
You can create an HTML-CSS template or regular template to render items in the control. An item template allows you to display multiple text and image elements arranged and painted in any manner.
See the following topic for more information: Templated ListBox Controls.
Use the SelectionMode property to specify whether a user can select none, one, or multiple items. To obtain the selection, use the SelectedIndex, SelectedIndices, SelectedItem, SelectedItems, or SelectedValue property.
The SelectedIndexChanged and SelectedValueChanged events fire when the selection changes.
In this example, a ListBoxControl displays a list of system colors. The following code handles the BaseListBoxControl.SelectedIndexChanged event to change the form’s background color when a user selects a color in the listbox:
private void Form1_Load(object sender, EventArgs e) {
Color[] colorArray = {
SystemColors.ActiveCaption,
SystemColors.ActiveCaptionText,
SystemColors.AppWorkspace,
SystemColors.Control,
SystemColors.ControlDark,
SystemColors.ControlLight,
SystemColors.ControlText,
SystemColors.Desktop,
SystemColors.Highlight,
SystemColors.InactiveBorder,
SystemColors.InactiveCaption,
SystemColors.Info,
SystemColors.InfoText,
SystemColors.Menu,
SystemColors.MenuText,
SystemColors.ScrollBar,
SystemColors.Window,
SystemColors.WindowFrame
};
listBoxControl1.DataSource = colorArray;
listBoxControl1.DisplayMember = "Name";
listBoxControl1.SelectedIndexChanged += ListBoxControl1_SelectedIndexChanged;
}
private void ListBoxControl1_SelectedIndexChanged(object sender, EventArgs e) {
if (listBoxControl1.SelectedValue != null)
this.BackColor = (Color)listBoxControl1.SelectedValue;
else
this.BackColor = Color.Black;
}
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim colorArray() As Color = {
SystemColors.ActiveCaption,
SystemColors.ActiveCaptionText,
SystemColors.AppWorkspace,
SystemColors.Control,
SystemColors.ControlDark,
SystemColors.ControlLight,
SystemColors.ControlText,
SystemColors.Desktop,
SystemColors.Highlight,
SystemColors.InactiveBorder,
SystemColors.InactiveCaption,
SystemColors.Info,
SystemColors.InfoText,
SystemColors.Menu,
SystemColors.MenuText,
SystemColors.ScrollBar,
SystemColors.Window,
SystemColors.WindowFrame}
ListBoxControl1.DataSource = colorArray
ListBoxControl1.DisplayMember = "Name"
AddHandler ListBoxControl1.SelectedIndexChanged, AddressOf ListBoxControl1_SelectedIndexChanged
End Sub
Private Sub ListBoxControl1_SelectedIndexChanged(sender As Object, e As EventArgs)
If ListBoxControl1.SelectedValue IsNot Nothing Then
Me.BackColor = CType(ListBoxControl1.SelectedValue, Color)
Else
Me.BackColor = Color.Black
End If
End Sub
You can allow users to filter items in a ListBoxControl. For this purpose, use the SearchControl.Client property to attach the ListBoxControl to a SearchControl.
searchControl1.Client = listBoxControl1;
searchControl1.Client = listBoxControl1
When a user types a search request into the SearchControl, the ListBoxControl automatically filters its items, and highlights the requested string in the filtered items.
Note
If items are formatted using the HTML tags (see BaseListBoxControl.AllowHtmlDraw), the items are filtered, but not highlighted.
You can use the SearchControl‘s FilterCondition property to specify the comparison operator (Equals, Starts With, and so forth) used to compare the attached ListBoxControl ‘s items with the query in the search box.
Use the ContextButtons collection to specify context buttons displayed in each item. See the following topic for more information: Context Buttons.
DevExpress controls support regular and super tooltips. Enable the ShowToolTips option to display tooltips when the mouse pointer hovers over the control.
Customize Regular Tooltip Text
Use the following properties of the target control to specify regular tooltip text and title:
|
API
|
Description
| | --- | --- | |
|
Specifies tooltip text. You can use line breaks in regular tooltips.
| |
|
Specifies whether to parse HTML tags in text.
| |
|
Specifies the tooltip title. If you do not specify tooltip text, the tooltip is not displayed even if you specify the title.
|
The following code snippet specifies tooltip text and title for a TextEdit editor:
public Form1() {
InitializeComponent();
textEdit1.ShowToolTips = true;
textEdit1.ToolTipTitle = "Name";
textEdit1.ToolTip = "Please enter your name";
}
Public Sub New()
InitializeComponent()
textEdit1.ShowToolTips = True
textEdit1.ToolTipTitle = "Name"
textEdit1.ToolTip = "Please enter your name"
End Sub
Private Sub ToolTipController1_BeforeShow(ByVal sender As Object, ByVal e As ToolTipControllerShowEventArgs)
Dim controller As ToolTipController = TryCast(sender, ToolTipController)
If e.ToolTip = textEdit1.ToolTip Then
e.ImageOptions.SvgImage = (TryCast(controller.ImageList, SvgImageCollection))("personalCard")
End If
End Sub
Assign an Image to Regular Tooltips
Use the control’s ToolTipIconType property to assign a predefined icon. The ToolTipController.IconSize property specifies icon size.
Assign a custom image as follows:
Note
The ToolTipIconType property has priority over e.ImageOptions. If you assign a custom image, set ToolTipIconType to None.
The following code snippet assigns a custom image to the TextEdit tooltip:
Note
textEdit1, toolTipController1, and svgImageCollection1 were created at runtime.
public Form1() {
InitializeComponent();
textEdit1.ShowToolTips = true;
textEdit1.ToolTipTitle = "Name";
textEdit1.ToolTip = "Please enter your name";
textEdit1.ToolTipController = toolTipController1;
toolTipController1.ImageList = svgImageCollection1;
toolTipController1.BeforeShow += ToolTipController1_BeforeShow;
}
private void ToolTipController1_BeforeShow(object sender, ToolTipControllerShowEventArgs e) {
ToolTipController controller = sender as ToolTipController;
if (e.ToolTip == textEdit1.ToolTip)
e.ImageOptions.SvgImage = (controller.ImageList as SvgImageCollection)["personalCard"];
}
Public Sub New()
InitializeComponent()
textEdit1.ShowToolTips = True
textEdit1.ToolTipTitle = "Name"
textEdit1.ToolTip = "Please enter your name"
textEdit1.ToolTipController = toolTipController1
toolTipController1.ImageList = svgImageCollection1
AddHandler toolTipController1.BeforeShow, AddressOf ToolTipController1_BeforeShow
End Sub
Private Sub ToolTipController1_BeforeShow(ByVal sender As Object, ByVal e As ToolTipControllerShowEventArgs)
Dim controller As ToolTipController = TryCast(sender, ToolTipController)
If e.ToolTip = textEdit1.ToolTip Then
e.ImageOptions.SvgImage = (TryCast(controller.ImageList, SvgImageCollection))("personalCard")
End If
End Sub
Display a Super Tooltip
Use the control’s SuperTip property to assign a super tooltip. If you wish to use HTML tags in a super tooltip, enable the SuperToolTip.AllowHtmlText property.
Setting the ToolTipController.ToolTipType property to SuperTip converts existing regular tooltips to super tooltips.
Tip
Read the following help topic for information on how to customize super tooltips: Hints and Tooltips.
The following sample code demonstrates how to initialize and create a new instance of the ListBoxControl class at runtime.
using DevExpress.XtraEditors;
// ...
// Initialize an array of strings
string[] States = {
"Alabama",
"Alaska",
"Arizona",
"California",
"Colorado",
"Florida",
"Idaho",
"Kansas",
"Michigan",
"Nevada",
"Texas",
"Utah"
};
// Initialize and create an instance of the ListBoxControl class
ListBoxControl listBox = new ListBoxControl();
// Define the parent control
listBox.Parent = this;
// Set the listBox's background color
listBox.BackColor = Color.FromArgb(254, 246, 212);
// Dock to all edges and fill the parent container
listBox.Dock = DockStyle.Fill;
// Add items
listBox.Items.AddRange(States);
Imports DevExpress.XtraEditors
' ...
' Initialize an array of strings
Dim States() As String = New String() {"Alabama", "Alaska", "Arizona", "California", _
"Colorado", "Florida", "Idaho", "Kansas", "Michigan", "Nevada", "Texas", "Utah"}
' Initialize and create an instance of the ListBoxControl class
Dim listBox As New ListBoxControl()
' Define the parent control
listBox.Parent = Me
' Set the listBox's background color
listBox.BackColor = Color.FromArgb(254, 246, 212)
' Dock to all edges and fill the parent container
listBox.Dock = DockStyle.Fill
' Add items
listBox.Items.AddRange(States)
Object MarshalByRefObject Component Control DevExpress.XtraEditors.XtraControl ControlBase BaseControl BaseStyleControl BaseListBoxControl ListBoxControl
See Also