listbox is a control that provides a list of items to the user for selection of an item. a user can select one or more items from a predefined list of items at a time. in a listbox, multiple options are always visible to the user without any user interaction.
a listbox presents a scrollable list of items. if a user selects an item, the selected item changes appearance to indicate selection. it supports a more extensive form of content model and button. a major difference between a button and a list box is that a button contains a single piece of content whereas a listbox allows every single item in the list.
the hierarchical inheritance of listbox class is as follows −
given below are the commonly used properties of listbox class.
| sr. no. | property & description |
|---|---|
| 1 |
background gets or sets a brush that provides the background of the control. (inherited from control) |
| 2 |
borderthickness gets or sets the border thickness of a control. (inherited from control) |
| 3 |
fontfamily gets or sets the font used to display text in the control. (inherited from control) |
| 4 |
fontsize gets or sets the size of the text in this control. (inherited from control) |
| 5 |
fontstyle gets or sets the style in which the text is rendered. (inherited from control) |
| 6 |
fontweight gets or sets the thickness of the specified font. (inherited from control) |
| 7 |
foreground gets or sets a brush that describes the foreground color. (inherited from control) |
| 8 |
groupstyle gets a collection of groupstyle objects that define the appearance of each level of groups. (inherited from itemscontrol) |
| 9 |
height gets or sets the suggested height of a frameworkelement. (inherited from frameworkelement) |
| 10 |
horizontalalignment gets or sets the horizontal alignment characteristics that are applied to a frameworkelement when it is composed in a layout parent, such as a panel or items control. (inherited from frameworkelement) |
| 11 |
isenabled gets or sets a value indicating whether the user can interact with the control. (inherited from control) |
| 12 |
item gets the collection used to generate the content of the control. (inherited from itemscontrol) |
| 13 |
itemssource gets or sets an object source used to generate the content of the itemscontrol. (inherited from itemscontrol) |
| 14 |
margin gets or sets the outer margin of a frameworkelement. (inherited from frameworkelement) |
| 15 |
name gets or sets the identifying name of the object. when a xaml processor creates the object tree from xaml markup, run-time code can refer to the xaml-declared object by this name. (inherited from frameworkelement) |
| 16 |
opacity gets or sets the degree of the object's opacity. (inherited from uielement) |
| 17 |
selectedindex gets or sets the index of the selected item. (inherited from selector) |
| 18 |
selecteditem gets or sets the selected item. (inherited from selector) |
| 19 |
selectedvalue gets or sets the value of the selected item, obtained by using the selectedvaluepath. (inherited from selector) |
| 20 |
style gets or sets an instance style that is applied for this object during layout and rendering. (inherited from frameworkelement) |
| 21 |
verticalalignment gets or sets the vertical alignment characteristics that are applied to a frameworkelement when it is composed in a parent object such as a panel or items control. (inherited from frameworkelement) |
| 22 |
width gets or sets the width of a frameworkelement. (inherited from frameworkelement) |
given below are the most commonly used events of listbox.
| sr. no. | event & description |
|---|---|
| 1 |
dragenter occurs when the input system reports an underlying drag event with this element as the target. (inherited from uielement) |
| 2 |
dragleave occurs when the input system reports an underlying drag event with this element as the origin. (inherited from uielement) |
| 3 |
dragover occurs when the input system reports an underlying drag event with this element as the potential drop target. (inherited from uielement) |
| 4 |
dragstarting occurs when a drag operation is initiated. (inherited from uielement) |
| 5 |
drop occurs when the input system reports an underlying drop event with this element as the drop target. (inherited from uielement) |
| 6 |
dropcompleted occurs when a drag-and-drop operation is ended. (inherited from uielement) |
| 7 |
gotfocus occurs when a uielement receives focus. (inherited from uielement) |
| 8 |
isenabledchanged occurs when the isenabled property changes. (inherited from control) |
| 9 |
keydown occurs when a keyboard key is pressed while the uielement has focus. (inherited from uielement) |
| 10 |
keyup occurs when a keyboard key is released while the uielement has focus. (inherited from uielement) |
| 11 |
lostfocus occurs when a uielement loses focus. (inherited from uielement) |
| 12 |
selectionchanged occurs when the currently selected item changes. (inherited from selector) |
| 13 |
sizechanged occurs when either the actualheight or the actualwidth property changes value on a frameworkelement. (inherited from frameworkelement) |
given below are the most commonly used methods of listbox.
| sr. no. | method & description |
|---|---|
| 1 |
arrange positions child objects and determines a size for a uielement. parent objects that implement custom layout for their child elements should call this method from their layout override implementations to form a recursive layout update. (inherited from uielement) |
| 2 |
findname retrieves an object that has the specified identifier name. (inherited from frameworkelement) |
| 3 |
focus attempts to set the focus on the control. (inherited from control) |
| 4 |
getvalue returns the current effective value of a dependency property from a dependencyobject. (inherited from dependencyobject) |
| 5 |
indexfromcontainer returns the index to the item that has the specified, generated container. (inherited from itemscontrol) |
| 6 |
ondragenter called before the dragenter event occurs. (inherited from control) |
| 7 |
ondragleave called before the dragleave event occurs. (inherited from control) |
| 8 |
ondragover called before the dragover event occurs. (inherited from control) |
| 9 |
ondrop called before the drop event occurs. (inherited from control) |
| 10 |
onkeydown called before the keydown event occurs. (inherited from control) |
| 11 |
onkeyup called before the keyup event occurs. (inherited from control) |
| 12 |
onlostfocus called before the lostfocus event occurs. (inherited from control) |
| 13 |
readlocalvalue returns the local value of a dependency property, if a local value is set. (inherited from dependencyobject) |
| 14 |
setbinding attaches a binding to a frameworkelement, using the provided binding object. (inherited from frameworkelement) |
| 15 |
setvalue sets the local value of a dependency property on a dependencyobject. (inherited from dependencyobject) |
let us look at a simple example in which different ui elements are added in a listbox.
<usercontrol x:class = "listboxexample.mainpage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:ignorable = "d" d:designwidth = "640" d:designheight = "480">
<grid x:name = "layoutroot">
<listbox x:name = "mylist">
<textblock text = "first item" />
<button content = "second item" />
<path fill = "blue" data = "m4,0 l-4,10 8,0z m15,0 l-4,10 8,0z m26,0 l4,10 8,0z"
margin = "10" />
<stackpanel orientation = "horizontal">
<ellipse fill = "red" height = "30" width = "100" />
<textblock text = "name: " />
<textbox width = "200" />
</stackpanel>
<textblock text = "more..." />
</listbox>
</grid>
</usercontrol>
given below is the c# implementation.
using system.windows.controls;
namespace listboxexample {
public partial class mainpage : usercontrol {
public mainpage() {
initializecomponent();
mylist.items.add("string entry");
mylist.items.add(new button { content = "content entry" });
}
}
}
when the above code is compiled and executed, you will see a list box which contains mixture of graphics text and also an editable field where you can type the text.
| sr. no. | controls & description |
|---|---|
| 1 |
calendar & datepicker
calendar & datepicker represents a control that enables a user to select a date by using a visual calendar display. it provides some basic navigation using either the mouse or the keyboard. |
| 2 |
tabcontrol
a container that places items into separate tabs and allows the user to view just one tab at a time. it allows the user to select from a number of different views by clicking on the tab headers. |
| 3 |
popup
this class displays the content on top of the existing content, within the bounds of the application window. it is a temporarily display on the other content. |
| 4 |
tooltip
tooltip represents a control that creates a pop-up window that displays information for an element in the gui. silverlight lets you attach a tooltip to any control. |