Creating scrollable Listbox within a grid using Tkinter

A Listbox widget displays a list of items such as numbers, employee names, or any collection of data. When dealing with long lists, we need scrollbars to navigate through all items effectively. By attaching a Scrollbar to a Listbox and configuring them properly, we can create a scrollable interface within a grid layout.

Basic Scrollable Listbox

Let's start with a simple scrollable Listbox containing numbers from 1 to 100 −

# Import the required libraries
from tkinter import *
from tkinter import ttk

# Create an instance of Tkinter Frame
win = Tk()
win.title("Scrollable Listbox Example")
win.geometry("400x300")

# Create a vertical scrollbar
scrollbar = ttk.Scrollbar(win, orient='vertical')
scrollbar.pack(side=RIGHT, fill=Y)

# Create a Listbox widget
listbox = Listbox(win, font=('Arial', 12), yscrollcommand=scrollbar.set)
listbox.pack(side=LEFT, fill=BOTH, expand=True)

# Add values to the Listbox
for value in range(1, 101):
    listbox.insert(END, f"Item {value}")

# Configure the scrollbar to work with listbox
scrollbar.config(command=listbox.yview)

win.mainloop()

Scrollable Listbox Using Grid Layout

For better control over widget positioning, we can use the grid() geometry manager instead of pack() −

from tkinter import *
from tkinter import ttk

# Create main window
root = Tk()
root.title("Grid-based Scrollable Listbox")
root.geometry("500x400")

# Configure grid weights for responsive design
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)

# Create a frame to contain listbox and scrollbar
frame = Frame(root)
frame.grid(row=0, column=0, sticky="nsew", padx=10, pady=10)
frame.grid_rowconfigure(0, weight=1)
frame.grid_columnconfigure(0, weight=1)

# Create Listbox
listbox = Listbox(frame, font=('Arial', 11))
listbox.grid(row=0, column=0, sticky="nsew")

# Create vertical scrollbar
v_scrollbar = ttk.Scrollbar(frame, orient="vertical", command=listbox.yview)
v_scrollbar.grid(row=0, column=1, sticky="ns")

# Configure listbox to use scrollbar
listbox.configure(yscrollcommand=v_scrollbar.set)

# Add sample data
fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape", 
          "Honeydew", "Indian Fig", "Jackfruit", "Kiwi", "Lemon", "Mango",
          "Nectarine", "Orange", "Papaya", "Quince", "Raspberry", "Strawberry",
          "Tangerine", "Ugli Fruit", "Vanilla Bean", "Watermelon", "Ximenia",
          "Yellow Passion Fruit", "Zucchini"]

for fruit in fruits:
    listbox.insert(END, fruit)

root.mainloop()

Advanced Grid Layout with Multiple Widgets

Here's a more complex example showing how to integrate a scrollable Listbox with other widgets in a grid layout −

from tkinter import *
from tkinter import ttk

def add_item():
    item = entry.get()
    if item:
        listbox.insert(END, item)
        entry.delete(0, END)

def remove_item():
    selection = listbox.curselection()
    if selection:
        listbox.delete(selection)

# Create main window
root = Tk()
root.title("Advanced Scrollable Listbox with Grid")
root.geometry("600x450")

# Configure main grid
root.grid_rowconfigure(1, weight=1)
root.grid_columnconfigure(0, weight=1)

# Title label
title_label = Label(root, text="Dynamic Item Manager", font=('Arial', 16, 'bold'))
title_label.grid(row=0, column=0, pady=10)

# Main content frame
main_frame = Frame(root)
main_frame.grid(row=1, column=0, sticky="nsew", padx=20, pady=(0, 10))
main_frame.grid_rowconfigure(0, weight=1)
main_frame.grid_columnconfigure(0, weight=1)
main_frame.grid_columnconfigure(1, weight=0)

# Create Listbox with scrollbar
listbox = Listbox(main_frame, font=('Arial', 10))
listbox.grid(row=0, column=0, sticky="nsew")

# Vertical scrollbar
scrollbar = ttk.Scrollbar(main_frame, orient="vertical", command=listbox.yview)
scrollbar.grid(row=0, column=1, sticky="ns")
listbox.configure(yscrollcommand=scrollbar.set)

# Control frame
control_frame = Frame(root)
control_frame.grid(row=2, column=0, pady=10)

# Entry and buttons
Label(control_frame, text="Add Item:").grid(row=0, column=0, padx=5)
entry = Entry(control_frame, width=20)
entry.grid(row=0, column=1, padx=5)

Button(control_frame, text="Add", command=add_item).grid(row=0, column=2, padx=5)
Button(control_frame, text="Remove Selected", command=remove_item).grid(row=0, column=3, padx=5)

# Add some initial items
initial_items = ["Python", "Java", "C++", "JavaScript", "Go", "Rust", "Swift", "Kotlin"]
for item in initial_items:
    listbox.insert(END, item)

root.mainloop()

Key Configuration Options

Important parameters for creating effective scrollable Listboxes −

Conclusion

Creating scrollable Listboxes in Tkinter requires proper configuration of both the Listbox and Scrollbar widgets using yscrollcommand and command parameters. Using grid layout provides better control over widget positioning and responsive design compared to pack geometry manager.