Toolbox Dropdown list

Dropdown lists in an InForm application present the user with selectable items. They typically display only the selected item, requiring the user to click the down arrow button to view the rest of the list. This page provides detailed information about list boxes.

Dropdown list control
Dropdown list example
Form file DropdownListExample.frm
Basic file DropdownListExample.bas
Events
Methods
Properties editable at runtime

Dropdown list control

Create a new Dropdown list control by clicking the Dropdown list icon ToolBox dropdown list box in the Toolbox. The newly created control will be displayed in the preview window; allowing you to move it around to meet your design requirements. Edit the Dropdown list properties as necessary.

8) Dropdown list Properties:

Dropdown list example: Preview window.

Note: Dropdown list properties will reflect the highlighted control selected in the preview window, enabling you to customize it as needed.

Dropdown lists present the user with selectable items. They typically display only the selected item, requiring the user to click the down arrow button to view the rest of the list.

Design time:
At design time, you can add items to the ListBox by modifying the List Items property. To add multiple items, separate them using a new line escape sequence (\n).
Alternatively, you can copy a list from an existing file and paste it into the list items box. Click into the list items box, then click the sandwich button (the button with three lines) and press enter.

To pre-select an item, set the "Selected item" Value property to the index of the desired item.

Runtime:
At runtime, you add new items to the end of the list using the subroutine AddItem.
Scroll bars are automatically added (if the auto-scroll property is enabled) when the number of items exceeds the display area.

AddItem ControlID, "Item"

At runtime, you delete an item using RemoveItem.

RemoveItem ControlID, ItemIndexToRemove%

At runtime, you can determine which item is currently selected by reading the Value property.

theItem% = Control(ControlID).Value

To retrieve the text of the selected item, use the GetItem method.

DesiredItem$ = GetItem$(ControlID, ItemIndexToRead%)

Here's a concise summary of the code snippet for obtaining both the index and value of the selected item from a ListBox:

If you want to know which item index was selected by the user:
    theItem% = Control(DropdownList1).Value

It you want to know the contents/text of the item selected:
    theItem$ = GetItem(DropdownList1, thisItem%)

Also, the best place for that would be the ValueChanged event instead of the Click event.

Dropdown list example - refer to the above image.

Specification: Let the Dropdown list box example have the following design specification:

Planets Group: Add the following planets to the ListBox: Mercury, Venus, Earth, Mars, and Jupiter.
Add Planet X Button: When clicked, this button adds a new planet (Planet X) to the Dropdown list.
Delete Selected Button: When clicked, this button removes the currently selected item from the Dropdown list.

Implimenation: The following provide solutions for the above:

At design time: Add the items (Mercury, Venus, Earth, Mars, Jupiter) to the ListBox using the control properties list items.
Add Planet X Button: Uses the subroutine AddItem to add a new item (Planet X) to the Dropdown list.
Button "Delete Selected" uses subroutinf RemoveItem.
For further information, refer to the file DropdownListExample.bas.
At the layout stage, save the project using file -> Save project as and enter the name ListBoxExample.

Form file DropdownListExample


': This program uses
': InForm - GUI library for QB64 - v1.5
': Fellippe Heitor, 2016-2024 - fellippe@qb64.org - @fellippeheitor
': https://github.com/FellippeHeitor/InForm
'-----------------------------------------------------------

Option _Explicit '              &lt;--- dropdown listbox example
Dim Shared count As Integer '   &lt;--- dropdown listbox example


': Controls' IDs: ------------------------------------------------------------------
Dim Shared DropdownListBoxTest1 As Long
Dim Shared DropdownListBox1 As Long
Dim Shared PlanetsLB As Long
Dim Shared AddPlanetXBT As Long
Dim Shared delBT As Long

': External modules: ---------------------------------------------------------------
'$INCLUDE:'InForm\InForm.bi'
'$INCLUDE:'InForm\xp.uitheme'
'$INCLUDE:'DropdownListExample.frm'

': Event procedures: ---------------------------------------------------------------
Sub __UI_BeforeInit

End Sub

Sub __UI_OnLoad

End Sub

Sub __UI_BeforeUpdateDisplay
    'This event occurs at approximately 60 frames per second.
    'You can change the update frequency by calling SetFrameRate DesiredRate%

End Sub

Sub __UI_BeforeUnload
    'If you set __UI_UnloadSignal = False here you can
    'cancel the user's request to close.

End Sub

Sub __UI_Click (id As Long)
    Select Case id
        Case DropdownListBoxTest1

        Case DropdownListBox1

        Case PlanetsLB

        Case AddPlanetXBT
            count = count + 1 '                            &lt;--- dropdown listbox example
            AddItem DropdownListBox1, "Planet X" + Str$(count) '   &lt;--- dropdown listbox example

        Case delBT
            RemoveItem DropdownListBox1, Control(DropdownListBox1).Value '  &lt;--- dropdown listbox example
    End Select
End Sub

