Step-by-Step Guide to Drop-Down Combo Boxes Using Tkinter and Ttkbootstrap in Python

by xanthium-enterprises in Circuits > Software

50 Views, 0 Favorites, 0 Comments

Step-by-Step Guide to Drop-Down Combo Boxes Using Tkinter and Ttkbootstrap in Python

Creating a drop down Combobox using Tkinter (ttkbootstrap) GUI and Selecting a Value using Python

When building user interfaces in Python, the combination of Tkinter and its extension, ttkbootstrap, is a powerful tool. Tkinter is a popular library for desktop applications, while ttkbootstrap adds modern themes and custom widgets for a sleeker look.

One commonly used widget is the combo box, which lets users select options from a drop-down list. In this Instructable, we’ll show you how to create and customize combo boxes with Tkinter and ttkbootstrap, helping you build stylish and functional interfaces for your Python apps.

You can find the original Article, Add Dropdown Combo Boxes to Your Python App with Tkinter and ttkbootstrap here
Source codes for the tkinter Combo Boxes can be found here on Github

Supplies

Install Python

Open your web browser and go to the official Python website

You should see a button that says Download Python (with the latest version number, e.g., Python 3.x.x).Click the Download Python button to download the installer for your system.

Type the following command to check the Python version

python --version

Make sure to download the correct version for your system (Windows 64-bit or 32-bit). Most modern systems are 64-bit, so the 64-bit version is typically the one you’ll want.

Install ttkbootstrap

Before we start, we need to install the ttkbootstrap library. If you haven’t already, you can do so using pip.

Open your command prompt (cmd.exe) or PowerShell and type the following

pip install ttkbootstrap

Building a Basic Drop-Down Combo Box With Tkinter and Ttkbootstrap

Let’s start by creating a basic Tkinter window and adding a combo box using ttkbootstrap. The combo box will display a list of baud rates typically used in serial communication.

We’ll simulate a list of standard baud rates as options for the drop-down menu. The list will look like this

# Define the list of baud rate options

baud_rates = ['1200', '2400', '4800', '9600']

To create the window and combo box, we’ll use ttkbootstrap for styling. Here's the code to set up the window and populate the combo box.

import ttkbootstrap

# Create the main window with a 'darkly' theme

app_window = ttkbootstrap.Window(themename='darkly')

# Set the window title and dimensions

app_window.title('Baud Rate Selector')

app_window.geometry('400x400') # width x height

# Define the list of baud rate options

baud_rates = ['1200', '2400', '4800', '9600']

# Create the combo box and populate it with the baud rates

baud_rate_combo = ttkbootstrap.Combobox(value=baud_rates)

# Display the combo box in the window

baud_rate_combo.pack(pady=50)

# Run the Tkinter event loop

app_window.mainloop()

Here, we're importing the ttkbootstrap library, which is an extension of Tkinter. It provides modern themes and widgets that enhance the appearance of Tkinter applications.

app_window.title('Baud Rate Selector') sets the title of the window to "Baud Rate Selector". This title will appear in the title bar of the window.

app_window.geometry('400x400') specifies the size of the window. Here, it's set to a width of 400 pixels and a height of 400 pixels.

baud_rates, contains the options that will populate the drop-down menu in the combo box. The options here represent standard baud rates for serial communication. These options will appear in the drop-down list of the combo box.

ttkbootstrap.Combobox() line creates a combo box widget.

value = baud_rates assigns the list of baud rates to the combo box. These values will be displayed in the combo box as options for the user to select.

.pack() is a geometry manager used to place the widget in the window.

pady=50 adds vertical padding around the combo box, giving it some space from other elements

mainloop() is the event loop that makes the application interactive. This line starts the Tkinter event handling, allowing the user to interact with the window and its widgets (like selecting an option from the combo box).

Getting the Selected Value From a Combo Box Using an Event in Tkinter

To get the selected value from a combo box in Tkinter, we need to bind the combo box to an event. This allows us to trigger a specific function when the user selects an option.

In this example, we use the <<ComboboxSelected>> event, which is triggered every time the user selects an item from the combo box. When the event occurs, the function that is bound to it is executed.

To implement this, we first create a combo box and populate it with a list of options, such as baud rates like 1200, 2400, 4800, and 9600. Then, we use the bind() method to bind the <<ComboboxSelected>> event to a custom function.

This function retrieves the currently selected value from the combo box using the get() method and prints it to the console.

Here is the code for binding the <<ComboboxSelected>> event to a Python tkinter ComboBox.

import ttkbootstrap

def click_bind(e):

print(my_combo.get())

root = ttkbootstrap.Window(themename = 'darkly')

root.title('Hello World')

root.geometry('400x400') # width x height

options = ['1200','2400','4800','9600']

my_combo = ttkbootstrap.Combobox(value = options)

my_combo.pack(pady = 50)

my_combo.bind('<<ComboboxSelected>>',click_bind)

root.mainloop()

The function that handles the event receives an event object as a parameter, although in this case, we don’t need to use it directly.

The main task is to get the selected value using combo_box.get(), which retrieves the item selected from the dropdown. In this example, when the user selects a baud rate from the combo box, the program immediately prints the selected value to the console.

The bind() method is a powerful feature in Tkinter that allows us to link specific events, such as a combo box selection, to custom actions.

By binding the combo box to the <<ComboboxSelected>> event, the application becomes interactive. The program reacts as soon as the user makes a selection, and you can easily extend this behavior to perform additional actions, like updating the UI or triggering other functionality based on the selection.