# ScrollListBox Control
The **ScrollListBox** control is used for displaying a scrollable list of items. You can define the position, size, and
appearance of the list box, and it updates automatically as the user scrolls.
## Available Tags
In addition to the [default control tags](/user.md), the ScrollListBox control has the following unique tags:
| Tag | Description |
|-------------------------------------|-------------------------------------------------------------------------------------|
| `LISTBOXDATA` | Defines specific properties of the list box, such as length, and selection options. |
| `LISTBOXENABLEDDOWNBUTTONDRAWDATA` | Visual texture for the down button of the list box when enabled. |
| `LISTBOXDISABLEDDOWNBUTTONDRAWDATA` | Visual texture for the down button of the list box when disabled. |
| `LISTBOXHILITEDOWNBUTTONDRAWDATA` | Visual texture for the down button of the list box when highlighted. |
| `LISTBOXENABLEDUPBUTTONDRAWDATA` | Visual texture for the up button of the list box when enabled. |
| `LISTBOXDISABLEDUPBUTTONDRAWDATA` | Visual texture for the up button of the list box when disabled. |
| `LISTBOXHILITEUPBUTTONDRAWDATA` | Visual texture for the up button of the list box when highlighted. |
| `LISTBOXENABLEDSLIDERDRAWDATA` | Visual texture for the slider (scroll bar) in the list box when enabled. |
| `LISTBOXDISABLEDSLIDERDRAWDATA` | Visual texture for the slider (scroll bar) in the list box when disabled. |
| `LISTBOXHILITESLIDERDRAWDATA` | Visual texture for the slider (scroll bar) in the list box when highlighted. |
| `SLIDERTHUMBENABLEDDRAWDATA` | Visual texture for the slider thumb (handle) when enabled. |
| `SLIDERTHUMBDISABLEDDRAWDATA` | Visual texture for the slider thumb (handle) when disabled. |
| `SLIDERTHUMBHILITEDRAWDATA` | Visual texture for the slider thumb (handle) when highlighted. |
## Default Values and Usage
The following section list the default values and available textures for each tag
Click to expand
### LISTBOXDATA
- `LENGTH`: The maximum number of items that can be displayed on the listbox (e.g., 100).
- `AUTOSCROLL`: Defines if the listbox should scroll automatically to the selected item `0` = disabled, `1` = enabled.
- `AUTOPURGE`: Defines if the listbox should remove items that are not visible `0` = disabled, `1` = enabled.
- `SCROLLBAR`: Defines if the scrollbar should be visible `0` = disabled, `1` = enabled.
- `MULTISELECT`: Defines if the listbox should allow multiple items to be selected `0` = disabled, `1` = enabled.
- `COLUMNS`: The number of columns in the listbox. (e.g. 4).
- `COLUMNSWIDTH`: The width of each column in pixels. (e.g. `COLUMNSWIDTH: 30, COLUMNSWIDTH: 20, COLUMNSWIDTH: 25,
COLUMNSWIDTH: 25` for a four columns listbox)
- `FORCESELECT`: If you set it to 1, the first item will always be selected.
### ENABLEDDRAWDATA, DISABLEDDRAWDATA, HILITEDRAWDATA
- BlackSquare / NoImage / BlackSquare
- ListBoxHiliteItemLeftEnd / NoImage / ListBoxHiliteSelectedItemLeftEnd
- ListBoxHiliteItemRightEnd / NoImage / ListBoxHiliteSelectedItemRightEnd
- ListBoxHiliteItemRepeatingCenter / NoImage / ListBoxHiliteSelectedItemRepeatingCenter
- ListBoxHiliteItemSmallRepeatingCenter / NoImage / ListBoxHiliteSelectedItemSmallRepeatingCenter
- `NoImage`
### LISTBOXENABLEDUPBUTTONDRAWDATA, LISTBOXDISABLEDUPBUTTONDRAWDATA, LISTBOXHILITEUPBUTTONDRAWDATA
- VSliderUpButtonEnabled / VSliderUpButtonDisabled / VSliderUpButtonHilite
- VSliderUpButtonHiliteSelected / NoImage / VSliderUpButtonHiliteSelected
### LISTBOXENABLEDDOWNBUTTONDRAWDATA, LISTBOXDISABLEDDOWNBUTTONDRAWDATA, LISTBOXHILITEDOWNBUTTONDRAWDATA
- VSliderDownButtonEnabled / VSliderDownButtonDisabled / VSliderDownButtonHilite
- VSliderDownButtonHiliteSelected / NoImage / VSliderDownButtonHiliteSelected
### LISTBOXENABLEDSLIDERDRAWDATA, LISTBOXDISABLEDSLIDERDRAWDATA, LISTBOXHILITESLIDERDRAWDATA
- VSliderEnabledTopEnd / VSliderDisabledTopEnd / VSliderHiliteTopEnd
- VSliderEnabledBottomEnd / VSliderDisabledBottomEnd / VSliderHiliteBottomEnd
- VSliderEnabledRepeatingCenter / VSliderDisabledRepeatingCenter / VSliderHiliteRepeatingCenter
- VSliderEnabledSmallRepeatingCenter / VSliderDisabledSmallRepeatingCenter / VSliderHiliteSmallRepeatingCenter
- NoImage
### SLIDERTHUMBENABLEDDRAWDATA, SLIDERTHUMBDISABLEDDRAWDATA, SLIDERTHUMBHILITEDRAWDATA
- ScrollBarThumbEnabled / ScrollBarThumbDisabled / ScrollBarThumbHilite
- ScrollBarThumbHiliteSelected / NoImage / ScrollBarThumbHiliteSelected
- NoImage
## How it Works
The ScrollListBox control uses multiple textures to create the visual effect of a scrollable list.
## Important Notes
- **Column Widths:** When using multiple columns, the sum of the `COLUMNSWIDTH` values must not exceed the width of the
`SCREENRECT`.
- **`DRAWDATA`**: Each `DRAWDATA` tag consists of a sequence of **exactly 9 entries**, each defining how a specific part
of the control's texture should be rendered. The order and position of the textures within `DRAWDATA` is critical and
must be defined correctly according to each state of the listbox.
## Example
Here's an example from the `ReplayMenu.wnd` file:
Click to expand
```nasm
WINDOW
WINDOWTYPE = SCROLLLISTBOX;
SCREENRECT = UPPERLEFT: 68 152,
BOTTOMRIGHT: 552 428,
CREATIONRESOLUTION: 800 600;
NAME = "ReplayMenu.wnd:ListboxReplayFiles";
STATUS = ENABLED;
STYLE = SCROLLLISTBOX+MOUSETRACK;
SYSTEMCALLBACK = "[None]";
INPUTCALLBACK = "[None]";
TOOLTIPCALLBACK = "[None]";
DRAWCALLBACK = "[None]";
FONT = NAME: "Arial", SIZE: 10, BOLD: 0;
HEADERTEMPLATE = "LabelRegular";
TOOLTIPDELAY = -1;
TEXTCOLOR = ENABLED: 254 254 254 255, ENABLEDBORDER: 0 0 0 255,
DISABLED: 192 192 192 255, DISABLEDBORDER: 64 64 64 255,
HILITE: 128 128 255 255, HILITEBORDER: 0 0 128 255;
ENABLEDDRAWDATA = IMAGE: BlackSquare, COLOR: 0 0 0 126, BORDERCOLOR: 49 55 168 255,
IMAGE: ListBoxHiliteItemLeftEnd, COLOR: 255 255 0 255, BORDERCOLOR: 254 254 254 255,
IMAGE: ListBoxHiliteItemRightEnd, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: ListBoxHiliteItemRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: ListBoxHiliteItemSmallRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
DISABLEDDRAWDATA = IMAGE: NoImage, COLOR: 255 4 0 0, BORDERCOLOR: 49 55 168 255,
IMAGE: NoImage, COLOR: 192 192 192 255, BORDERCOLOR: 254 254 254 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
HILITEDRAWDATA = IMAGE: BlackSquare, COLOR: 0 0 0 126, BORDERCOLOR: 49 55 168 255,
IMAGE: ListBoxHiliteSelectedItemLeftEnd, COLOR: 254 254 254 255, BORDERCOLOR: 0 128 0 255,
IMAGE: ListBoxHiliteSelectedItemRightEnd, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: ListBoxHiliteSelectedItemRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: ListBoxHiliteSelectedItemSmallRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
LISTBOXDATA = LENGTH: 100,
AUTOSCROLL: 0,
AUTOPURGE: 0,
SCROLLBAR: 1,
MULTISELECT: 0,
COLUMNS: 4,
COLUMNSWIDTH: 30,
COLUMNSWIDTH: 20,
COLUMNSWIDTH: 25,
COLUMNSWIDTH: 25,
FORCESELECT: 1;
LISTBOXENABLEDUPBUTTONDRAWDATA = IMAGE: VSliderUpButtonEnabled, COLOR: 255 0 0 255, BORDERCOLOR: 255 128 128 255,
IMAGE: VSliderUpButtonHiliteSelected, COLOR: 255 255 0 255, BORDERCOLOR: 254 254 254 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
LISTBOXDISABLEDUPBUTTONDRAWDATA = IMAGE: VSliderUpButtonDisabled, COLOR: 128 128 128 255, BORDERCOLOR: 192 192 192 255,
IMAGE: NoImage, COLOR: 192 192 192 255, BORDERCOLOR: 254 254 254 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
LISTBOXHILITEUPBUTTONDRAWDATA = IMAGE: VSliderUpButtonHilite, COLOR: 0 255 0 255, BORDERCOLOR: 0 128 0 255,
IMAGE: VSliderUpButtonHiliteSelected, COLOR: 254 254 254 255, BORDERCOLOR: 0 128 0 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
LISTBOXENABLEDDOWNBUTTONDRAWDATA = IMAGE: VSliderDownButtonEnabled, COLOR: 255 0 0 255, BORDERCOLOR: 255 128 128 255,
IMAGE: VSliderDownButtonHiliteSelected, COLOR: 255 255 0 255, BORDERCOLOR: 254 254 254 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
LISTBOXDISABLEDDOWNBUTTONDRAWDATA = IMAGE: VSliderDownButtonDisabled, COLOR: 128 128 128 255, BORDERCOLOR: 192 192 192 255,
IMAGE: NoImage, COLOR: 192 192 192 255, BORDERCOLOR: 254 254 254 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
LISTBOXHILITEDOWNBUTTONDRAWDATA = IMAGE: VSliderDownButtonHilite, COLOR: 0 255 0 255, BORDERCOLOR: 0 128 0 255,
IMAGE: VSliderDownButtonHiliteSelected, COLOR: 254 254 254 255, BORDERCOLOR: 0 128 0 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
LISTBOXENABLEDSLIDERDRAWDATA = IMAGE: VSliderEnabledTopEnd, COLOR: 255 190 0 0, BORDERCOLOR: 47 55 168 255,
IMAGE: VSliderEnabledBottomEnd, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: VSliderEnabledRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: VSliderEnabledSmallRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
LISTBOXDISABLEDSLIDERDRAWDATA = IMAGE: VSliderDisabledTopEnd, COLOR: 128 128 128 0, BORDERCOLOR: 148 112 0 255,
IMAGE: VSliderDisabledBottomEnd, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: VSliderDisabledRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: VSliderDisabledSmallRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
LISTBOXHILITESLIDERDRAWDATA = IMAGE: VSliderHiliteTopEnd, COLOR: 0 255 0 0, BORDERCOLOR: 49 55 168 255,
IMAGE: VSliderHiliteBottomEnd, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: VSliderHiliteRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: VSliderHiliteSmallRepeatingCenter, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
SLIDERTHUMBENABLEDDRAWDATA = IMAGE: ScrollBarThumbEnabled, COLOR: 255 4 0 0, BORDERCOLOR: 255 243 28 255,
IMAGE: ScrollBarThumbHiliteSelected, COLOR: 255 255 0 255, BORDERCOLOR: 254 254 254 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
SLIDERTHUMBDISABLEDDRAWDATA = IMAGE: ScrollBarThumbDisabled, COLOR: 128 128 128 255, BORDERCOLOR: 192 192 192 255,
IMAGE: NoImage, COLOR: 192 192 192 255, BORDERCOLOR: 254 254 254 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
SLIDERTHUMBHILITEDRAWDATA = IMAGE: ScrollBarThumbHilite, COLOR: 0 255 0 255, BORDERCOLOR: 0 128 0 255,
IMAGE: ScrollBarThumbHiliteSelected, COLOR: 254 254 254 255, BORDERCOLOR: 0 128 0 255,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0,
IMAGE: NoImage, COLOR: 255 255 255 0, BORDERCOLOR: 255 255 255 0;
END
```
## See also