Sub __UI_MouseEnter (id As Long)
    Select Case id
        Case DropdownListBoxTest1

        Case DropdownListBox1

        Case PlanetsLB

        Case AddPlanetXBT

        Case delBT

    End Select
End Sub

Sub __UI_MouseLeave (id As Long)
    Select Case id
        Case DropdownListBoxTest1

        Case DropdownListBox1

        Case PlanetsLB

        Case AddPlanetXBT

        Case delBT

    End Select
End Sub

Sub __UI_FocusIn (id As Long)
    Select Case id
        Case DropdownListBox1

        Case AddPlanetXBT

        Case delBT

    End Select
End Sub

Sub __UI_FocusOut (id As Long)
    'This event occurs right before a control loses focus.
    'To prevent a control from losing focus, set __UI_KeepFocus = True below.
    Select Case id
        Case DropdownListBox1

        Case AddPlanetXBT

        Case delBT

    End Select
End Sub

Sub __UI_MouseDown (id As Long)
    Select Case id
        Case DropdownListBoxTest1

        Case DropdownListBox1

        Case PlanetsLB

        Case AddPlanetXBT

        Case delBT

    End Select
End Sub

Sub __UI_MouseUp (id As Long)
    Select Case id
        Case DropdownListBoxTest1

        Case DropdownListBox1

        Case PlanetsLB

        Case AddPlanetXBT

        Case delBT

    End Select
End Sub

Sub __UI_KeyPress (id As Long)
    'When this event is fired, __UI_KeyHit will contain the code of the key hit.
    'You can change it and even cancel it by making it = 0
    Select Case id
        Case DropdownListBox1

        Case AddPlanetXBT

        Case delBT

    End Select
End Sub

Sub __UI_TextChanged (id As Long)
    Select Case id
    End Select
End Sub

Sub __UI_ValueChanged (id As Long)
    Select Case id
        Case DropdownListBox1

    End Select
End Sub

Sub __UI_FormResized

End Sub

'$INCLUDE:'InForm/InForm.ui'

Form file DropdownListExample.frm


': This form was generated by
': InForm - GUI library for QB64 - v1.5
': Fellippe Heitor, 2016-2024 - fellippe@qb64.org - @fellippeheitor
': https://github.com/FellippeHeitor/InForm
'-----------------------------------------------------------
SUB __UI_LoadForm

    DIM __UI_NewID AS LONG, __UI_RegisterResult AS LONG

    __UI_NewID = __UI_NewControl(__UI_Type_Form, "DropdownListBoxTest1", 300, 300, 0, 0, 0)
    __UI_RegisterResult = 0
    SetCaption __UI_NewID, "Dropdown ListBox test"
    Control(__UI_NewID).Font = SetFont("segoeui.ttf", 12)
    Control(__UI_NewID).HasBorder = False

    __UI_NewID = __UI_NewControl(__UI_Type_DropdownList, "DropdownListBox1", 200, 23, 50, 50, 0)
    __UI_RegisterResult = 0
    AddItem __UI_NewID, "Mercury"
    AddItem __UI_NewID, "Venus"
    AddItem __UI_NewID, "Earth"
    AddItem __UI_NewID, "Mars"
    AddItem __UI_NewID, "Jupiter"
    Control(__UI_NewID).HasBorder = True
    Control(__UI_NewID).Value = 3
    Control(__UI_NewID).CanHaveFocus = True
    Control(__UI_NewID).BorderSize = 1

    __UI_NewID = __UI_NewControl(__UI_Type_Label, "PlanetsLB", 150, 23, 50, 22, 0)
    __UI_RegisterResult = 0
    SetCaption __UI_NewID, "Planets"
    Control(__UI_NewID).HasBorder = False
    Control(__UI_NewID).VAlign = __UI_Middle

    __UI_NewID = __UI_NewControl(__UI_Type_Button, "AddPlanetXBT", 92, 23, 50, 212, 0)
    __UI_RegisterResult = 0
    SetCaption __UI_NewID, "Add Planet X"
    Control(__UI_NewID).HasBorder = False
    Control(__UI_NewID).CanHaveFocus = True

    __UI_NewID = __UI_NewControl(__UI_Type_Button, "delBT", 97, 23, 160, 212, 0)
    __UI_RegisterResult = 0
    SetCaption __UI_NewID, "Delete Slected"
    Control(__UI_NewID).HasBorder = False
    Control(__UI_NewID).CanHaveFocus = True

END SUB

SUB __UI_AssignIDs
    DropdownListBoxTest1 = __UI_GetID("DropdownListBoxTest1")
    DropdownListBox1 = __UI_GetID("DropdownListBox1")
    PlanetsLB = __UI_GetID("PlanetsLB")
    AddPlanetXBT = __UI_GetID("AddPlanetXBT")
    delBT = __UI_GetID("delBT")
END SUB

Events

Methods

List and Dropdown list controls' items are stored in the control's Text property, but they should be manipulated using the following methods. These methods update important internal variables used to display the control: